CODEWITHSUNDEEP
ruby-on-railsstripe-paymentspayment-gatewaystripe.js
CodecPM
CodecPM

Reputation: 433

How to mount individual card elements stripe.js?

I am trying to mount individual card elements in order to get desired design, but when I mount multiple elements only last one was mounted.

My procedure follows as below:

var stripe = Stripe(STRIPE_PUBLISHABLE_KEY);
var elements = stripe.elements();

var cardNumber = elements.create('cardNumber');
var cardExpiry = elements.create('cardExpiry');
var cardCvc = elements.create('cardCvc');

// Add an instance of the card Element into the `card-element` <div>
cardNumber.mount('#card-element');
cardExpiry.mount('#card-element');
cardCvc.mount('#card-element');

Upvotes: 3

Views: 2288

Answers (1)

Spiff
Spiff

Reputation: 596

You need to use a different container for each element, otherwise it will overwrite the previous one when you mount it.

In your case you'd need 3 containers (e.g. #card-number-element, #card-expiry-element and #card-cvc-element) and then change your last 3 lines to this for example:

cardNumber.mount('#card-number-element');
cardExpiry.mount('#card-expiry-element');
cardCvc.mount('#card-cvc-element');

Upvotes: 5

Related Questions