Các nguyên tắc sau đây cho biết cách đưa thương hiệu Google Pay vào trang web của bạn.
Nút thanh toán bằng Google Pay
Nút thanh toán Google Pay phải luôn gọi Google Pay API. Sau đó, Google Pay API sẽ gọi trang thanh toán nơi người dùng có thể chọn phương thức thanh toán.
Thành phần
Phương thức JavaScript createButton() sẽ chèn động các quy tắc CSS và một tệp SVG từ CDN của Google cho phần tử <button> HTML.
Khi sử dụng phương thức createButton()
, bạn sẽ nhận được:
- Tuân thủ thương hiệu: Tích hợp liền mạch nút thanh toán Google Pay tự động tuân thủ các nguyên tắc sử dụng thương hiệu mới nhất của Google Pay, đồng thời cung cấp các lựa chọn có thể tuỳ chỉnh để phù hợp với thiết kế giao diện người dùng của bạn mà không tốn nhiều công sức.
- Hình dạng có thể tuỳ chỉnh: Điều chỉnh độ bo tròn của góc nút để phù hợp với gu thẩm mỹ thiết kế hiện tại của bạn một cách liền mạch.
- Trải nghiệm phù hợp với ngôn ngữ địa phương: Chú thích của nút tự động dịch sang ngôn ngữ trình duyệt của người dùng, giúp tăng khả năng tiếp cận.
- Cá nhân hoá cho người dùng: Giúp người dùng khám phá các phương thức thanh toán có trong ví Google Pay của họ để quy trình thanh toán diễn ra nhanh hơn.
Nếu phương thức thuận tiện này hoặc các ngôn ngữ được hỗ trợ không phù hợp với nhu cầu của bạn, hãy liên hệ với chúng tôi.
Phong cách
Tất cả các nút thanh toán của Google Pay đều có 2 kiểu: tối và sáng. Bạn có thể xem ví dụ về cả hai kiểu trong phần Thành phần. Không được dịch tên thương hiệu Google Pay. Đừng tạo nút bằng văn bản đã bản địa hoá của riêng bạn.
| Loại nút | Tối | Sáng |
| book |  |
 |
| buy |  |
 |
| checkout |  |
 |
| quyên góp |  |
 |
| đặt hàng |  |
 |
| pay |  |
 |
| plain |  |
 |
| đăng ký |  |
 |
Sử dụng từ ngữ cho loại nút phù hợp nhất với trang thanh toán của bạn. |
Sử dụng các nút tối trên nền sáng để tạo độ tương phản. |
Sử dụng các nút sáng trên nền tối hoặc nhiều màu. |
Cá nhân hoá
Khi người dùng có một thẻ đủ điều kiện trong tài khoản Google Pay, các nút thanh toán "Mua", "Thanh toán" và "Đơn giản" sẽ hiển thị mạng lưới thẻ và 4 chữ số cuối của số thẻ. Mạng thẻ sẽ xuất hiện ở cùng vị trí với văn bản "Mua bằng" hoặc "Thanh toán bằng".
| Loại nút | Tối | Sáng |
| mua, thanh toán và đơn giản |  |
 |
Sử dụng loại nút mua, thanh toán hoặc nút đơn giản để bật chế độ cá nhân hoá. |
Sử dụng các nút tối trên nền sáng để tạo độ tương phản. |
Sử dụng các nút sáng trên nền tối hoặc nhiều màu. |
Nút tuỳ chỉnh
Hãy sử dụng công cụ sau để xem trước giao diện của từng nút:
Không gian trống
Luôn duy trì khoảng trống tối thiểu là 8 dp ở tất cả các mặt của nút thanh toán. Đảm bảo khoảng trống không bao giờ bị gián đoạn bởi đồ hoạ hoặc văn bản.
Ví dụ
| Nếu bạn đặt nút Google Pay bên cạnh một nút khác, hãy đảm bảo nút Google Pay có kích thước bằng với nút kia. | Luôn sử dụng nút Google Pay có màu tương phản với nền mà nút đó xuất hiện. |
| Khi điều chỉnh kích thước của nút Google Pay, hãy luôn giữ tỷ lệ nhất quán. |
Những việc nên làm và không nên làm
| Việc nên làm | Việc không nên làm |
|---|---|
|
|
Dấu hiệu Google Pay
Chỉ sử dụng dấu Google Pay được cung cấp trong các nguyên tắc này khi bạn cho thấy Google Pay là một lựa chọn trong quy trình thanh toán.
Thành phần
Nhấp vào nút sau để tải dấu hiệu Google Pay xuống ở định dạng tệp SVG:
Tải tài sản xuốngĐánh dấu
Sử dụng dấu hiệu Google Pay sau đây khi bạn cho thấy Google Pay là một phương thức thanh toán:
Hiển thị "Google Pay" bằng văn bản bên cạnh nhãn hiệu nếu bạn làm như vậy cho các thương hiệu khác. Không thay đổi màu sắc hoặc độ đậm của đường viền dấu, hoặc sửa đổi dấu theo bất kỳ cách nào. Chỉ sử dụng dấu hiệu do Google cung cấp.
Không gian trống
Luôn duy trì ít nhất một nửa (0,5 lần) chiều cao của chữ G viết hoa ở tất cả các mặt của dấu hiệu chấp nhận Google Pay. Đảm bảo khoảng trống này bằng với mọi nhận diện thương hiệu khác mà bạn hiển thị.
Kích thước
Điều chỉnh chiều cao cho phù hợp với các nhận diện thương hiệu khác xuất hiện trong quy trình thanh toán. Đừng làm cho dấu hiệu Google Pay nhỏ hơn các danh tính thương hiệu khác.
Những việc nên làm và không nên làm
| Việc nên làm | Việc không nên làm |
|---|---|
|
|
Google Pay bằng văn bản
Bạn có thể dùng văn bản để cho biết Google Pay là một lựa chọn thanh toán và để quảng bá Google Pay trong thông tin tiếp thị của mình.
- Viết hoa chữ "G" và "P"
- Luôn sử dụng chữ "G" viết hoa và chữ "P" viết hoa, theo sau là chữ cái viết thường. Không viết hoa toàn bộ tên "GOOGLE PAY" trừ phi bạn muốn tên này khớp với kiểu chữ trên trang web của mình. Không bao giờ sử dụng "GOOGLE PAY" viết hoa trong thông tin tiếp thị.
- Không viết tắt Google Pay
- Luôn viết đầy đủ các từ "Google" và "Pay".
- Phù hợp với kiểu trên trang web của bạn
- Đặt "Google Pay" ở cùng một phông chữ và kiểu chữ với phần còn lại của văn bản trên trang web của bạn. Không bắt chước kiểu chữ của Google.
- Không dịch Google Pay
- Luôn viết "Google Pay" bằng tiếng Anh. Không dịch sang ngôn ngữ khác.
- Sử dụng biểu tượng thương hiệu vào lần đầu tiên "Google Pay" xuất hiện trong thông tin tiếp thị
- Khi bạn sử dụng "Google Pay" trong thông tin liên lạc tiếp thị, hãy cho biết biểu tượng thương hiệu (™) vào lần đầu tiên hoặc lần nổi bật nhất mà biểu tượng này xuất hiện. Đừng sử dụng biểu tượng nhãn hiệu khi bạn liệt kê Google Pay là một phương thức thanh toán trên trang web của mình.
| Nếu bạn không hiển thị bản sắc thương hiệu cho các lựa chọn thanh toán khác, hãy trình bày "Google Pay" bằng văn bản. | Đặt "Google Pay" ở cùng một phông chữ và kiểu chữ với phần còn lại của văn bản trên trang web của bạn. |
Các phương pháp hay nhất về Google Pay
Tối đa hoá lượt chuyển đổi bằng quy trình thanh toán và trang thanh toán giúp khách hàng nhanh chóng và dễ dàng xem lại thông tin thanh toán cũng như xác nhận giao dịch mua.
Dưới đây là các phương pháp hay nhất:
- Đặt Google Pay làm phương thức thanh toán chính.
- Hiển thị nút Google Pay một cách nổi bật ở bất cứ nơi nào có thể. Bạn cũng có thể đặt phương thức này làm phương thức mặc định hoặc phương thức thanh toán duy nhất.
- Cho phép khách hàng mua hàng mà không cần tài khoản
- Việc tạo tài khoản làm chậm quá trình thanh toán và có thể dẫn đến việc khách hàng bỏ ngang giỏ hàng. Sử dụng Google Pay để cho phép khách thanh toán nhanh hơn. Nếu bạn muốn khách hàng tạo tài khoản, hãy cho phép họ làm như vậy sau khi hoàn tất giao dịch mua.
- Sử dụng Google Pay để bắt đầu thanh toán trong quá trình thanh toán giỏ hàng
- Nút Google Pay sẽ hiển thị trang thanh toán. Trên trang thanh toán, khách hàng chỉ có thể chọn và xác nhận một phương thức thanh toán và địa chỉ giao hàng duy nhất. Hãy nhớ thu thập tất cả thông tin khác mà bạn cần trước khi cho phép khách hàng chọn nút Google Pay.
Các thông tin khác có thể bao gồm:
- "Network •••• 1234 with Google Pay" (Mạng •••• 1234 bằng Google Pay)
- "Mạng •••• 1234 (Google Pay)"
- "Google Pay (Mạng •••• 1234)"
- "Paypal abc...d@gmail.com with Google Pay" (Paypal abc...d@gmail.com qua Google Pay)
- "Phương thức thanh toán: Google Pay"
- "Thanh toán bằng Google Pay"
Kết hợp kiến thức đã học
Hình ảnh sau đây minh hoạ một quy trình tích hợp hoàn tất. Quy trình tích hợp này cũng bao gồm bước Chọn mặt hàng/Trước khi mua, bước Giao dịch, bước Bộ chọn Google Pay và bước Sau khi mua.
Yêu cầu phê duyệt
Sau khi tích hợp Google Pay API, để có được quyền truy cập vào kênh phát hành công khai, bạn cần phải được phê duyệt cho tất cả những nơi bạn hiển thị hoặc tham chiếu Google Pay.
Hoàn tất Danh sách kiểm tra tích hợp của chúng tôi để gửi yêu cầu xem xét hoạt động tích hợp web. Bạn sẽ nhận được thông báo phê duyệt hoặc ý kiến phản hồi trong vòng 1 ngày làm việc.