Building complex interfaces with Stripe Elements

Building complex interfaces with Stripe Elements

2 min read

Generate audio versions of your articles with Blogcast.

It all started with a Tweet by Muhammed Erdem where he showcased a cool credit card form he had designed on Codepen:

I was using the standard Stripe Element input (pictured below) and challenged myself to implement the above design into a real application.

Default input for Stripe Elements
Default input for Stripe Elements

I started by copying the styles for the card and moving the Vue code to a single file component (Card.vue). After getting the original code working on Sitesauce I noticed the first problem: the code was using regular inputs to capture the credit card details and show them in the card while I needed to use Stripe Elements to be able to process payments to that card.

After digging through Stripe's documentation I found that just as there was a Card element that encapsulated the card number, expiry date, and CVC code there were individual CardNumber, CardExpiry and CardCvc elements that I could use.

My solution consisted of adding the inputs directly on the card. This involved updating the styling both on the card and on the elements (which you can do with the style & class options when creating it).

const cardNumber = elements.create('cardNumber', {
    classes: {
        base: 'card-item__number',
        focus: 'card-item__focus',
    },
    style: {
        base: {
            color: '#ffffff',
            lineHeight: '1',
            fontFamily: '"Source Code Pro", monospace',
            fontSmoothing: 'antialiased',
            fontSize: '27px',
            fontWeight: "500",
            '::placeholder': {
                color: '#cbd5e0'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
})

I also updated the logic for detecting the card brand to rely on Stripe (which I assume is more accurate and also means I have less code to maintain) and added automatic focus to make the input more intuitive and ended up with a really cool result.

A video of the interface I ended up with

Enjoyed the article? Consider sharing it on Twitter so others can enjoy it too :)

Receive project updates, article drafts & thoughts on your inbox every saturday.

Subscribe
next article
Adding Two Factor Authentication to a Laravel application
previous article
My first conference