Mobile Wallet Pass Composer

The Platform offers a Mobile Wallet Pass composer to create your customized and desired Wallet Passes. It is composed of the following sections:

756051.png
Mobile Device Simulator Options

Here are the available mobile phone simulator viewing options:

  • Show Pass! button → displays the Mobile Pass how it would be viewed inside of the user’s phone and enables the View Back Side Button

  • View Back Side Button → displays the backside of the Wallet Pass and enables the Lock Screen button

  • By pressing the color selector button, you can toggle the phone simulator color between Black and White.

756043.png

Identification

it is important to be aware that some of the elements in the Wallet Pass Template have the option to have a General Value for all the Passes delivered or to use a Custom Value per Pass, where the value is extracted from a Subscription List used in the moment of Delivery.

note

There are some elements in the template that are optional. IF you wish to use them, you have to checkmark the square beside the name of those features. There is no pre-established order to construct the template, hence you create your own Pass in any order you wish.

There are some elements in the template that are optional. IF you wish to use them, you have to checkmark the square beside the name of those features. There is no pre-established order to construct the template, hence you create your own Pass in any order you wish.

In the Identification section, establish a Template Name and define a Short Description for the Wallet Pass.

756019.png

Once this is defined, click on the Content section to keep creating your Wallet Pass Template.

Content

Here you will define the text that will be displayed inside of the Wallet Pass Template in the following steps:

  1. Select the sector where the text is going to be displayed in the following spaces:

    1. header

    2. primary

    3. secondary

    4. auxiliary

    5. backside

  2. Enter the text field’s label

  3. Enter the text as a general value (static) or mark it as a specific value per Pass.

  4. Click on Add Field button

Once you have added a Field, it will be displayed in the phone simulator.

Generic and Specific Value Fields

There are many use cases when Wallet Passes are used to display personalized and variable fields for each user.

Boarding tickets, Event tickets, and Store Loyalty Cards are some of the most common cases where these are used.

Fields that are customizable in Wallet Passes, have the option Specific value per pass available:

756141.png

An example of setting up a pass with customizable fields would be the following:

756145.png

The content fields of the Wallet Pass are set to variable.

The values of these fields will have will use the data indicated in the Subscription List used to deliver the Wallet Passes.

Note

Images and barcodes can also be variables.

756130.png

Text Field

Description

Logo text

Text displayed next to the logo

Note

This text field is optional!

Place

Pass section where you want to add the label-content pair. Places: header, primary, secondary, auxiliary and Back side.

Before adding the text to the pass, you must select the location of the text.

Label

A label that accompanies the text content.

Content

Content of the field that you want to add. The content can be a static value for all passes or a personalized field for each Pass holder.

756048.png

To see how backside fields look, press the View back side button.

756062.png

To return to the front, click on the View front side button.

Modifying Content

Each Content field has associated edit and delete actions.

When you want to modify a content field, click on the icon with the pencil to modify that field (the field row will be highlighted in yellow). Once you finish editing the selected field, click on the Add field button to update the changes in the form and in the template. If you want to delete a field from the content, press the delete icon. The element will disappear from the table and from the phone simulator.

Visual Design

In this step, you will define the following to be used:

  • Wallet Pass Template type

  • Load Pass images

  • Define Pass colors

  • Select barcode type Wallet Pass Template

756085.png
Wallet Pass Template Types

There are 5 available Wallet Pass Template Types:

  1. Store Cards

  2. Boarding passes

  3. Coupons

  4. Event tickets

  5. Generic Passes

756075.png
Wallet Pass Images

The images used inside of the Wallet Pass depend on the selected Wallet Pass Template Type:

Pass Type

Supported Images

Boarding Pass

Logo, Icon, Footer

Coupon

Logo, Icon, Strip

Event Ticket

Logo, Icon, Strip, Background, Thumbnail

Generic

Logo, Icon, Thumbnail

Store Card

Logo, Icon, Strip

Note

Both the logo and icon are mandatory, other images are optional.

To use an optional image just verify the checkbox beside its name is checked, otherwise mark it.

The images you upload can be any size up to 10 MB.

In the process of creating the Wallet Pass Template, your images will be scaled (preserving the aspect ratio) to fill their allocated space. Images with a different aspect ratio to their assigned space are trimmed after scaling.

Image

Details

Background Image

Displayed behind the entire front side of the Wallet Pass.

Dimensions: 180 x 220 points

Footer

Shown near the barcode

Dimensions: 286 x 15 points

Icon

Shown when a Push Notification is received from the Wallet Pass in the user’s lock screen

Dimensions: 29 x 29 points

Logo

Upper left corner of the Wallet Pass, next to the logo text.

Dimensions: 160 x 50 points (In most cases, it should be narrower)

Strip Image

Displayed behind the main fields.

Assigned varies with each device:

  • On iPhone 6 and later: 375 x 98 points for event tickets, 375 x 144 points for gift cards and coupons, and 375 x 123 in all other cases.

  • On older hardware: 320 x 84 points for event tickets, 320 x 110 points for other pass styles with a square barcode on devices with 3.5-inch screens, and 320 x 123 in all other cases.

Thumbnail Image

Displayed next to the fields on the front of the pass.

Dimensions: 90 x 90 points.

Note

Background color applies ONLY if there is no background image.

You can adjust the color of labels and contents of fields with the color selectors Label Color and Forecolor.

Barcodes

There are 3 kinds of Barcodes available to be used inside of Wallet Passes:

  1. QR

  2. PDF-417

  3. Aztec

756083.png

To set a Barcode, do the following:

  1. Select the checkmark next to the Barcode option

  2. Select the Barcode type you wish to use

  3. Set the content and the label

    1. For general information for all passes or allowing it to be variable, checking the options specific value per pass.

    2. In the barcode label, you can choose to use the same text as used in the encoded message.

Geolocation

You can add up to 10 different locations associated with a Mobile Wallet Pass.

756120.png

To active this feature, mark the associated Locations checkbox.

Use the Google Maps widget to locate the location you wish to associate by writing its address on the Address to search textbox or look for it navigating directly the interactive map.

Once you have found the desired location, write a label to the selected location and click on the Add location button to associate it to the pass.

If you want to edit a location, click the Edit button and if you wish to remove a location, click on the delete button.

As a general strategy to get the right address, write down a well-known reference place and then move toward your desired location; use the red circle in the middle of the map to verify you're focusing on the right place.

If you want to set the maximum distance for getting notifications from a location, mark the Maximum distance for notifications checkbox and the set a non-zero integer number.

Once a pass is delivered to and downloaded in the user's device, it will be activated and appear at the lock screen when the user arrives at a location associated with the pass.

756117.png

iBeacons

An iBeacon is a device that transmits a signal containing identifying details using a defined protocol.

It allows marketers to deploy close proximity location-based campaigns without requiring a native Mobile App as it uses the native capabilities of the Wallet. A Wallet is required to trigger an action when in the proximity of a recognized iBeacon in the form of a passive notification on the user's lock screen.

This requires the user to have the Wallet Pass installed inside of their Native Wallet.

note

Since iBeacons operate and rely on Apple services it is considered a best-effort service and as a result limited troubleshooting and support is available.

Since iBeacons operate and rely on Apple services it is considered a best-effort service and as a result limited troubleshooting and support is available.

In the iBeacons section inside of the Wallet Pass Composer, you can add up to ten iBeacons associated with the Mobile Wallet Pass.

756071.png

To active this feature, mark the Associate iBeacons checkbox.

Every iBeacon has an Universal Unique Identifier (UUID) which is related to the company owner of the devices.

  • The major number → identifies subsidiaries of the company (i.e. branches, stores, resellers, etc.

  • The minor number → identifies small places indoors (e.g. departments, sections, etc.)

For the associated relevant text, you can write a generic message for every pass or set it as specific value per pass.

Dates

In the Dates section of the Mobile Wallet Pass Composer, you can set a Relevant or Expiration Date.

756070.png
Relevant Date

This is the date and time where the Wallet Pass is most important or useful.

Examples:

  • Flight time for a Boarding Pass

  • Time of the concert for an Event Ticket

  • Day of an offer for a Coupon

Expiration Date

Sets the validity of the Wallet Pass. Once the defined date has passed, the Pass' validity is voiced and the Barcode located inside of the Pass is blurred and labels it “This pass is no longer valid”.

Note

NOTE: The expiration date doesn't mean the pass is going to be deleted.

The pass will remain saved inside of the user’s Mobile Wallet because only the end-user is allowed to delete their Passes from their Wallet Application.

For these dates, you can set a general date for every Wallet Pass or set specific dates per pass.

Use the Time zone to specify the local time where the Campaign is being used.

Google Pay

The Wallet Pass functionality in the Mobile Wallet Pass Composer has been enhanced to support compatibility with Google's payment solution called Google Pay.

The Google Pay App can be downloaded from the Play Store in these countries. It allows users to pay using debit and/or credit card, but also allows the storing of Passes.

This application functions identical to the iOS Wallet Application but uses it’s own Google Pay Pass Layouts.

In the Wallet Pass Template Composer, there is a Google Pay tab that you may enable/disable to create a translation of a template to Google Pay Pass by checking/unchecking the Translate to GooglePay template option. Once the template is saved, the corresponding Google Pay template will be generated.

756833.jpg
Hero and Main Image

Google Pay Pass Templates require 2 fixed images as default common values to all cards (like the Generic value for every pass fields):

  • Icon image

  • Strip/Footer/Thumbnail (depending on Pass Type)

Note

These MUST be present in the Wallet Pass Template before activating the translation.

The Wallet Pass Composer will warn you if have not added them.

Since the display of Hero and Main Images in Google Pay abides by different rules, you can upload separate images to that end in this tab.

The Hero Image is fixed for all passes and by default, is taken from the Strip/Footer/Thumbnail of the apple pass, to specify a different image, check the Hero Image box.

The Main Image is entirely optional and can be different for every end-user, if you want to use it, check the Main Image box and set a Generic or Specific value.

Note

In order to ensure proper display on all devices, we strongly recommend you use images with at least a 3:1 aspect ratio, and for the Hero Image, the size should be of at least 1032×336 pixels

Google Pay Pass Layouts
There are 5 types of Google Pay Pass Layouts available:
  1. Offers

  2. Gift Cards

  3. Event Tickets

  4. Boarding Passes

  5. Loyalty Cards

The Wallet type you select in the Content section of the Wallet Pass Composer will be translated to its Google Pay counterpart according to the following mapping:

Wallet type

Google Pay Template

Boarding Pass

Boarding Pass

Coupon

Offers

Event Ticket

Event Ticket

Generic

Loyalty Card

Store Card

Loyalty Card

Note

Not all fields shown below are translated. Pass layouts used in Google Pay have been simplified to generate Passes that look as similar as possible in both platforms.

Offers
756098.png
  1. Title Image: supplied by Icon Image

  2. Issuer Name: supplied by system information of your brand.

  3. Title: supplied by Template name

  4. Hero Image: Default supplied by strip.

  5. Supplied by Barcode value.

  6. Supplied by Barcode label

  7. Background Color: supplied by the template background color.

  8. Expires: supplied by expiration date.

  9. Offer provider: same as 2,

10. The main Image Supplied on Google Pay composer tab.

11. Supplied by first Backside field value.

12. Supplied by second Backside field value.

15, 16. Remaining header, primary, secondary and auxiliary labels, and values.

19-21. Backfields containing links, mobilenumbers, and locations with the proper syntax (shown below).

Loyalty Card
756111.png
  1. Program logo: supplied by Icon Image

  2. Issuer Name: supplied with system information of your brand

  3. Program name: supplied by template name

  4. Hero Image: Default supplied by strip or thumbnail (depending on Wallet type).

  5. Points label: supplied by first primary field label

  6. Loyalty points balance: supplied by the first primary field value.

  7. Supplied by Barcode value.

10. Account id: supplied by first Auxiliary field value.

11. Background Color: supplied by template background color.

12. Account name label: supplied by the second secondary field label

13. Account name: supplied by the second secondary field value

14. Account id label: supplied by the first Auxiliary field label.

15. same as 10.

18. Main Image Supplied on the Google Pay composer tab.

21,22. Remaining header, primary, secondary, auxiliary labels and values.

25-27. Back fields containing links, mobilenumbers and location values with the proper syntax (shown below)

Event Ticket
756102.png
  1. Event Logo, supplied by Icon image

  2. Supplied by Template Name.

  3. Supplied by the first Secondary field label.

4, 5. Supplied by the first header field value. Value must be an ISO8601 formatted date time with timezone (i.e. 2019-06-28T18:00:00+01:00)

  • Hero Image. Default supplied by strip image.

7,8. Supplied by the first auxiliary field label and value, respectively.

9,10. Supplied by the second auxiliary field label and value, respectively.

11,12. Supplied by the third auxiliary field label and value, respectively.

13,14. Supplied by the fourth auxiliary field label and value, respectively.

15. Supplied by barcode.

16. Supplied by barcode label.

17. Background Color: supplied by template background color.

18. Supplied by the first Back side field value.

19. Supplied by the first Secondary field value.

20. Supplied by the third Back side field label and value.

21. Same as 4 and 5.

23. Main Image Supplied on the Google Pay composer tab.

25. Supplied by the second Back side field value.

29. Supplied by the fourth Back side field value.

32, 33. Remaining header, primary, secondary, auxiliary labels and values.

36,37. Back fields containing links, mobilenumbers and location values with the proper syntax (shown below).

Boarding Pass
756114.png
  1. Airline Logo: supplied by Icon.

  2. Supplied by system information of your brand.

  3. Supplied by the first Header field. Label used as Airline IATA Code, value used as Flight Number.

4, 5. Supplied by Origin Airport Name and IATA Code set in the Google Pay composer tab.

6,7. Supplied by Destination Airport Name and IATA Code set in the Google Pay composer tab.

  1. Supplied by the first Secondary field Value.

  2. Supplied by the second Secondary field value.

11. Supplied by the third Secondary field label.

13. Supplied by first Auxiliary field value.

16. Seat number supplied by third Secondary field value.

19. Supplied by barcode.

20. Supplied by barcode label.

22. Background color: supplied by template background color.

26. Same as 3. Field value used as flight number.

27. First Back side field value.

32. Departure time set in the Google Pay composer tab.

34. Taken from the second Back side field value.

35. Taken from the third Back side field value.

36. Main Image supplied on the Google Pay composer tab.

39, 40. Remaining header, primary, secondary, auxiliary labels and values.

43,44,45. Back fields containing links, mobilenumbers and location values with the proper syntax (shown below).

Google Pay Boarding Passes

Google has designed a Boarding Passes to be used for flights only, and the template creation requires some additional fields. These will be requested when you translate a Boarding Pass type template to a Google Pass.

756129.png

Specify a Departure Date in the timezone of the Origin Airport.

This will be used as a means of Relevance to make the pass easily accessible on Android devices when the date approaches.

The Origin and Destination airport name and IATA codes are used by Google to generate the card and are placed where the first two primary fields label and value would be in an Apple Boarding pass.

Note

Make sure you supply valid IATA Codes on all options as these are required by Google

Links and Backside Fields

Any locations available in the Wallet template are added to the Google Pay card.

Links shown at the bottom are mapped exclusively from back side fields that use one of the following prepends in their value:

Link Type

Prepend syntax

URLs

http*{your url}

Google Maps locations

maps:{location name}

Phone numbers

tel:{phone_number}

Emails addresses

mailto:{email}

By using these prepends, links are added in fields as follows:

756073.png

Note

These are used only for translation and will not appear in iOS Wallet Pass fields.

Comparison between Wallet and Google Pay

Both native Wallet Applications allow the storing of Passes with text, images, barcodes, and metadata.

In the following table, are listed the characteristics and constraints of each Wallet Application:

Feature

Wallet

Google Pay

Colors

All are set by the user in the Wallet Pass Composer

  • Background color set by user

  • Others are set by the app based on the background image or using the title image's main color (non-black, non-white)

Barcode Formats

QR, PDF417, Code128, and Aztec

Note

optional

QR, PDF417, Code128, and Aztec

Note

optional

Geolocation metadata

Available, up to 10 locations per pass

Available, no limit per pass

iBeacon metadata

Available up to 10 iBeacons per pass

Note

NOT AVAILABLE

Images

2 - 5

(depending on the template)

1 - 3

Visual orientation

Vertical

Vertical

Storage

Device's internal memory

Cloud-based

Linked to the user’s Google Account

Expiration date

Available in all templates

Note

optional

Available in all templates

Note

optional

Relevant date

Available in all templates

Note

optional

  • Departure Date in Boarding Passes

  • Event Start Date for Event Tickets

Digital signing

Applied, using Apple WWDRCA and .p12 Certificate

Applied, using .p12 Certificate

Finish

In the Finish section of the Wallet Pass Composer, you must click on the Save template button to store your changes.

The Save and Update button appears when the editing of an existing Pass Template has been done and allows you to store your changes and automatically update the Wallet Pass on any devices that it is stored in.

If you do not wish to store the Wallet Pass Template, you can click on the Cancel button.

756128.png
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.