CODEWITHSUNDEEP
stripe-payments
Toseef Zafar
Toseef Zafar

Reputation: 1767

Stripe Elements - change in layout of 'card-element'

I am looking for a way to customise the layout of 'card number' 'expiry date' and 'CCV' fields when using Stripe Elements and injecting these fields through card.mount('#card-element'); as described in the first example of this page https://stripe.com/docs/stripe-js

It puts all the card fields in one row, I want to change that layout and put them in different rows.

Any ideas?

Thanks in advance

Upvotes: 9

Views: 5863

Answers (1)

cometfish
cometfish

Reputation: 545

You can do this by creating a separate div for each card input (number, expiry, CVC), which you can layout however you like: 

<div id="example3-card-number"></div>
<div id="example3-card-expiry"></div>
<div id="example3-card-cvc"></div>

Then tell Stripe Elements about each one:

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#example3-card-number');

var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#example3-card-expiry');

var cardCvc = elements.create('cardCvc');
cardCvc.mount('#example3-card-cvc');

Ref: https://stripe.dev/elements-examples/ (Example 3)

Upvotes: 10

Related Questions