Browse 554 attributed reviews, viewable separately for our classroom and online training
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.

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

Posted by Andy Brown on 01 June 2021

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

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:

Standard form

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:

A card element

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:

JavaScript to create form

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:

Split payment form

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:

Mounting elements of form

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:

Card number

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:

Post code on Stripe form

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:

Basic payment form

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 form construct

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!

This blog has 0 threads Add post