> For the complete documentation index, see [llms.txt](https://docs.thewalletcrew.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thewalletcrew.io/guides-design/design/gift-card.md). # Gift card Configure a Gift card pass template for Apple Wallet and Google Wallet. Show stored value, support barcode/NFC redemption, and keep balance up to date. Whether you are a new client creating the template for the gift cards that will be distributed to customers, or already familiar with The Wallet Crew and updating an existing template, this article is a guided tour of the template designer. The goal is to configure a gift card template that reflects the brand identity, displays the right information to customers, and ensures a seamless experience across Apple Wallet and Google Wallet. Use a **Gift card** pass when the pass represents **stored value**. This template is designed for balance display and balance updates. Typical patterns: * Initial balance at issuance * Partial redemptions that decrease the balance * Top-ups and refunds that update the same pass If the pass is a discount coupon (not stored value), use [Offer](/guides-design/design/offer.md) instead. ### Architecture Apple and Google have their own gift card pass templates as you can see below. {% tabs %} {% tab title="Apple" %}

Apple gift card template — Check where the balance, barcode and back-of-card content sit in the Apple gift card layout.

{% endtab %} {% tab title="Google" %}

Google gift card template — Check how Google splits the same gift card into header, balance and messages areas.

{% endtab %} {% endtabs %} {% hint style="info" %} **To go further, find all the details of the two versions:** {% endhint %} **Apple:** {% embed url="" %} **Google:** {% embed url="" %} ### How to configure it on The Wallet Crew The Wallet Crew provides a **template designer** that is used to **personalize the gift cards** distributed to customers. Let’s see in detail how to personalize each section. ## Apple **Let’s take a look at the different sections of the Apple template designer.** ### General section The general section has two mandatory fields: * **Description**: a brief description of the gift card, that will appear on the back of the card * **Organization name**: the name of the company or brand issuing the pass It is also possible to put a text next to the logo, **activate the sharing of the gift card** so that customers can pass it on to other people, the “void feature” for the coupons, and a relevant and expiration date that are used for event tickets. The section also **defines the distance** from a relevant latitude and longitude at which the pass is relevant, for **geofencing notifications.**

Gift card - general section Apple — Confirm that Description and Organization name are both filled in before saving.

### Barcode Choose the **type of barcode** that is compatible with the point-of-sale software. The barcode value corresponds to the **identifiers** that allow the card to be identified by the terminal in the store. Finally, the alternate text can be used to display the barcode data in case the barcode cannot be scanned.

Gift card - barcode Apple — Check that the barcode type matches what the in-store scanner accepts.

### Colors & Images To change the background color of the card, simply **add the color code in the fields** provided for this purpose. To add an image, upload it from the device in use.

gift card - colors and images Apple — Check the contrast between the background color and the text once the logo is uploaded.

### Header Fields This section is particularly important in the Apple version, as the cards are **stacked on top of each other**. Only the header of the card remains visible. Therefore, it is important that this section catches the eye and encourages clicking on the card, especially by displaying the most important information such as the amount available.

gift card - header fields Apple — Check that the remaining balance is the value shown in the header field.

### Front fields The front fields are the fields that are used to **display information in the recto of the card**, under the strip image. The label is the same for every user (per language), but the value can be customized to display, for example, the expiry date of the card.

{% hint style="warning" %} **To personalize the front fields, ask the tech team which dynamic value to write.** {% endhint %} ### Backfields This section, located on the back of the gift card, includes several useful pieces of information for the customer: * The expiry date of the gift card * The amount * Receipts * Personalized messages * Links, such as the terms and conditions, etc.

gift card - backfields Apple — Check that the terms and conditions link is present among the back fields.

### Other sections On Apple, there are four other sections: * **Locations**: Used for geofencing notifications. * **Beacons**: Also used for geofencing notifications. * **Associated store identifier**: Used to link an application published on the Apple Store * **NFC**: A feature that allows customers to exchange digital content, and connect electronic devices with a touch. {% hint style="warning" %} **Please contact The Wallet Crew to activate these features** {% endhint %} {% hint style="danger" %} **Once the modifications are done, remember to click “save” at the top of the template designer!** {% endhint %} *** ## Google **The Google template designer is a bit different than the Apple one.** {% hint style="warning" %} **A few things worth knowing before configuring the Google template:** {% endhint %} 1. Some fields such as issuer and program name are **mandatory** 2. Google preconfigures fields based on their intended values, so keep the balance in the dedicated balance/value fields 3. Dynamic values (e.g., {{balance}}) should be **placed in dedicated dynamic fields**. ‘Label’ fields are intended for static text only. **Let’s take a look at the different sections.** ### General section The general section has three **mandatory fields**: * **Issuer**: the name of the brand or company that issues the pass * **Program name**: it appears on the front of the pass, and is typically the name of the gift card programme * **Card number**: the number of the gift card

gift card - general section Google — Check that Issuer, Program name and Card number are all completed.

gift card - barcode Google — Check that the barcode value and its alternate text match the card identifier.

### Security Configuring a template means deciding **whether the customer can share their pass or not**. Google offers three options: * **Multiple holders**: it means that the customer can share their pass with anyone * **One user all device**: a customer but with several devices (a watch for example) * **One user one device**

gift card - security Google — Check that the sharing option selected matches the gift card programme rules.

### Colors & Images To change the background color of the card, simply **add the color code in the fields** provided for this purpose. To add an image, upload it from the device in use.

gift card - colors and images Google — Check that the hero image and logo render correctly against the chosen background color.

### Balance and Pin This section takes the dynamic value for the amount of the gift card and the currency, as they are mandatory fields. A Pin label and Pin can also be configured if needed.

gift card - balance and pin Google — Check that the balance uses a dynamic value and that the currency is set.

### Additional links, Smart tap and Valid Time Interval **Additional links** can be added to the customer's gift card, for example a website link. The **Smart tap feature** can also be configured, so that customers simply **validate their gift card** by tapping their device on a compatible terminal. Finally, the Valid time interval section **defines when a gift card can be used.**

gift card - smart tap Google — Check the Smart tap setting and the start and end dates of the validity window.

### Messages This section, located on the back of the gift card, includes several useful pieces of information for the customer: * The expiry date of the gift card * The amount * Receipts * Personalized messages * Links, such as the terms and conditions, etc.

gift card - messages Google — Check that each message has a title and body, and that no placeholder text remains.

### Value added opportunities This section adds a **small section at the bottom of the gift card**. This is used to display offers, or news. ### Other sections On Google, there are three other sections: * **App links**: Used to add a link for an application * **Homepage**: Used to add the link of the event website * **Locations**: Used for geofencing notifications {% hint style="danger" %} **Once the modifications are done, remember to click “save” at the top of the template designer!** {% endhint %} ### Next steps * For design guidelines, start with [Card design](/configure/advanced-configuration/wallet/template-configuration/cards-design-colors-images-and-fields.md). * To distribute the pass, use [Add to Wallet on a website](/guides-enrolment/enrolment/on-your-website.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.thewalletcrew.io/guides-design/design/gift-card.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.