javascript - Creating stripe token using separate elements

Question

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.

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

Answer 1

From the Elements reference.

element: the Element you wish to tokenize data from. 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

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

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

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