Before I break for Christmas, I thought I would write one last blog post for the year. In my previous update, I briefly mentioned that I used Stripe as the payment gateway for purchasing a “Treat” on the new Marcus Wareing website. In this article, I will discuss the reasons for choosing Stripe and give a very brief guide to using it with PHP and/or WordPress. And no, I’m not employed by Stripe 🙂

Why Stripe?

  • As an end user (ie a customer), I really like Stripe. I have always found a really quick, neat way to purchase something.
  • As a developer, I had yet to use it though. I have worked with several payment gateways (Sage Pay, Worldpay, PayPal). To be honest, I’m not a fan of any of them, whilst a couple have nice APIs, they are all fairly limited in how much you can customise them. The nice thing about Stripe is that you don’t need to worry about that – the popup means that the user “stays” on the website but at the same time it is clear that they are paying through a safe/reliable gateway.
  • Finally, as a merchant, I believe they are one of the most cost efficient gateways. No setup or monthly fees, then 1.4% + 20p per transaction

Checkout or Stripe.js

There are two methods for using Stripe (with websites), Checkout and Stripe.js. Checkout is the popup that you will probably be familiar with, and Stripe.js allows you to embed it in your own payment form. We decided to use Checkout, as I said before, I like the popup as it gives a bit of “comfort factor” to the user that they are paying via a legitimate service.

Something that wasn’t immediately obvious to me, and took me a few hours of reading the documentation to fully understand, is that Checkout does not take payment (same for Stripe.js). There is actually no way to do this without some kind of server side scripting. If you want a really basic “buy now” button on a static website then you are best off using PayPal.

Checkout simply creates and returns a token for that customer’s payment details. You will then need to create a charge using this token via Stripe’s API. Fortunately, there are a number of libraries available to help you with this.

I’ve stripped my code down here but the gist of it is that you bind the submit event of a form, prevent the default action to stop it posting, basic validation (using Parsley), set the product title and price according to the user’s selection, and then launch the Stripe popup. The popup is configured so that once a token is returned (ie the customer has submitted their card details), the token ID is inserted into the form, and then the form is submitted.

If you have a set product title, description and price then you wouldn’t need to use JavaScript at all. You can actually get away with using pure HTML. This example is from their documentation:

Creating a charge

So the user will have just submitted the order details along with the Stripe token ID to your server. As I said, there are a number of libraries in various languages that do all the heavy lifting. Since I was working with WordPress, I used Stripe PHP.

Again, I have stripped my code down so that you can see the where the magic actually happens. Hopefully it is all fairly self explanatory. On the live version, if the checkout is successful, then an email notification is sent to the merchant. Stripe sends it’s own notifications but in this case, the client wanted a bit more control over the formatting to make fulfilment a little bit easier.

Here is a little data flow chart that I quickly drew to summarise what is happening:

That really is all there is to it. Very easy. I initially purchased a plugin called WP Simple Pay Pro. It is a nice plugin and will probably be sufficient in most cases, but this time it didn’t quite meet the client’s requirements. I did however look into their code to help me with all the above so big shoutout to them!

Hopefully this will help you in some way and if you need any questions, just ping me an email or a tweet.

Thanks for reading. I hope you have a great Christmas and New Year.