Set up apple pay on localhost

Are you adding Apple Pay on Web to your website? You might face the issue of setting up apple pay on your local machine(localhost) . But you don't need to worry you will have a clear idea about it by the end of this blog.

Before starting the blog I would like to introduce myself. Hi 👋, I am Evleen. A fellow full stack developer with interests more aligned towards Frontend development. I enjoy working on the react ecosystem. I am working for an organization since October 2020 right after my I completed my Bachelor of Engineering. That's all about me.

So let's start the blog. If you don't know about apple pay on web. You can visit this link https://developer.apple.com/documentation/apple_pay_on_the_web. While configuring the environment for apple pay, we need to register a domain on which you want to display apple pay button and accept payments on it.

So here there are two points which we need to take care of:

1. We should have a ssl certificate for the domain as apple pay button is rendered only on secured connections(https)

2. You will be able to accept payments only on that domain using the merchant id which you have set up.

So the challenge is how can we have this set up locally. We have to follow two steps for the above two problems:

1. Set up local SSH:

To do this we need to install a npm package which will set up ssl on our local. The package is

// install local-ssl-proxy
npm install -g local-ssl-proxy

// start a proxy from port 3001 to 3000 run:

local-ssl-proxy --source 3001 --target 3000

After this step you can access contents served on http://localhost:3000 from https://localhost:3001 as well.

1. Add a mapping in your /etc/hosts file:

This step is required because we can make payments on the configured domain only. Launch the terminal or command prompt and follow these steps:

// on mac

sudo nano /etc/hosts 

// enter your admin password and press return

Once you set up these two things, you will be able to see the apple pay button and can make payments as well on local after following the steps in the apple pay documentation.

If you found this blog to be insightful do share with your friends. If you have any questions regarding this or apple pay do let me know in comments I'll be happy to help you. I'll be writing a blog on How to accept payments on your website using apple pay soon So stay tuned for that!

Like. Comment. Share.