[英]Creating stripe token using separate elements
Instead of using the element type 'card' I needed to separate the elements, In the documentation example they only use 'card' so when they create a token they just pass the card object to the create token parameter. 我不需要使用元素类型'card'来分隔元素,在文档示例中它们只使用'card',因此当它们创建令牌时,它们只是将card对象传递给create token参数。
stripe.createToken(card).then(function(result) {
});
How can I pass these multiple objects to create a token? 如何传递这些多个对象来创建令牌?
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');
From the Elements
reference. 来自
Elements
参考。
element: the Element you wish to tokenize data from.
element:您希望从中标记数据的元素。 The Element will pull data from other Elements you've created on the same instance of elements to tokenize.
元素将从您在同一元素实例上创建的其他元素中提取数据以进行标记。
https://stripe.com/docs/elements/reference#stripe-create-token https://stripe.com/docs/elements/reference#stripe-create-token
So you can initialize elements 所以你可以初始化元素
var elements = stripe.elements();
And then define / mount your fields 然后定义/挂载您的字段
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');
Then this should pull them all in as they are part of elements
然后这应该将它们全部拉入,因为它们是
elements
一部分
stripe.createToken(cardNumber).then(doSomething);
Edit: The postal code element has been deprecated, so I removed it from my example. 编辑:邮政编码元素已被弃用,因此我从我的示例中删除了它。 If you're using separate fields and want to collect the postal code (or other address data), you should do this via an
<input>
and then pass it into the optional cardData
object when calling stripe.createToken
如果您正在使用单独的字段并想要收集邮政编码(或其他地址数据),则应通过
<input>
执行此操作,然后在调用stripe.createToken
时将其传递给可选的cardData
对象
https://stripe.com/docs/stripe-js/reference#elements-create 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);
Here is a jsfiddle someone from the Stripe team put together that takes a different approach: 这是一个来自Stripe团队的jsfiddle,它采用了不同的方法:
https://jsfiddle.net/ywain/o2n3js2r/ https://jsfiddle.net/ywain/o2n3js2r/
var stripe = Stripe('XYZ');
var elements = stripe.elements();
var style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
};
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');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// In this example, we're simply displaying the token
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
// In a real integration, you'd submit the form with the token to your backend server
//var form = document.querySelector('form');
//form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
//form.submit();
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
cardNumberElement.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
stripe.createToken(cardNumberElement).then(setOutcome);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.