Блог

Я следую документации по подписке на Stripe. У меня возникли трудности с преобразованием кода JavaScript в TypeScript. В документации stripe они передают объект в функцию createPaymentMethod . В Angular это не позволяет ему проходить, потому что объект должен иметь 3 свойства, но в документации они передают только одно свойство.

Ошибка:

 error TS2345: Argument of type '{ card: any; }' is not assignable to parameter of type '{ card: any; isPaymentRetry: any; invoiceId: any; }'.
  Type '{ card: any; }' is missing the following properties from type '{ card: any; isPaymentRetry: any; invoiceId: any; }': isPaymentRetry, invoiceId
  

Код:

 export class StripeSubsriptionCheckoutComponent implements AfterViewChecked {
  card: any;

  constructor(private http: HttpClient) {}

  ngAfterViewChecked() {
    // Set up Stripe.js and Elements to use in checkout form
    var style = {
        base: {
            color: "#32325d",
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: "antialiased",
            fontSize: "16px",
                "::placeholder": {
                color: "#aab7c4"
            }
        },
        invalid: {
            color: "#fa755a",
            iconColor: "#fa755a"
        }
    };

    var cardElement = window['elements'].create("card", { style: style });
    console.log('card element', cardElement)
    cardElement.mount("#card-element");
    cardElement.on('change', this.showCardError);
    this.card = cardElement;
  }

  showCardError(event) {
    let displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  }

  savePaymentDetails() {
    var card = this.card
      console.log('savePaymentDetails')
      const latestInvoicePaymentIntentStatus = localStorage.getItem(
        'latestInvoicePaymentIntentStatus'
      );
      console.log('lastestInvoicePay', latestInvoicePaymentIntentStatus)

      if (latestInvoicePaymentIntentStatus === 'requires_payment_method') {
          console.log('fjd')
          const invoiceId = localStorage.getItem('latestInvoiceId');
          const isPaymentRetry = true;

         
          // Create new payment method amp; retry payment on invoice with new payment method
          this.createPaymentMethod({
              card,
              isPaymentRetry,
              invoiceId
          });
      }
      else {
         this.createPaymentMethod({ card});
      }
  }

  createPaymentMethod({ card, isPaymentRetry, invoiceId}) {
      console.log('createPaymentMethod')
      console.log(card)
        // Set up payment method for recurring usage
      let billingName = 'tom'
      console.log(billingName)

      window['stripe'].createPaymentMethod({ 
        type: 'card',
        card: card,
        billing_details: {
            name: billingName
        }
      })
      .then((result) => {
          console.log('line 90', result)
          if(result.error) {
            //  displayError(result);
          }
          else {
              console.log('line 95: else statement')
              if(isPaymentRetry) {
                console.log('line 97', result)
              }
              else {
                  console.log('result', result)
                  // Create the subscription
                  this.createSubscription({
                      customerId: result,
                      paymentMethodId: result.paymentMethod.id,
                    priceId: result
                  })
              }
            }
          
      })

  }

  createSubscription({ customerId, paymentMethodId, priceId }) {
      console.log('createSubscriptiton')
  }
}
  

Проблема в строках

 else {
  this.createPaymentMethod({ card});
}
  

Здесь вы вызываете this.createPaymentMethod объект, который содержит только card , но сигнатура метода требует card , isPaymentRetry и invoiceId :

 createPaymentMethod({ card, isPaymentRetry, invoiceId}) {
  

Вы захотите изменить это, чтобы либо передать значения для отсутствующих параметров, либо указать, что isPaymentRetry и invoiceId являются необязательными, например:

 createPaymentMethod({ card: any, isPaymentRetry?: bool, invoiceId?: string }) {