使用单独的元素创建条带标记
Posted
技术标签:
【中文标题】使用单独的元素创建条带标记【英文标题】:Creating stripe token using separate elements 【发布时间】:2017-08-15 05:20:43 【问题描述】:我需要分隔元素,而不是使用元素类型“卡片”,在文档示例中,他们只使用“卡片”,因此当他们创建令牌时,他们只需将卡片对象传递给创建令牌参数。
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');
【问题讨论】:
我认为没有stripe.createToken()
这样的东西,只有stripe.card.createToken
和stripe.bankAccount.createToken()
我不认识你在stripe.js documentation使用的任何方法
我在说这个stripe.com/docs/elements/reference#stripe-create-token
【参考方案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);
编辑:邮政编码元素已被弃用,因此我将其从示例中删除。如果您使用单独的字段并希望收集邮政编码(或其他地址数据),您应该通过 <input>
执行此操作,然后在调用 stripe.createToken
时将其传递给可选的 cardData
对象
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);
【讨论】:
不应该是stripe.createToken(elements)
吗?
它必须是您创建和安装的元素之一,而不是父级elements
--- stripe.createToken(elements)
会抛出错误。
@Barmar 不!在任何一个元素上都可以工作。 jsfiddle.net/ywain/o2n3js2r
非常感谢。我不知道如何仅使用 cardNumber 创建令牌,但确实 stripe.createToken(cardNumber)
有效! Stripe 的文档需要改进 Elements 的自定义...
这种方法行得通,谢谢。但我同意,这不是一种非常直观的创建 API 的方法。如果这里有人为 Stripe 工作,请你看看这个【参考方案2】:
这是一个来自 Stripe 团队的 jsfiddle,它采用了不同的方法:
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);
);
【讨论】:
这与鸭子的解决方案有何不同?似乎它也在从卡号元素创建一个令牌。以上是关于使用单独的元素创建条带标记的主要内容,如果未能解决你的问题,请参考以下文章