> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xanhcard.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Thiết kế cho Google Wallet

> Cấu hình giao diện thẻ Google Wallet: chọn loại thẻ, màu sắc, hình ảnh, trường thông tin và liên kết để tạo thẻ phù hợp với thương hiệu doanh nghiệp.

## Tab Google Wallet

Trong trình chỉnh sửa mẫu thẻ, tab **Google Wallet** cho phép bạn thiết kế giao diện thẻ hiển thị trên điện thoại Android.

<img src="https://mintcdn.com/xanhcard/oMUUuAnumaWwVH74/images/templates/07-google-wallet-fields.png?fit=max&auto=format&n=oMUUuAnumaWwVH74&q=85&s=1d36b7dd1c9eb25a75e497aa298897fd" alt="Tab Google Wallet - Fields" width="2798" height="2157" data-path="images/templates/07-google-wallet-fields.png" />

Tab Google Wallet có 2 tab con: **Fields** và **Images**.

## Tab Fields

Tab **Fields** cho phép bạn ánh xạ dữ liệu từ mô hình dữ liệu hiển thị trên thẻ Google Wallet.

### Title Field

Trường tiêu đề hiển thị ở đầu thẻ.

* **Value**: Giá trị hiển thị (có thể dùng biến dữ liệu)

### Sub Header Field

Trường phụ đề hiển thị ngay dưới tiêu đề.

* **Value**: Giá trị hiển thị (có thể dùng biến dữ liệu)

### Header Field

Trường header hiển thị nổi bật trên thẻ.

* **Value**: Giá trị hiển thị (có thể dùng biến dữ liệu)

### Rows

Các hàng dữ liệu hiển thị thông tin chi tiết trên thẻ. Mỗi hàng gồm:

* **Label**: Nhãn trường
* **Value**: Giá trị (có thể dùng biến dữ liệu)
* **Extend**: Chọn vị trí hiển thị (Extend 1 đến Extend 5)

Bạn có thể thêm, xóa hoặc sắp xếp lại các hàng bằng các nút điều khiển bên cạnh mỗi hàng.

## Tab Images

Tab **Images** cho phép bạn cấu hình hình ảnh cho thẻ Google Wallet.

<img src="https://mintcdn.com/xanhcard/oMUUuAnumaWwVH74/images/templates/08-google-wallet-images.png?fit=max&auto=format&n=oMUUuAnumaWwVH74&q=85&s=604c7257c4757c9aebdd8869af342ce7" alt="Tab Google Wallet - Images" width="2804" height="1960" data-path="images/templates/08-google-wallet-images.png" />

### Logo

* **Hide**: Ẩn logo
* **Image URL**: URL ảnh logo

### Wide Logo

* **Hide**: Ẩn logo ngang
* **Image URL**: URL ảnh logo ngang

### Hero

* **Hide**: Ẩn ảnh hero (mặc định được ẩn)
* **Image URL**: URL ảnh hero

### Extends

Các ảnh mở rộng hiển thị thêm trên thẻ:

* **Image URL 1** đến **Image URL 5**: URL ảnh mở rộng

<Tip>
  Đảm bảo ảnh của bạn có URL công khai và định dạng được hỗ trợ (PNG, JPG). Kích thước đề xuất:

  * Logo: 660×660 px
  * Wide Logo: 600×200 px
  * Hero: 1032×336 px
</Tip>

<Tip>
  Google Wallet có các yêu cầu thiết kế riêng. Xem [Google Wallet Guidelines](https://developers.google.com/wallet) để biết thêm chi tiết.
</Tip>

## Ngôn ngữ

Bạn có thể chuyển đổi ngôn ngữ hiển thị trong tab Google Wallet bằng cách nhấn vào nút ngôn ngữ (Default, English, Vietnamese, v.v.) phía trên bản xem trước thẻ.

## Ánh xạ dữ liệu

Dữ liệu từ mô hình dữ liệu của dự án được ánh xạ vào các trường của Google Wallet thông qua cú pháp biến:

```
{{$data.fieldName}}
```

Ví dụ:

* `{{$data.firstName}} {{$data.lastName}}` — hiển thị họ tên
* `{{$data.mainEmail}}` — hiển thị email
* `{{$data.mainPhone}}` — hiển thị số điện thoại