使用单独的元素创建条带标记

Question

我不需要使用元素类型'card'来分隔元素,在文档示例中它们只使用'card',因此当它们创建令牌时,它们只是将card对象传递给create token参数.

stripe.createToken(card).then(function(result) {

});

如何传递这些多个对象来创建令牌？

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#card-number');
var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#card-expiry');
var cardCvc = elements.create('cardCvc');
cardCvc.mount('#card-cvc');
var cardPostalCode = elements.create('postalCode');
cardPostalCode.mount('#card-postal-code');

Answer 1

从Elements参考.

element:您希望从中标记数据的元素.元素将从您在同一元素实例上创建的其他元素中提取数据以进行标记.

https://stripe.com/docs/elements/reference#stripe-create-token

所以你可以初始化元素

var elements = stripe.elements();

然后定义/挂载您的字段

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

// creating a postal code element is deprecated 
// var cardPostalCode = elements.create('postalCode');
// cardPostalCode.mount('#card-postal-code');

然后这应该把它们全部拉进去 elements

stripe.createToken(cardNumber).then(doSomething);

编辑:邮政编码元素已被弃用,因此我从我的示例中删除了它.如果您正在使用单独的字段并想要收集邮政编码(或其他地址数据),您应该通过a执行此操作<input>,然后cardData在调用时将其传递给可选对象stripe.createToken

https://stripe.com/docs/stripe-js/reference#elements-create

// <input id="postal-code" name="postal_code" class="field" placeholder="90210" />

var cardData = { 
  address_zip: document.getElementById('postal-code').value
}

stripe.createToken(cardNumber,cardData).then(doSomething);