Panduan berikut menunjukkan cara menyertakan merek Google Pay dalam situs Anda.
Tombol pembayaran Google Pay
Tombol pembayaran Google Pay harus selalu memanggil Google Pay API. Google Pay API kemudian memanggil lembar pembayaran tempat pengguna dapat memilih metode pembayaran mereka.
Aset
Metode JavaScript createButton()
secara dinamis menyisipkan aturan CSS dan file SVG dari CDN Google untuk elemen
HTML <button>.
Saat menggunakan metode createButton()
, Anda akan mendapatkan:
- Kepatuhan Merek: Integrasikan tombol pembayaran Google Pay dengan lancar yang secara otomatis mematuhi pedoman branding Google Pay terbaru sekaligus menawarkan opsi yang dapat disesuaikan agar sesuai dengan desain UI Anda dengan sedikit upaya.
- Bentuk yang Dapat Disesuaikan: Sesuaikan kebulatan sudut tombol agar sesuai dengan estetika desain yang ada.
- Pengalaman yang Dilokalkan: Teks tombol otomatis diterjemahkan ke bahasa browser pengguna, sehingga meningkatkan aksesibilitas.
- Dipersonalisasi untuk Pengguna: Membantu pengguna menemukan metode pembayaran yang tersedia di dompet Google Pay mereka untuk proses checkout yang lebih cepat.
Jika metode praktis ini atau bahasa yang didukung tidak sesuai dengan kebutuhan Anda, hubungi kami.
Gaya
Semua tombol pembayaran Google Pay tersedia dalam dua gaya: gelap dan terang. Anda dapat melihat contoh kedua gaya di bagian Aset. Nama merek Google Pay tidak boleh diterjemahkan. Jangan membuat tombol dengan teks yang dilokalkan sendiri.
| Jenis Tombol | Gelap | Cahaya |
| buku |  |
 |
| buy |  |
 |
| checkout |  |
 |
| berdonasi |  |
 |
| pesanan |  |
 |
| pay |  |
 |
| polos |  |
 |
| subscribe |  |
 |
Gunakan kata-kata jenis tombol yang paling sesuai dengan halaman checkout Anda. |
Gunakan tombol gelap pada latar belakang terang untuk memberikan kontras. |
Gunakan tombol terang dengan latar belakang gelap atau berwarna. |
Personalisasi
Jika pengguna memiliki kartu yang memenuhi syarat di akun Google Pay mereka, tombol pembayaran "Beli", "Bayar", dan "Polos" akan menampilkan jaringan kartu dan empat digit terakhir nomor kartu. Jaringan kartu akan ditampilkan di posisi yang sama dengan teks "Beli dengan" atau "Bayar dengan".
| Jenis Tombol | Gelap | Cahaya |
| beli, bayar, dan mudah |  |
 |
Gunakan jenis tombol beli, bayar, atau polos untuk mengaktifkan personalisasi. |
Gunakan tombol gelap pada latar belakang terang untuk memberikan kontras. |
Gunakan tombol terang dengan latar belakang gelap atau berwarna. |
Tombol kustom
Gunakan alat berikut untuk melihat pratinjau tampilan setiap tombol:
Mengosongkan ruang penyimpanan
Selalu pertahankan ruang kosong minimum 8 dp di semua sisi tombol pembayaran. Pastikan ruang kosong tidak pernah terganggu oleh grafis atau teks.
Contoh
| Jika Anda menempatkan tombol Google Pay di samping tombol lain, pastikan ukuran tombol Google Pay sama dengan tombol lainnya. | Selalu gunakan tombol Google Pay yang kontras dengan latar belakang tempat tombol tersebut muncul. |
| Saat menyesuaikan ukuran tombol Google Pay, selalu jaga proporsinya agar tetap konsisten. |
Anjuran dan Larangan
| Anjuran | Larangan |
|---|---|
|
|
Tanda Google Pay
Gunakan hanya tanda Google Pay yang disediakan dalam panduan ini saat Anda menampilkan Google Pay sebagai opsi dalam alur pembayaran.
Aset
Klik tombol berikut untuk mendownload tanda Google Pay dalam format file SVG:
Mendownload asetTandai
Gunakan tanda Google Pay berikut saat Anda menampilkan Google Pay sebagai opsi pembayaran:
Tampilkan "Google Pay" dalam teks di samping tanda jika Anda melakukannya untuk merek lain. Jangan mengubah warna atau ketebalan garis luar merek, atau mengubah merek dengan cara apa pun. Hanya gunakan tanda yang disediakan oleh Google.
Mengosongkan ruang penyimpanan
Selalu pertahankan setidaknya setengah (0,5x) tinggi huruf kapital G di semua sisi tanda persetujuan Google Pay. Pastikan ruang kosong sama dengan identitas merek lain yang Anda tampilkan.
Ukuran
Sesuaikan tinggi agar sesuai dengan identitas merek lain yang ditampilkan dalam alur pembayaran Anda. Jangan membuat tanda Google Pay lebih kecil daripada identitas merek lainnya.
Anjuran dan Larangan
| Anjuran | Larangan |
|---|---|
|
|
Google Pay dalam teks
Anda dapat menggunakan teks untuk menunjukkan Google Pay sebagai opsi pembayaran, dan untuk mempromosikan Google Pay dalam komunikasi pemasaran Anda.
- Gunakan huruf kapital untuk huruf "G" dan "P"
- Selalu gunakan "G" huruf besar dan "P" huruf besar yang diikuti dengan huruf kecil. Jangan menggunakan huruf kapital untuk nama lengkap "GOOGLE PAY", kecuali jika untuk menyesuaikan gaya tipografi di situs Anda. Jangan pernah menggunakan "GOOGLE PAY" huruf besar dalam komunikasi pemasaran Anda.
- Jangan menyingkat Google Pay
- Selalu tulis kata "Google" dan "Pay".
- Sesuaikan gaya di situs Anda
- Tetapkan "Google Pay" dalam font dan gaya tipografi yang sama dengan teks lainnya di situs Anda. Jangan meniru gaya tipografi Google.
- Jangan terjemahkan Google Pay
- Selalu tulis "Google Pay" dalam bahasa Inggris. Jangan terjemahkan ke bahasa lain.
- Gunakan simbol merek dagang saat "Google Pay" pertama kali muncul dalam komunikasi pemasaran
- Saat Anda menggunakan "Google Pay" dalam komunikasi pemasaran, tunjukkan simbol merek dagang, ™, pada kemunculan pertama atau yang paling menonjol. Jangan gunakan simbol merek dagang saat Anda mencantumkan Google Pay sebagai opsi pembayaran di situs Anda.
| Jika Anda tidak menampilkan identitas merek untuk opsi pembayaran lainnya, maka tampilkan "Google Pay" dengan teks. | Tetapkan “Google Pay” dalam font dan gaya tipografi yang sama dengan teks lainnya di situs Anda. |
Praktik terbaik Google Pay
Maksimalkan konversi Anda dengan alur checkout dan lembar pembayaran yang memungkinkan pelanggan meninjau informasi pembayaran mereka dengan cepat dan mudah, serta mengonfirmasi pembelian mereka.
Berikut adalah praktik terbaiknya:
- Jadikan Google Pay sebagai opsi pembayaran utama.
- Jika memungkinkan, tampilkan tombol Google Pay dengan jelas. Anda juga dapat menjadikannya opsi default, atau satu-satunya opsi pembayaran.
- Izinkan pelanggan melakukan pembelian tanpa akun
- Pembuatan akun memperlambat proses checkout dan dapat menyebabkan keranjang ditinggalkan. Gunakan Google Pay untuk mengaktifkan checkout tamu yang lebih cepat. Jika Anda ingin pelanggan membuat akun, izinkan mereka melakukannya setelah menyelesaikan pembelian.
- Menggunakan Google Pay untuk memulai pembayaran selama checkout keranjang
- Tombol Google Pay akan memunculkan halaman pembayaran. Di halaman pembayaran, pelanggan hanya dapat memilih dan mengonfirmasi satu metode pembayaran dan alamat pengiriman. Pastikan untuk mendapatkan semua informasi lain yang Anda butuhkan sebelum memberi pelanggan opsi untuk memilih tombol Google Pay. Informasi lainnya dapat mencakup hal berikut:
- Ukuran, warna, atau jumlah item.
- Opsi untuk menambahkan pesan hadiah atau menerapkan kode promo.
- Kemampuan untuk memilih kecepatan dan tujuan pengiriman yang berbeda untuk setiap item.
- Jika pelanggan tidak memberikan informasi yang diperlukan, berikan masukan real-time untuk memberi tahu mereka informasi yang Anda butuhkan sebelum mereka dapat membuka halaman pembayaran.
- Tambahkan tombol Google Pay ke halaman detail produk selain checkout keranjang
- Anda dapat mempercepat checkout item tunggal jika Anda mengizinkan pelanggan melakukan pembelian item tunggal langsung dari halaman detail produk. Jika pelanggan memilih opsi ini, pastikan untuk mengecualikan item lain yang ada di keranjang belanjanya karena halaman pembayaran hanya memungkinkan mereka mengonfirmasi informasi pembayaran dan pengiriman.
- Menyertakan Google Pay di halaman konfirmasi dan tanda terima
- Saat Anda menampilkan informasi pembayaran di halaman konfirmasi dan tanda terima email, pastikan Anda menunjukkan bahwa pelanggan telah membayar dengan Google Pay, dan Anda menampilkan Google Pay dengan cara yang sama seperti metode pembayaran lainnya.
- Jangan pernah menampilkan nomor rekening lengkap, tanggal habis masa berlaku, atau detail metode pembayaran lainnya kepada pengguna. Selalu gunakan teks deskriptif yang ditampilkan oleh Google Pay API untuk mengidentifikasi metode pembayaran.
- Berikut adalah contoh teks deskriptif yang dapat diterima:
- "Network •••• 1234 dengan Google Pay"
- "Network •••• 1234 (Google Pay)"
- "Google Pay (Jaringan •••• 1234)"
- "Paypal abc...d@gmail.com dengan Google Pay"
- "Metode pembayaran: Google Pay"
- "Dibayar dengan Google Pay"
Menyatukan semuanya
Gambar berikut mengilustrasikan integrasi yang telah selesai. Integrasi ini juga mencakup langkah Pemilihan item/Pra-pembelian, langkah Transaksi, langkah Pemilih Google Pay, dan langkah Pasca-pembelian.
Mendapatkan persetujuan
Setelah mengintegrasikan Google Pay API, untuk mendapatkan akses produksi, Anda harus mendapatkan persetujuan untuk semua tempat yang menampilkan atau merujuk Google Pay.
Selesaikan Daftar periksa integrasi kami untuk mengirimkan integrasi web Anda untuk ditinjau. Anda akan menerima persetujuan atau masukan dalam waktu satu hari kerja.