javascript - Stripe.js 解析个人信息

Question

我正在尝试使用自己的输入表单来获取信用卡信息，然后使用它来生成 token 。在 Stripe.js 3 中，这显然很难实现，因为它使用 iframe 将输入字段安装到每个 div 元素。显然有一个 update() 函数，您可以使用它从其他地方(我自己的 UI)获取值，但我无法让它工作。有人知道如何实现这个吗？

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#number');
var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#example2-card-expiry');
var cardCvc = elements.create('cardCvc');
cardCvc.mount('#example2-card-cvc');

https://jsfiddle.net/507oh942/2/

https://stripe.com/docs/stripe.js#other-methods

我也不确定支持此功能的 Stripe.js 2 是否仍然有效。有人有使用旧版本的工作 fiddle 吗？

Answer 1

在 Stripe.js v3 中，所有卡信息都在 Stripe 域托管的 iframe 上提供，无法从您自己的表单中获取卡信息。如果您需要这样做，我将继续使用 Stripe.js v2，但请注意，随之而来的是 PCI 影响(SAQ A-EP 与 SAQ A)。

如果您想将 v3 中的字段分解为单独的组件(一个用于数字、到期日等的字段)，您可以轻松地做到这一点，尽管它们仍然由 iframe 托管。

请参阅此处查看完整示例，https://jsfiddle.net/o2n3js2r/132/

var cardNumberElement = elements.create('cardNumber', {
  style: style
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = elements.create('cardExpiry', {
  style: style
});
cardExpiryElement.mount('#card-expiry-element');

var cardCvcElement = elements.create('cardCvc', {
  style: style
});
cardCvcElement.mount('#card-cvc-element');

var postalCodeElement = elements.create('postalCode', {
  style: style
});
postalCodeElement.mount('#postal-code-element');