How to create digital passes for all

Joris Verbogt
Joris Verbogt
Feb 17 2023
Posted in Best Practices

Serve both Apple Wallet and Google Wallet with just one template

How to create digital passes for all

With Google Wallet now installed on Android phones in most countries, you probably want to generate cards and passes for both Google and Apple Wallet. What if you could create them from the same template?

Notificare Loyalty

The Notificare Loyalty add-on allows you to do just that. To be able to combine both wallet platforms into one template engine, we basically did 3 things to align the differences:

1: Map types

In Notificare Loyalty, we use the following types that map to their respective styles and classes in Apple and Google:

TypeGoogleApple
genericgenericgeneric
eventTicketeventTicketeventTicket
loyaltyloyaltystoreCard
giftCardgiftCardgeneric
offeroffercoupon
flightflightboardingPass w/ type Air
transittransitboardingPass w/ other type

2: Separate design and data

The two wallets have fundamentally different approach to layout and design. Where Google predefines specific fields for specific wallet item types, Apple only minimally defines the layout per type. On the other hand, Google wallet items have pretty clear semantics, something which Apple adds through explicit semantics settings.

To reconcile the two approaches, we let you define your fields (and values) for any of the wallets and then map them into the template design by using placeholders.

3: Update individual items when template changes

Some fields in Google are defined for the template and some for the individual items. In Apple, there is no such built-in distinction. In order to mimic the same behaviour for template fields, we allow you to update existing passes to reflect changes in their corresponding template.

A step-by-step example

Let's demonstrate these principles by creating a template and subsequently produce the wallet items.

Step 1. Define fields

Before mapping your eventual data to placeholders in the design, you will need to know which fields are going to be needed. For each type, there are several mandatory fields, so let's go ahead and create a minimal Generic template to see what we should define.

When creating a pass, after initial setup, let's check the mandatory fields in the Design tab:

As you can see, for Apple Wallet, the mandatory fields are Description, Icon and Logo.

Likewise, for Google Wallet, the mandatory fields are Issuer Name (for the template) and Card Number (for each individual card).

For each field, we can decide to store a static value in the design, or map it to a field we need to define.

In this example, we'll make the Description and Issuer Name both static and create fields for Icon, Logo and Card Number. Since the Icon and Logo are the same for all cards, we will use Common Fields for those; for the Card Number, we'll use a Pass Field with a default value of invalid:

Step 2. Use fields in the design

Now, we can use the fields we created inside the pass designs. Let's fill the Card Number for Google Wallet:

And let's use the Icon and Logo and create a Primary Field in the Apple Wallet design to show the Card Number:

Let's also add a QR code to the pass:

All checks are green, let's save the template!

Step 3. Create a pass from the template

Let's use this template we created and fill a value for the Card Number:

After the pass is created, we can share them and add them to our wallets.

The result in Apple Wallet:

And likewise in Google Wallet:

Conclusion

Although this is a very bare-bones gift card example, it clearly shows you the basic possibilities of creating multi-wallet cards and passes with the Notificare Loyalty add-on.

If you have been using the Notificare Demo app (or create one in the Dashboard), you can already try this for yourself. If you have an existing app in Notificare that still uses the old Notificare Loyalty (which is Apple Wallet compatible only), please contact us to have it upgraded to this new version.

As always, if you have any questions, we are available via our Support Channel.

Keep up-to-date with the latest news