This page has 0 threads | Add post

Blogs

Finding our blogs useful? Please consider helping us to share more!

Our experience of switching to Stripe payments Part four of a five-part series of blogs
This is the blog which I wish I could have read before starting to integrate Stripe payments on our website! It explains why I'm ultimately glad we went for Stripe, but also some of the things which are harder than they need to be. Our experience of switching to Stripe payments Background and reason for change Enabling payments using Stripe Customising payments forms (this blog) Conclusion - would I choose Stripe again?

Our experience of switching to Stripe payments

Part four of a five-part series of blogs

This is the blog which I wish I could have read before starting to integrate Stripe payments on our website! It explains why I'm ultimately glad we went for Stripe, but also some of the things which are harder than they need to be.

Our experience of switching to Stripe payments
Background and reason for change
Enabling payments using Stripe
Customising payments forms (this blog)
Conclusion - would I choose Stripe again?

Posted by Andy Brown on 01 June 2021

In this blog

The basics - how payment forms work
Example one - splitting the form
Example two - adding extra fields
Example three - styling elements

Customising payments forms

So I was on a roll, and assumed that the excellent documentation and technical help provided on the Stripe website would hold my hand as I customised my payments form. But as we'll see, this wasn't quite the case ...

I've spent longer on this section than on the basic payments implementation because I think you will spend longer on it too!

The basics - how payment forms work

A standard Stripe form combines the card number, card expiry date and CVC number:

This form includes the zip code too, although this isn't essential.

You create this by first adding an HTML element with a specific id:

You create an empty div tag, and Stripe fill it with an IFrame on their server.

To create the card form, you can use JavaScript like this:

You're using element and style objects programmed for you behind-the-scenes by Stripe. Don't think that these are HTML elements and CSS styles - they're not!

All of this works reasonably well, but it's at this point that the Stripe help online seems to peter out. Not only that, but there doesn't seem to be much other support out there (I speak as someone who spends half his life on StackOverflow).

In particular, there doesn't seem to be any online published API for all of the properties of elements and styles, nor do there seem to be many tutorials at all on how to customise payment forms (which surely is Stripe's number one selling point?).

To illustrate the problems I had I've shown 3 examples under separate headings below.

Example one - splitting the form

So I wanted to have the ability to show the card number, expiry date and CVC number on different lines:

I wanted to divide the main parts of the form up like this.

You can do this by having 3 separate div tags (I called mine div-number-element, div-expiry-element and div-cvc-element) and mounting each separately:

I drank a lot of coffee working all of this out!

When you submit a payment, you only need to specify the card number element - the other two bits of information are automatically added in for you, somehow:

No mention of the card expiry date or CVC number when submitting a form - but apparently none is needed (because they belong to the same set of elements, they will be automatically detected).

Example two - adding extra fields

For better security, I wanted to add a postcode. There were a few examples online of how to add zip codes, but it took me ages to track down StackOverflow sample code showing how to add a post code to a payment request:

In the interests of saving other people's pain, here's the code I used to submit a postcode with a payment. My point is not that this is difficult to do - it isn't - but that it's difficult to find out how to do it online.

Example three - styling elements

However, my biggest gripe about the whole Stripe process is the thing which should be its biggest selling point: styling parts of a form. Let's have a look at my form more closely:

The form looks easy to create, doesn't it? Just add four input boxes and give them CSS styles.

This is how the form was actually constructed:

The top 3 boxes are empty white rectangles with borders, which are filled in by Stripe; the bottom one is an input box sitting in the Wise Owl page, and styled conventionally using CSS.

Getting the boxes to look the same took a great deal of perseverance, not helped by an almost complete absence of information on the topic on the Stripe website!

Parts of this blog
Our experience of switching to Stripe payments Background and reason for change Enabling payments using Stripe Customising payments forms (this blog) Conclusion - would I choose Stripe again?

This blog has 0 threads

Add a new post

BLOGS BY TOPIC

BLOGS BY AUTHOR

Customising payments forms

The basics - how payment forms work

Example one - splitting the form

Example two - adding extra fields

Example three - styling elements

Head office

London

Manchester