Digital Wallet Set Up

This guide explains how to configure and test a TRIFFT loyalty card for Apple Wallet and Google Wallet. Configure a separate channel for each wallet platform that the project supports. TRIFFT uses the Store Card pass type for Apple Wallet loyalty cards.

Before You Start

Prepare the following:

access to the TRIFFT Content Cockpit with permission to manage Touchpoints
the languages required for the wallet card
the member identifier that the barcode must contain
confirmation of the barcode formats supported by the POS scanners
approved brand colors in hexadecimal format
the required image assets for each wallet platform
an Apple device and an Android device for testing, if both platforms are enabled
a test member with a known card number, points balance, and tier, where applicable

Important
Confirm the barcode format and encoded identifier with the POS or integration owner before launch. A visually correct barcode can still fail if the POS expects a different format or identifier.

1. Create the Digital Wallet Channels

Create one channel for Apple Wallet and one for Google Wallet when both platforms are required.

Log in to the TRIFFT Content Cockpit.
Navigate to Settings → Touchpoints. The All Channels page opens.
Click Add new.
Configure the channel:

Field Description
Name Internal name used to identify the channel.
Type Select Digital Wallet Pass (Apple) or Digital Wallet Pass (Google).
Description Optional internal description of the channel.
Click Save.
Repeat the procedure for the other wallet platform, if required.

Field	Description
Name	Internal name used to identify the channel.
Type	Select Digital Wallet Pass (Apple) or Digital Wallet Pass (Google).
Description	Optional internal description of the channel.

Each Digital Wallet channel contains three tabs:

SCREENS for the front and back design
TRANSLATION for customer-facing labels
SETTINGS for channel-level behavior

2. Configure Translations

Open the Digital Wallet channel and select the TRANSLATION tab. Choose a language, complete the available fields, and click Save. Repeat the configuration for every supported language.

Apple Wallet Translation Fields

Field	Description
Card Description	Description associated with the wallet card.
Card Number	Label displayed for the member's card number.
Points Balance	Label displayed for the member's points balance.
Your Name	Label displayed for the member's name.

Google Wallet Translation Fields

Field	Description
Card Number	Label displayed for the card number.
Points	Short label for points. The Google API allows a maximum of 9 characters.
Points Balance	Label displayed for the member's points balance.

Keep labels short. Native wallet applications can truncate long text, particularly on smaller devices or when the user has increased the system text size.

3. Configure Channel Settings

Open the SETTINGS tab of each Digital Wallet channel.

Shared Settings

Setting	Description
Assign Unique Card Number	When enabled, each new wallet pass receives a unique card number. When disabled, the pass is linked to the member's primary card and uses the same card number. A unique number can be used to distinguish usage through a specific channel.
Default Barcode Type	Fallback barcode format used when no project card configuration is available. Select a format supported by both the wallet platform and the POS scanner.

The editor shows QR Code as an available default barcode type.

Supported Apple Wallet barcode formats include:

QR Code
PDF417
Aztec
Code 128

The selected format must also be supported by the POS scanner. The wallet platform controls the displayed barcode size.

Apple Wallet Setting

Apple Wallet also contains Logo Text. Apple Watch attempts to display both the logo and logo text when they fit. When both do not fit, the logo takes priority. If the pass has no logo, Apple Watch displays the logo text, which may be truncated.

4. Configure the Front Design

Open the SCREENS tab.
Select Front design.
Configure the fields for the selected wallet platform.
Review the preview displayed on the right side of the editor.

Apple Wallet Front Design

Field	Description
Display Logo Text	Shows or hides the Logo Text configured in the channel settings.
Background Color	Primary solid background color of the pass.
Foreground Color	Color of primary values, such as the points balance.
Label Color	Color of field labels.
Logo@2x	Logo image, `320 × 100 px`.
Logo@3x	Logo image, `480 × 150 px`.
Icon	Square icon, `29 × 29 px`.
Icon@2x	Square icon, `58 × 58 px`.
Icon@3x	Square icon, `87 × 87 px`.
Strip@2x	Strip image, `750 × 246 px`.
Strip@3x	Strip image, `1125 × 369 px`.

Use a simple, recognizable mark for the icon. Keep essential content away from the edges of the strip image and verify that the foreground and label colors have sufficient contrast against the background.

Google Wallet Front Design

Field	Description
Logo	Program or brand logo displayed on the card.
Hero image	Main card image. Upload an image sized `930 × 600 px`.
Background Color	Primary solid background color of the card.

Use the edit control next to an uploaded image to adjust its crop. Keep important artwork away from the edges and verify the result in the preview.

Note
Apple Wallet and Google Wallet control the final rendering. Custom fonts, free-form layouts, and manual barcode sizing are not available.

5. Configure the Back Design

The Back design uses content blocks. The same block types are available for Apple Wallet and Google Wallet.

Open the SCREENS tab and select Back design.
Click the + icon to add a block.

Select the block Type:

Type	Fields	Use
`TEXT`	Label, Body	Adds informational text to the back of the card.
`LINK`	Label, Link url	Adds a customer-facing link. Enter a complete destination URL.
`NOTIFICATION_CENTER`	No additional fields are displayed in the editor.	Adds the Notification Center block to the design.

Complete the fields for the selected block.
Drag blocks using the handle on the left to change their order.
Use the delete icon to remove a block that is no longer required.
Review the result in the preview.

6. Save and Publish the Designs

The front and back designs are published separately.

In the design editor, click Save as Draft.
Review the saved draft and its preview.
Click Publish when the design is ready.
Return to the SCREENS tab and confirm that the relevant screen shows the PUBLISHED status.
Repeat the procedure for both Front design and Back design.

Important
Saving a screen as a draft does not publish it. Confirm the PUBLISHED status for both screens before launch.

7. Enable the Wallet Buttons in the Mobile App

After configuring the Digital Wallet channels, enable the relevant add-to-wallet buttons in the Mobile App channel.

Navigate to Settings → Touchpoints.
Open the project's Mobile App channel.
Select the SETTINGS tab.
Locate the MOBILE WALLETS section.
Enable the required settings:

Setting Effect
Enable Apple Wallet Displays the Add to Apple Wallet button on the card screen.
Enable Google Wallet Displays the Add to Google Wallet button on the card screen.
Save the Mobile App channel settings.

Setting	Effect
Enable Apple Wallet	Displays the Add to Apple Wallet button on the card screen.
Enable Google Wallet	Displays the Add to Google Wallet button on the card screen.

8. Test on Physical Devices

Complete the following test for every enabled wallet platform:

Sign in to the Mobile App as the test member.
Confirm that the expected Add to Apple Wallet or Add to Google Wallet button is visible on the card screen.
Add the loyalty card to the device wallet.
Open the saved card on the physical device.
Verify the member name, card number, points balance, tier, and other configured fields.
Check the colors and all uploaded images for sharpness, placement, and cropping.
Open the back of the card and test every text and link block.
Present the barcode to the production-equivalent POS scanner.
Confirm that the POS identifies the correct member.
Process a controlled test transaction that changes the member's points or tier.
Confirm that the updated loyalty information appears on the wallet card.
Repeat the test for every supported language and wallet platform.

Launch Checklist

Troubleshooting

Problem	Possible cause	Solution
The add-to-wallet button is not visible	The corresponding Mobile App wallet setting is disabled.	Open the Mobile App channel and enable Enable Apple Wallet or Enable Google Wallet under SETTINGS → MOBILE WALLETS.
A design change is not visible	The screen was saved as a draft but not published.	Open the Digital Wallet channel, publish the changed screen, and confirm its PUBLISHED status.
Text is difficult to read	The foreground or label color has insufficient contrast with the background.	Update the colors and repeat the check on a physical device.
A label or value is truncated	The text is too long for the available native wallet field.	Shorten the text and check every supported language.
An image is cropped incorrectly	Important artwork is too close to the image edge or the crop requires adjustment.	Use the image edit control, reposition the crop, and verify the preview and physical pass.
An image is blurred	The uploaded file does not meet the pixel dimensions shown in the editor.	Export a new image at the required size instead of enlarging the existing file.
The barcode is visible but does not scan	The format is not supported by the POS scanner or the scanner cannot reliably read that format from a screen.	Confirm the scanner specification, select a compatible barcode format, and retest at the POS.
The barcode scans but identifies the wrong member or no member	The encoded value or card-number behavior does not match the identifier expected by the POS integration.	Verify the project card configuration, the Assign Unique Card Number setting, and the barcode-to-member mapping with the POS or integration owner.
The points balance or tier is not current	The source member data or wallet synchronization has not updated as expected.	Confirm the member data in TRIFFT, run a controlled test update, and contact TRIFFT Support if the wallet card remains outdated.