如何在条带中的付款意图示例中自定义付款方式

Question

我正在尝试按照以下链接https://stripe.com/docs/payments/accept-a-payment 中显示的示例进行操作。

我在客户端有以下代码

 var cardNumber = elements.create('cardNumber', {
    placeholder:'',
    style: style
});
var cardexpiry = elements.create('cardExpiry',{
    placeholder:'',
    style:style
});
var cardCVV = elements.create('cardCvc',{
    placeholder:'',
    style:style
});


// Add an instance of the card Element into the `card-element` <div>.
cardNumber.mount('#card-element');
cardexpiry.mount("#card-expiry")
cardCVV.mount("#card-cvv")

而不是这个

var card = elements.create("card", { style: style });
card.mount("#card-element");

因为我想要一些 UI 操作。根据链接中发布的代码，我应该执行以下操作

var submitButton = document.getElementById('submit');

submitButton.addEventListener('click', function(ev) {
 stripe.confirmCardPayment(clientSecret, {
   payment_method: {card: card}
 }).then(function(result) {
 if (result.error) {
  // Show error to your customer (e.g., insufficient funds)
  console.log(result.error.message);
 } else {
  // The payment has been processed!
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
    }
 }
});
});

但是，在上面的 payment_method 示例中，传递了卡对象，而在我的代码中并非如此。如何在 stripe.confirmCardPayment(clientSecret, { payment_method: {card: card} 中分别传递我的卡号和 exp/date 以及 CVC

Answer 1

有一个关于如何stripe.createToken()在不使用cardelement时调用的类似问题。

根据createToken 的 Stripe 文档：

您希望从中标记数据的 cardNumber 元素。如果适用，Element 会从您在同一个 Elements 实例上创建的其他元素中提取数据以进行标记化——您只需要提供一个 Element 作为参数。

现在，特别是对于这种情况，confirmCardPayment 部分说：

通过在 data 参数中将card 或cardNumber元素作为 payment_method[card]传递，将 stripe.confirmCardPayment 与来自元素的支付数据一起使用。

基本上，您只需将cardNumber元素传递给payment_method["card"]它，它就会从您创建的其他元素中提取数据。

...
stripe.confirmCardPayment(clientSecret, {
  payment_method: {card: cardNumber}
})
...