如何使用 Stripe ConfirmCardPayment 的元素列表

Question

根據Stripe Doc ， payment_method.card接受 object 作為值，文檔使用cardElement 。

stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      card, // Uses the mounted card element
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });

如何使用元素列表而不是單個 cardElement 復制相同的方法？

代替...

const card = elements.create('card');
card.mount('#card-element');

我想用...

const cardNumber = elements.create('cardNumber')
cardNumber.mount('#card-number')

const cardExpiry = elements.create('cardExpiry')
cardExpiry.mount('#card-expiry')

const cardCvc = elements.create('cardCvc')
cardCvc.mount('#card-cvc')

Answer 1

只要您使用相同的elements實例來創建和安裝所有單獨的卡片元素，您就可以將任何已安裝的卡片部分傳遞給confirmCardPayment() 。 Stripe.js 會自動將它們組合在一起。 例如：

stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      cardNumber, // Uses the mounted card element
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });

Answer 2

對上面的一個小修正。 沒有提到“卡”作為 object 的密鑰，它似乎隨機失敗。 以下工作每次

stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      card : cardNumber, //corrected here
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });