如何使用 Stripe confirmCardPayment 的元素列表

Question

根据 Stripe Doc，payment_method.card 接受一个对象作为值，文档使用 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

对上述内容的小修正。没有提到 'card' 作为对象的键，它似乎随机失败。以下每次都有效

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
  });

如何使用 Stripe confirmCardPayment 的元素列表

How to use list of elements for Stripe confirmCardPayment

api

sdk

stripe-payments

element

payment