Digital Pass Template Design Guideline
Introduction
An Apple Pass template or a Google Wallet Pass template is required to be used to generate a digital pass file of the compact or semantic compact credential. This page provides best practice guidance for designing the digital pass template.
Apple Pass Template
A template bundle is required to be uploaded. The maximum size of the bundle is 1MB. It includes the following:
pass.json (mandatory): a JSON file contains information that identifies the pass, text that appears on the pass, and other information about the pass. For more details on pass.json design click here.
images and localization data. The following package structure provides an icon, a login and a strip. it has both Retina and non-Retina sizes of the image assets. You can include the following image assets in the bundle:
footer.png: displayed on the front of the pass near the barcode – only available on boarding passes.
icon.png: The pass’s icon. This is displayed in notifications and in emails that have a pass attached, and on the lock screen. When it is displayed, the icon gets a shine effect and rounded corners.
thumbnail.png: An additional image displayed on the front of the pass – only available on generic passes. For example, on a membership card, the thumbnail could be used for a picture of the cardholder.
logo.png: displayed on the front of the pass in the top left.
strip.png: displayed behind the primary fields on the front of the pass – only available on store cards, event tickets and coupons.
1template.zip
2├─ pass.json
3├─ icon.png
4├─ icon@2x.png
5├─ icon@3x.png
6├─ logo.png
7├─ logo@2x.png
8├─ logo@3x.png
9├─ strip.png
10├─ strip@2x.png
11└─ strip@3x.png
Read more about the visual layout of Apple Pass and suggested design guidelines here.
pass.json
The contents of pass.json are described in detail on this page. The following keys are required in pass.json:
formatVersion: Version of the file format. The value must be 1.
organizationName: Display the name of the organization that originated and signed the pass.
description: Brief description of the pass, used by the iOS accessibility technologies.
Visual Appearance Keys are optional. For example:
labelColor: Color of the label text, specified as a CSS-style RGB triple. For example,
rgb(255, 255, 255). If omitted, the label color is determined automatically.foregroundColor: Foreground color of the pass, specified as a CSS-style RGB triple.
barcode: Information specific to the pass’s barcode. The format of the barcode must be set to
PKBarcodeFormatQR. The messageEncoding must beiso-8859-1.
Other keys:
sharingProhibited: set to
falseto disable the Share Pass optionvoided: Indicates that the pass is void—for example, a one time use coupon that has been redeemed. The default value is
false.
Style Keys: A style key is required and corresponds with the pass's style. It can be a generic, storeCard, eventTicket, coupon or a boardingPass. Below is an example of a storeCard pass structure:
1"storeCard": {
2 "headerFields": [
3 {
4 "key": "codeHeader",
5 "label": "Certification",
6 "value": "{{ decoded.code }}"
7 }
8 ],
9 "primaryFields": [],
10 "secondaryFields": [
11 {
12 "key": "nameSecondary",
13 "label": "Name",
14 "value": "{{ decoded.name }}"
15 },
16 {
17 "key": "certificationLevelSecondary",
18 "label": "Certified for",
19 "value": "{{ decoded.certificationLevel }}"
20 }
21 ],
22 "auxiliaryFields": [],
23 "backFields": [
24 {
25 "key": "nameBack",
26 "label": "Name",
27 "value": "{{ decoded.name }}"
28 },
29 {
30 "key": "certificationNameBack",
31 "label": "Certification",
32 "value": "{{ decoded.certificationName }}"
33 },
34 {
35 "key": "codeBack",
36 "label": "Code",
37 "value": "{{ decoded.code }}"
38 },
39 {
40 "key": "certificationLevelBack",
41 "label": "Certified for",
42 "value": "{{ decoded.certificationLevel }}"
43 },
44 {
45 "key": "expiryBack",
46 "label": "Expires on",
47 "value": "{{ date decoded.expiry 'dd MMM yyyy' }}"
48 },
49 {
50 "key": "issuerNameBack",
51 "label": "Issued by",
52 "value": "{{ decoded.issuerName }}"
53 }
54 ]
55 }
headerFields: Fields to be displayed in the header on the front of the pass. Use header fields sparingly; unlike all other fields, they remain visible when a stack of passes is displayed.
primaryFields: Fields to be displayed prominently on the front of the pass.
secondaryFields: Fields to be displayed on the front of the pass.
auxiliaryFields: Additional fields to be displayed on the front of the pass.
backFields: Fields to be on the back of the pass.
transitType: this is required for boarding passes; otherwise not allowed. Type of transit. Must be one of the following values:
PKTransitTypeAir,PKTransitTypeBoat,PKTransitTypeBus,PKTransitTypeGeneric,PKTransitTypeTrain.Each field must contain a set of standard field dictionary keys:
key: the key must be unique within the scope of the entire pass.
label: label text for the field.
value: the value of the field.
Apple Pass Template Samples: Working at Heights
Download the compact credential sample template.zip file here.
Download the semantic compact credential sample template.zip file here.
Google Wallet Pass Template
A template bundle is required to be uploaded. The maximum size of the bundle is 1MB. It includes the following:
template.json (mandatory): a JSON file contains information that identifies the pass, text that appears on the pass, and other information about the pass. Value mappings are specified in this file.
1template.zip
2└─ template.json
This is highly recommended to use the Generic Pass template. You can find more about the visual layout and all fields of Google Wallet Pass design here.
template.json
This file is structured as follows:
genericClass: contains common data across objects. Text fields on the pass face are defined here. it contains a list of text modules, containing a
headerand abodyfor each row. To add text to the pass details, set the values in thetextModulesData
1"genericClass": {
2 "textModulesData": [
3 {
4 "header": "Name",
5 "body": "{{ decoded.name }}"
6 },
7 {
8 "header": "Certification",
9 "body": "{{ decoded.certificationName }}"
10 },
11 {
12 "header": "Code",
13 "body": "{{ decoded.code }}"
14 },
15 {
16 "header": "Certified for",
17 "body": "{{ decoded.certificationLevel }}"
18 },
19 {
20 "header": "Expiries on",
21 "body": "{{ date decoded.expiry 'dd MMM yyyy' }}"
22 },
23 {
24 "header": "Issued by",
25 "body": "{{ decoded.issuerName }}"
26 }
27 ]
28}
genericObject: represents each Generic Pass a user has in their Google Wallet app. It contains a number of configurable attributes such as card title, header, sub header, logo, background color, hero image and barcode. The image assets should be uploaded and publicly accessible.
1"genericObject": {
2 "genericType": "GENERIC_TYPE_UNSPECIFIED",
3 "cardTitle": {
4 "defaultValue": {
5 "language": "en-US",
6 "value": "Working at Heights Certification"
7 }
8 },
9 "header": {
10 "defaultValue": {
11 "language": "en-US",
12 "value": "{{ decoded.certificationName }}"
13 }
14 },
15 "subHeader": {
16 "defaultValue": {
17 "language": "en-US",
18 "value": "Advanced Saftety Training"
19 }
20 },
21 "logo": {
22 "sourceUri": {
23 "uri": "https://YOUR_WEB_DOMAIN/LINK_TO_LOGO_IMAGE.png",
24 "description": ""
25 }
26 },
27 "hexBackgroundColor": "#CACACA",
28 "heroImage": {
29 "sourceUri": {
30 "uri": "https://YOUR_WEB_DOMAIN/LINK_TO_HERO_IMAGE.png",
31 "description": ""
32 }
33 },
34 "barcode": {
35 "type": "QR_CODE",
36 "value": "{{encoded}}",
37 "alternateText": "QR code"
38 }
39 }
Google Pass Template Samples: Working at Heights
Download the compact credential sample template.zip file here.
Download the semantic compact credential sample template.zip file here.