Angular 和 Stripe 订阅保存付款细节并创建订阅

Question

I following the Stripe subscription documentation . I having difficulty converting the JavaScript code to TypeScript. In the stripe documentation, they are passing an object to createPaymentMethod function. In Angular, it doesn't allow it pass because the object has to have 3 properties but in the documentation, they are only passing one property.

Error:

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

Code:

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 & 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')
  }
}

Answer 1

The problem is the lines

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

Here you are calling this.createPaymentMethod with an object that only contains card , but the method signature requires card , isPaymentRetry and invoiceId :

createPaymentMethod({ card, isPaymentRetry, invoiceId}) {

You'll want to change this to either pass in values for the missing parameters or specify that isPaymentRetry and invoiceId are optional, for example:

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