How to add 'Add to Wallet' button to website to add coupons to Apple Wallet and Google Pay accounts

Question

First off, I don't even know where to begin with this. I've tried reading through the documentation from Apple and Google, but still don't have the right answers.

My client already displays coupons on their site, which their customers either print or take a screenshot on their phone, to bring into the store to scan for the discount to be applied. They would now like to add the 'Add to Wallet' button to their coupon page so that the user can just add the coupon to their Apple Wallet or Google Pay account.

What steps are involved to do this? I understand that we will have to connect to the Apple/Google APIs to integrate with our site. I'm more confused about how these coupons or 'passes' are generated? It looks like there are plenty of third party services that help you create these passes, but can we do it ourselves? What's involved here?

If anyone has any experience doing exactly this and can give me a helping hand, or point me in the right direction of some good documentation, that would be greatly appreciated!

Solution

There's two different processes for both pass types:

Apple Wallet

Creating an Apple Wallet pass is described here: Apple Docs. You edit the pass.json describing your pass, then you can sign it using Apple's signpass tool after you have registered a pass type identifier and found your Team ID.

If you want to update the pass to display the information to customers, you would need a server that implements the web service API.

The "Add to Apple Wallet" button would be a image with a link to the .pkpass file you've generated for your customer. There are a few open source tools to create passes on the fly with your language of choice (e.g here).

Google Pay

Here is the docs for creating Google Pay passes. There's an initial bit of signing up to do, then you need to register credentials but after that initial pain, you can create passes and there are a few quick start applications to do so.

Once your pass (in Google terms it's Objects and Classes) is created, how you link the pass is different than Apple and requires embedding a snippet with a signed JWT for the "Save to Google Pay" button to appear, described better here.

If you want to update the pass to display the information to customers, you can interact with a REST API. Here are it's reference docs.

It looks like there are plenty of third party services

As you can see, it's quite the pain to do all this so it makes sense for companies to try to improve the developer experience. At PassNinja we're focusing on making a unified API to make this a lot easier, especially for NFC enabled passes.