Implement Apple Pay on Web

This is an almost complete guide to how you can implement Apple Pay on a website. I am writing this to bring everything I found to one place while I was doing the implementation.
This article may be long 😬, Coz I am trying to explain everything in detail as much as I can.

Things you need to start the work:

First Sign into the apple developer account and goto “Identifiers” under “Certificates, Identifiers & Profiles”

Add Test Cards to Sandbox Account

Issues I faced here:

Please make sure the website has SSL. It is required for Apple Pay to serve the website in HTTPS.
If you need only for development then you can use ngrok paid account for this. ( Free account doesnt work because it has an opening webpage which makes the apple domain verification impossible )

Now Lets Start the development 🎉

First let's see how it works to get a rough idea.

Note: This Website is required to have HTTPS and required to be served from verified domain.

2. Then in a script.js file, we first check whether Apple Pay supported and whether the user can make a payment with Apple Pay and show the apple pay button based on that.
Very Important Note: User required to have a billing address in added cards. Otherwise “canMakePayments” value is false.

3. Define the button action.
- When the user taps the Apple Pay button session.begin() triggers the Apple Pay Payment Sheet and as soon as the Payment Sheet is displayed session.onvalidatemerchant function is called.
- Inside applePayValidateMerchantEvent object there is a property “validationURL” which has which URL to use to create the Validated Payment Session.
- We should pass this “validationURL” to our backend API to request a Payment Session. Here I am doing a JQuery AJAX request to backend API with validationURL. Then our backend API requests a Payment Session from Apple Pay Service and return the payment session data.
- Then we pass that returned payment session data to session.completeMerchantValidation function.
- This will trigger the Apple Payment Payment Sheet to ask the user to authorise the payment with Touch ID or FaceID.
- On successful payment authorization session.onpaymentauthorized handler is called and its given a event object which contains a payment object consists of payment token data and payment data which includes card identity data and can be used to charge the user.
- We need to pass these data to backend and then payment processor and we will complete or fail the payment according to the returned status.
( I will write this charging the user with payment processor in a seperate article. )

merchantIdentifier -Your merchant ID.

displayName -A string of 64 or fewer UTF-8 characters containing the canonical name for your store, suitable for display. Don’t localize the name. Use only characters from the supported character sets in the fonts listed in the table below.

initiative — A predefined value that identifies the e-commerce application making the request.

initiativeContext -A value you provide based on the initiative.

The values for initiative and initiativeContext depend on the kind of application you’re building:

On supported models of MacBook Pro, the Touch Bar displays the value you supply for the displayName parameter.

This validates the merchant and requests a Payment session and return it to the client side.

The part where you charge the user with payment processor is not included in this article. Because the guidelines are different to each payment processor.
But I will do my best to write another article about that part.

So thats it 🥳🎉
Now you should be able to test the Apple Pay Implementation on your website.
If you find any issues or if anything needs to be added and changed in the article, feel free to comment and let me know.
If you need any help, just mention in a comment and I will help you on it.

Special thanks to the great developers who dedicated their precious time to support the developer community. ❤️✌🏻

Related posts:

Call me a hypocrite if you want, I call it conflicted. I’ve been struggling to understand my Trump supporting friends. Sometimes it all feels like too much, so in an effort to lighten the mood, I’ve…

Printed in full color.For this new edition of the best-selling Learn to Program, Chris Pine has taken a good thing and made it even better. First, he used the feedback from hundreds of reader e-mails to update the content and make it even clearer. Second, he updated the examples in the book to use the latest stable version of R

Your customers want rock-solid, bug-free software that does exactly what they expect it to do. Yet they can't always articulate their ideas clearly enough for you to turn them into code. You need Cucumber: a testing, communication, and requirements tool-all rolled into one. All the code in this book is updated for Cucumber 2.4,