Learn

Design a Google digital pass template

An Apple digital pass template is required to format a Compact or Compact Semantic Credential as a Google digital pass. This guide will show you how to design a Google digital pass template. The design is similar whether you are creating a Compact or a Compact Semantic Google digital pass template.

You can download the following sample files to better understand how to structure your own templates as you follow along this guide:

Note that our provided template offers greater flexibility in designing the digital pass, while the suggested template in the code snippets below would be easier to get started with. Either way. it is highly recommended to use Google's Generic Pass template.

Google digital pass template structure

The template.json contains the digital pass information, identifiers and value mappings. This file is structured as follows:

json
Copy to clipboard.
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": "Expires on",
21            "body": "{{ date decoded.expiry 'dd MMM yyyy' }}"
22        },
23        {
24            "header": "Issued by",
25            "body": "{{ decoded.issuerName }}"
26        }
27    ]
28    "genericObject": {
29    "genericType": "GENERIC_TYPE_UNSPECIFIED",
30    "cardTitle": {
31        "defaultValue": {
32            "language": "en-US",
33            "value": "Working at Heights Certification"
34        }
35    },
36    "header": {
37        "defaultValue": {
38            "language": "en-US",
39            "value": "{{ decoded.certificationName }}"
40        }
41    },
42    "subHeader": {
43        "defaultValue": {
44            "language": "en-US",
45            "value": "Advanced Saftety Training"
46        }
47    },
48    "logo": {
49        "sourceUri": {
50            "uri": "https://YOUR_WEB_DOMAIN/LINK_TO_LOGO_IMAGE.png",
51            "description": ""
52        }
53    },
54    "hexBackgroundColor": "#CACACA",
55    "heroImage": {
56        "sourceUri": {
57            "uri": "https://YOUR_WEB_DOMAIN/LINK_TO_HERO_IMAGE.png",
58            "description": ""
59        }
60    },
61    "barcode": {
62        "type": "QR_CODE",
63        "value": "{{encoded}}",
64        "alternateText": "QR code"
65    }
66}

  • genericClass: Contains common data across objects. Text fields on the pass face are defined here. Each text module contains a header and a body for each row. To add text to the pass details, set the values in the textModulesData.

  • 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.

Once your template.json file is ready, you need to compress it into a file named template.zip whose maximum size is 1MB.

What's next?

After designing your template locally, use it to create a MATTR VII Apple digital pass template.