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

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.createTokenstripe.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);
);

【讨论】:

这与鸭子的解决方案有何不同?似乎它也在从卡号元素创建一个令牌。

以上是关于使用单独的元素创建条带标记的主要内容,如果未能解决你的问题,请参考以下文章

基于的ssr 遗传多样性分析

将字符串拆分为标记并将标记分成两个单独的数组

R在POSIXlt日期序列中标记多个日期期间

条带错误 400 - 不能多次使用条带令牌

Xamarin.forms - 如何在 MapView 上创建可拖动元素(标记)?

在HTML代码中,超链接元素的标记是啥?