Posts Tagged ‘stripe’

Integrating Apple Pay with your website

Thursday, May 11th, 2017 | Programming, Tech

Over at Worfolk Anxiety, we use Stripe as our payment processor. It’s very good; I highly recommend it to anyone looking to integrate a payment API into their website.

They also have support for Apple Pay. This seems highly desirable as while it is quite easy to enter my credit card details on a desktop computer, it is far more difficult to do on a mobile phone. Being able to click a big Apple Pay button and have it all taken care of is some good magic at work.

Unfortunately, while Stripe makes it super easy to do this, Apple do not.

The dreaded developer program

Most platforms want you to write amazing software for them, so they allow you to do it without much ado. Not Apple. If you want to publish something into the App Store, you have to register for their Developer Program. That is £79 a year. A lot of money, especially if you just want to give away a free app.

However, they also restrict test accounts.

So, for example, if you just want to test whether your website is properly integrated with Apple Pay, you have to pay Apple £79 for the privilege. No wonder it is called “Apple Pay”.

Two fingers to Tim Cook

Luckily, they don’t prevent you from using Apple Pay without the Developer Program. But it does mean the only way to test is to ship code to live and then pay with a real credit card before refunding the transaction.

It’s a total pain in the ass. But it is worth it to avoid giving Apple the money? That’s for you to decide (but yes, yes it is).

Building an online checkout with Stripe and React

Monday, March 13th, 2017 | Programming, Tech

Worfolk Anxiety recently launched its web store. We build this for a number of reasons. One is that it gives the customer a better experience because they can buy one eBook and get it in every format. Another is that it makes it a lot easier for us to offer upsells and tripwires.

Payment processor

We’re using Stripe as the payment processor. Stripe has become very popular over the past few years because it allows you to build an entirely integrated checkout process without any mention that Stripe is behind it.

How do they do this without requiring you to have PCI compliance on your server? It is all done client-side. You include their JavaScript library. This hashes the credit card details the customer enters and sends it off to stripe’s servers. Stripe then send you back a hash that you can then use to make server-side credit card charges.

Using React

Given so much of the work has to be done in JavaScript, React was a good choice for building the checkout. This allowed me to make it interactive and give the user clear and speedy feedback.

In the case of our checkout process, you are asked to enter your credit card details. Once you have done this, further fields are revealed asking you to enter your name and email address. This step by step approach is a better experience for the customer because they do not get overloaded.

Deploying with Webpack

The finally step is Webpack. This takes the JavaScript and packages it up for the browser. Because the JavaScript is written in ES6, and web browsers only support ES5, it first uses Babel to transpile it back to ES5, before loading everything into one single module and compressing it.