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!

Answer 1

Since, I struggled on my own to find out the way for just placing a button "Add to Google Wallet", I will try to update the answer to this question.

For Google wallets:

Initially, all that we are trying to achieve is to add an anchor with a specific href in order to navigate the user to his wallet with the information about our card or event ticket or a generic object. The code has the following format:

<a href="https://pay.google.com/gp/v/save/{jwt}" target="_blank">
    <img src="/assets/img/enUS_add_to_google_wallet_add-wallet-badge.png" alt="Add to google wallet">
</a>

where the {jwt} is the encoded string of the payload that is needed to be used from the user.

Now, in order to generate this {jwt} you have to walk through each step:

1. Have a project in the google cloud console and enable the "google wallet" api.

2. Have a service account and a JSON key for this account. The json key has the following format:

{
  "type": "service_account",
  "project_id": "abc-######",
  "private_key_id": "******************************",
  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAI...\n-----END PRIVATE KEY-----\n",
  "client_email": "abc-service-account@abc-######.iam.gserviceaccount.com",
  "client_id": "1136************45266",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/abc-service-account%40abc-######.iam.gserviceaccount.com",
  "universe_domain": "googleapis.com"
}

Keep the client_email specified in the json here for the next steps.

3. Have a google wallet issuer account, you can create such an account at pay business console. Follow the steps of the video and keep the issuerId, because we need this in the next steps.

4. Add your service account to the pay console. The service account is specified at the json key in the client_email previously. Invite this email as a developer(!) in the Users tab. Finally, create a class and keep the classId for the next steps.

5. Finally checkout the rest samples repo. Regarding PHP, all you need to do is:

git clone git@github.com:google-wallet/rest-samples.git
cd rest-samples/php
composer install

6. Specify your destination to your JSON file as the env var: GOOGLE_APPLICATION_CREDENTIALS or modify the code and now you can create a link with the following code:

$googleLoyaltyCardService = new DemoLoyalty();
$jwtLink = $googleLoyaltyCardService->createJwtNewObjects(
    $issuerId, // specified in step 3
    $classSuffix, // specified in step 4.
    $objectSuffix, // a unique suffix of your choice for your loyalty object
); 

<a href="{{ $jwtLink }}" target="_blank">
    <img src="{{ asset('assets/img/enUS_add_to_google_wallet_add-wallet-badge.png') }}" alt="Add to google wallet">
</a>

7. Note that you have also to define your testing emails to the your google wallet account in order the users to be able to add the cards in their wallet when you are in testing mode.

All done just some editing of the payload values to fit your needs!

---

For Apple wallet I found this repo which provides instructions but I have not tested it.

Answer 2

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.