Design

The following template is an example of a smart tap-enabled Pass, specifically a loyalty card. Notice that all fields are the same as a Pass that's not smart tap-enabled. The barcode is hidden when smart tap is enabled. Other UX differences include an indicator below the Pass header, which displays that smart tap is enabled on the Pass, and a toggle switch to disable smart tap on the bottom of the Pass.

Smart tap design template
  1. class.programLogo
  2. class.issuerName
  3. class.programName
  4. class.heroImage
  5. object.loyaltyPoints.label
  6. object.loyaltyPoints.balance
  7. object.secondaryLoyaltyPoints.label
  8. object.secondaryLoyaltyPoints.balance

  9. object.barcode.type

    object.barcode.value

  10. object.barcode.value

    object.accountId

    object.barcode.alternateText

  11. class.hexBackgroundColor
  12. class.accountNameLabel
  13. object.accountName
  14. class.accountIdLabel
  15. object.accountId
  16. class.rewardsTierLabel
  17. class.rewardsTier
  18. *.imageModulesData.mainImage
  19. *.messages[0].header
  20. *.messages[0].body
  21. *.textModulesData.header
  22. *.textModulesData.body
  23. *.infoModuleData.labelValueRows[0].columns[0].label
  24. *.infoModuleData.labelValueRows[0].columns[0].value
  25. *.linksModuleData.uris[2]
  26. *.linksModuleData.uris[0]
  27. *.linksModuleData.uris[1]