Testing Apple Pay on the web with Stripe
Announced @ Apple September Event in 2014 alongside iPhones 6 and 6 Plus (gosh we’re already at X…), and available on the web since WWDC 2016, Apple Pay is probably the best contactless payment solution in the world.
You can pay almost anything you want with your digital print (or your face, if you’re one of the lucky owners of an iPhone X), and a recent study shows that it nabs 90% of contactless payment in the US.
Available in France — where I live — for almost 2 years, I really love using it in my everyday life. No need of my credit card anymore. Like each Apple product, its usage is seamless, frictionless (and dangerous for your checking account 😂).
So naturally, I wanted to integrate it on products I build as the C.T.O. of Les Tontons Livreurs.
Payment is something which is … tricky to handle, if you want to deal directly with banks and payment processors, you’re … a fool 😛. Since the beginning of my startup, and like Deliveroo, Kickstarter, Drivy, and other unicorns, I’m using Stripe, their APIs (and documentation) are really well engineered, they’re always iterating on new features … and, of course, they allow their customer to accept Apple Pay’s payments!
I’ve integrated Apple Pay for our iOS App, with a snap, super simple, but not the topic here. We’ll talk about integrating Apple Pay on the web which is definitely a different kettle of fish … so why the hell would I’d like to implement it ? Studies proved that conversions rate increase by 63% when customers don’t need to enter their credit card information. 63 percents!!!! QED.
But there are here 2 issues:
- Even if Stripe allows us to test its service without SSL, Apple requires it. First, SSL on localhost is not that easy, moreover, you can’t use self-signed certificates… That’s really annoying! I definitely don’t pay to pay €10 for testing something…
2. Plus, you need to register your domain on your Stripe dashboard to be able to authorize Apple Pay for your customers, and then you need to “verify” this domain by uploading a file that Stripe will verify, and obviously Stripe cannot read my localhost … which is … by its name, local…
So I’ve had a few hours trying to figure out how to test Apple Pay on the web, and here is my solution.
Disclaimer: I’ll be using React + react-stripe-elements with Facebook’s create-react-app to build the demo app, but please note that this solution is working as long as you use any local micro server that maps on any port of your localhost. So you can use Angular, Vue.js, or any other front end framework/lib!
Setting up the project
Assuming that, you all have create-react-app installed on your computer, let’s create a new app named stripe-apple-pay-demo.
Let’s add some neat things for the design (I’m not a designer at all), and add react-stripe-elements.
As you're absolutely not here to learn how to code/use Stripe (even with Apple Pay), I’ll skip all the code stuff, you’ll find the whole app in the github repository (link below).
It’s a delicious fruit store 🍏🍌🍋🍒🍍 !
Create and/or configure your Stripe account & Apple Pay.
I’m assuming that you already have a Stripe account, grab your publishable key (under Developer> API Key).
Then, navigate to Payment> Apple Pay and click on Add new domain
And here, unfortunately, you can’t put localhost, Stripe needs a real URL…
We need a way to map our localhost to the global internet…
Configuring a python server and ngrok!
A couple of years ago while working with one of Twilio engineer to solve an issue, I had to expose my localhost code to one of their support engineers. He introduced me to ngrok, you can download it on the official website (it’s free).
ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.
Knew that we need 𝜇-server to be able to expose the./well-known/apple-developer-merchantid-domain-association, we’ll run a Python 3 server on the port 8000, using
Python -m http. server 8000 (the http service is available since Python 3.x, if you’re running on 2.x, use python -m SimpleHTTPServer 8000),
As you’ve downloaded ngrok in the previous step, open a new tab on your terminal and run the command
ngrok http -subdomain=myservice 8000
It will expose your localhost:8000 to https://myservice.ngrok.com then, we can download the requested file and expose it into a /. well-known folder.
You can now add it to your Stripe account, that’s all, you’re ready to test Apple Pay on the web!
Then, shut your Python server down, cut ngrok tunnel and restart it on port 3001 (or the one exposed by your yarn start command), navigate to https://myservice.ngrok.io and if you have cards available on your wallet, you’re all set to test your Apple Pay integration on the web!
Happy. Hacking.
If this article helps you, feel free to give me a round of applause and/or follow me on Twitter.
