Stripe.js解析单个信息

Question

我正在尝试使用我自己的输入表单来获取信用卡信息，然后使用它来生成令牌。在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是否仍处于活动状态。有没有人可以使用旧版本的工作小提琴？

Answer 1

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

如果你想将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');