我应该如何将 `cardNumberElement`、`cardExpiryElement` 和 `cardCvcElement` 传递到 `stripe.confirmCardPayment` 的 `payment_method.card` 中？

Question

在条纹文档中，我可以轻松创建这样的卡片

var cardElement = elements.create("card");

我只是简单地传递cardElement给confirmCardPayment

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardElement,
  },
});

但是，出于视觉样式 css 的原因，我必须cardElement像这样分成三部分：

var cardNumberElement = elements.create("cardNumber");
var cardExpiryElement = elements.create("cardExpiry");
var cardCvcElement = elements.create("cardCvc");

然后我想打电话stripe.confirmCardPayment，我现在该怎么办？

该文档仅显示cardElement方法，没有拆分示例。

Answer 1

您可以传入 CardNumber 元素。只要它们都是从 Elements 对象的同一个实例创建的，confirmCardPayment 函数就会从所有已安装的 Elements 中提取相关信息以获取到期/CVC 并且它会正常工作.

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardNumberElement,
  },
});

https://stripe.com/docs/js/setup_intents/confirm_card_setup#stripe_confirm_card_setup-with_element-payment_method-card

Answer 2

持卡人姓名和邮政编码可以通过以下方式提交（使用常规输入元素）：

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardNumberElement,
    billing_details: {
       name: document.getElementById("inputCardholderName").value,
       address: {
          postal_code: document.getElementById("inputZip").value
       }
    }
  }
});

Answer 3

karllekko的答案有效。

如果您使用的是 CardNumberElement、CardExpiryElement、CardCvcElement、“@stripe/react-stripe-js”中的组件

你可以简单地做：

payment_method: {
        card: elements.getElement(CardNumberElement), 
        .
        .
}

它会自动获取其他组件的值。