Event ticket template

  • Google Wallet uses templates to control the display of passes, including event tickets, offering both default and customizable options.

  • Templates leverage field references, pointing to specific pass data, to populate content within various sections like card title, template, barcode, and details.

  • Developers can override default templates using code samples provided in Python, Java, and PHP to customize layouts and field display for a unique pass appearance.

  • Customization options include defining fields, modules (text, image, link), and predefined items for different template sections, enabling flexible pass design.

  • Passes have fallback mechanisms for field references and labeling, ensuring content display even with missing data and supporting multilingual needs through custom or default labels.

Event tickets support template rendering. If no template is defined, the default one is used.

Template definition

A pass template is defined at the class level and it is used to display any object that's associated with the class. The template defines which fields to display in different sections of the pass.

The template is divided into the following sections:

Android

Overview of pass template layout sections and positions

Web

Overview of pass template layout sections and positions

Card title

Android

Card title layout elements and field positions Default card title
  1. class.logo
  2. class.localizedIssuerName
    or class.issuerName
  3. class.eventName
  4. class.venue.name
  5. object.hexBackgroundColor
    or class.hexBackgroundColor

Wide-logo card title
  1. class.wideLogo
  2. class.eventName
  3. class.venue.name
  4. object.hexBackgroundColor
    or class.hexBackgroundColor

Web

Card title layout elements and field positions Default card title
  1. class.logo
  2. class.localizedIssuerName
    or class.issuerName
  3. class.eventName
  4. class.venue.name
  5. object.hexBackgroundColor
    or class.hexBackgroundColor

Wide-logo card title
  1. class.wideLogo
  2. class.eventName
  3. class.venue.name
  4. object.hexBackgroundColor
    or class.hexBackgroundColor

The card title section displays the logo, the name of the event, and the event venue. Neither the field references used to populate them nor their position can be changed.

When the wide logo field is set, on Android devices the default template header with the logo and issuer name is replaced with the wide logo.

Follow the wide logo image guidelines when creating your wide header logo to optimally display your image on your passes.

Card template

Android

Card template row layout elements and field positions

Web

Card template row layout elements and field positions

The card template section is used to display extra rows. These rows can contain text-based structured data fields or text module fields.

You can specify the number of rows that define the number of objects in the class.classTemplateInfo.cardTemplateOverride.cardRowTemplateInfos[] list. The list requires at least one element and we recommend to use at most two elements. Each element must be of one of the following types:

  • oneItem, which accepts one item:
    • item
  • twoItems, which accepts two items:
    • startItem
    • endItem
  • threeItems, which accepts three items:
    • startItem
    • middleItem
    • endItem

Each item can be defined as either a single field selector (.firstValue), two field selectors (.firstValue and .secondValue), or a predefined item (.predefinedItem). Both the selected field's values and their respective labels are displayed. When you define two field selectors, the values of the selected fields are displayed with a "/" separator. The same goes for the labels of the selected fields. Predefined items are used to define more complex rendering.

The following code sample shows how to override the card template card row sections to specify two rows. Each row includes three items that each reference six class-level textModuleData custom fields and their headers as labels:

Python

 {
   ... //Rest of class
   "textModulesData": [
        {
            "header": "Label 1",
            "body": "Some info 1",
            "id": "myfield1"
        },
        {
            "header": "Label 2",
            "body": "Some info 2",
            "id": "myfield2"
        },
        {
            "header": "Label 3",
            "body": "Some info 3",
            "id": "myfield3"
        },
        {
            "header": "Label 4",
            "body": "Some info 4",
            "id": "myfield4"
        },
        {
            "header": "Label 5",
            "body": "Some info 5",
            "id": "myfield5"
        },
        {
            "header": "Label 6",
            "body": "Some info 6",
            "id": "myfield6"
        }
    ],
   "classTemplateInfo": {
        "cardTemplateOverride": {
            "cardRowTemplateInfos": [{
                "threeItems": {
                    "startItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield1']"
                            }]
                        }
                    },
                    "middleItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield2']"
                            }]
                        }
                    },
                    "endItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield3']"
                            }]
                        }
                    },
                }
            },{
                "threeItems": {
                    "startItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield4']"
                            }]
                        }
                    },
                    "middleItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield5']"
                            }]
                        }
                    },
                    "endItem": {
                        "firstValue": {
                            "fields": [{
                                "fieldPath": "class.textModulesData['myfield6']"
                            }]
                        }
                    },
                }
            }]
        }
    }
}

Java

// Rest of class
  .setTextModulesData((new ArrayList<TextModuleData>() {
    {
      add((new TextModuleData()).setHeader("Label 1")
        .setBody("Some info 1")
        .setId("myfield1"));
      add((new TextModuleData()).setHeader("Label 2")
        .setBody("Some info 1")
        .setId("myfield2"));
      add((new TextModuleData()).setHeader("Label 3")
        .setBody("Some info 3")
        .setId("myfield3"));
      add((new TextModuleData()).setHeader("Label 4")
        .setBody("Some info 4")
        .setId("myfield4"));
      add((new TextModuleData()).setHeader("Label 5")
        .setBody("Some info 5")
        .setId("myfield5"));
      add((new TextModuleData()).setHeader("Label 6")
        .setBody("Some info 5")
        .setId("myfield6"));
    }
  }))
  .setClassTemplateInfo((new