使用單獨的元素創建條帶標記

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

---

編輯：郵政編碼元素已被棄用，因此我從我的示例中刪除了它。 如果您正在使用單獨的字段並想要收集郵政編碼（或其他地址數據），則應通過<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);

Answer 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);
});