Ketika Google Pay pertama kali muncul di Rusia, saya memulai akun, menambahkan kartu di sana dan menyadari bahwa saya tidak bisa berbuat apa-apa lagi. Tidak ada NFC di ponsel saya, tidak ada yang harus dibayar di Internet - yah, oke, itu tidak mengganggu saya. Pada akhirnya, selalu mungkin untuk mendorong angka dari kartu dengan tangan Anda atau menariknya dari penyimpanan kata sandi browser.
Kemudian saya menyaksikan betapa berbedanya orang-orang yang berbaris di depan saya dengan smartphone; kemudian saya melihat iklan dan diskon untuk menggunakan Google Pay di mana-mana, tetapi masih tidak bisa memanfaatkannya - saya masih menggunakan telepon tanpa NFC.
Dan sekarang sudah tiba. Sekarang saya dapat membayar melalui Google Pay dari perangkat apa pun di situs yang terhubung ke Yandex.Cash (dan jumlahnya cukup banyak). Saya akan memberi tahu Anda bagaimana itu terjadi dan masalah teknis apa yang harus dipecahkan oleh pengembang kami; ada banyak hal menarik di bagian depan dan belakang.
Cukup tambahkan API
"Pengembang kawan, apa yang begitu sulit?"
- Ya, kami baru saja menambahkan perpustakaan dari Google di dermaga mereka.
Ini adalah menit pertama percakapan saya tentang menambahkan Google Pay dengan pengembang kasir (termasuk 55 detik keheningan yang canggung). Tetapi kemudian saya tidak terkejut, dan kami menemukan beberapa hal menarik.
Google Pay mengubah proses pembayaran kartu
Sekarang melalui Kasir Anda dapat membayar dengan kartu kredit apa pun, bahkan di luar negeri. Seperti halnya pembayaran kartu online, itu tidak selalu nyaman - kadang-kadang Anda harus pergi ke dompet Anda, mengarahkan nomor dalam gelap dan memeriksa bahwa tidak ada yang kacau di mana saja. Untuk membuat hidup lebih mudah, Anda dapat masuk ke Yandex dan membayar dengan kartu yang terikat.
Kami menerapkan skema di mana pembayaran kartu melalui Kasir menjadi satu dan didokumentasikan dengan baik. Jika Anda menghapus semua seluk-beluk nuansa perutean dan keamanan, maka skema tersebut terlihat seperti ini:
- Pengguna memilih barang, memesan dan beralih ke formulir pembayaran Yandex.Cash. Di sana Anda dapat memasukkan detail kartu apa pun atau masuk ke Yandex untuk melihat juga kartu yang ditautkan.
- Data pada metode pembayaran yang dipilih dikirim ke backend untuk tokenization. Browser menerima token kartu dan mencoba menggunakannya untuk pembayaran.
- Jika semuanya beres, backend meminta bank untuk memblokir jumlah pada kartu, melakukan pembayaran dan mengembalikan statusnya. Berdasarkan hal ini, browser mengalihkan ke halaman sukses atau menampilkan pesan kesalahan.
Pada tahap yang berbeda, ada kondisi yang berbeda untuk menghentikan proses - token yang tidak valid, mengosongkan akun atau mematikan Internet - tetapi logikanya tetap sama. Dan dalam hal ini, Anda dapat sepenuhnya merender halaman di server, tetapi saya akan membahas kesulitan dengan ini di bawah.
Untuk Google Pay, Anda memerlukan beberapa langkah perantara.
Pertama, antara memilih metode pembayaran dan tokenization ada panggilan ke Google API - ini diperlukan untuk memeriksa apakah perangkat mendukung pembayaran melalui Google Pay. Setelah mengklik tombol "Bayar", antarmuka web Google Pay muncul, di mana pengguna login, memilih salah satu kartu yang ditambahkan atau memasukkan rincian kartu baru.
Kedua, ada lingkaran keamanan lain dari Google. Browser tidak menerima detail secara langsung - browser menerima kriptogram, yang, pada gilirannya, pergi ke backend untuk tokenization. Itu didekripsi dengan kunci dari Google, dan kemudian lihat langkah 3.
Secara alami, setiap langkah tambahan (bahkan secara ketat mengikuti dokumentasi) adalah pengembangan tambahan dan waktu pengujian. Semakin menyenangkan bahwa pedagang tidak perlu melakukan apa pun secara praktis - mudah menghubungkan pembayaran melalui Google Pay ke situs mana pun yang memiliki formulir pembayaran Yandex.Cash. Detail ada di situs web Kasir .
Sebuah cerita menarik juga ditemukan di frontend - ini adalah tentang pencarian kreatif, bukti dan UX.
Tombol Google Pay pada halaman pembayaran
Halaman pembayaran Cashier sepenuhnya dirakit di server - ia menerima data dari backend, menjalankannya melalui mesin templat dan memberikan kode HTML, CSS, dan JavaScript yang siap digunakan kepada browser. Jadi halaman diambil lebih cepat - ketika semua data siap, dan semua konten dinamis bekerja melalui JS pada klien.
Kesulitannya adalah hanya mungkin untuk menentukan apakah Akun Google klien telah menambahkan sarana pembayaran melalui perpustakaan klien Google. Oleh karena itu, logika yang menarik bagian dari halaman dengan tombol pembayaran harus diterapkan pada klien. Solusi teknis ditemukan setelah pencarian singkat.
Di backend, Anda perlu memeriksa apakah toko telah mengaktifkan pembayaran melalui Google Pay - jika demikian, maka di mesin templat kami menambahkan tautan CDN ke pustaka Google Pay ke halaman dan memberi peramban tanda bahwa Anda perlu mengunduh data menggunakan metode pembayaran ini.
Pada klien, Anda perlu memeriksa apakah ada tanda yang diperlukan - dan jika demikian, panggil metode verifikasi apakah pembayaran melalui Google Pay didukung pada perangkat ini. Jika semuanya baik-baik saja, maka kami menunjukkan kepada pengguna tombol lain. Akibatnya, halaman tersebut masih ditampilkan di server, tetapi sekarang kami membuat beberapa permintaan tambahan ke layanan lain.
Ternyata layanan ini terkadang tidak merespons.
Sebulan penuh, tidak ada istirahat!
Kisah ini adalah tentang departemen UX kami - bagaimana mereka mencari cara untuk menggambar tombol Google Pay, tetapi pada saat yang sama tidak mengganggu pengguna yang berinteraksi dengan formulir.
Pikiran pertama adalah untuk menggantung twist di seluruh halaman dan menunggu jawaban dari Google.
Tetapi jika Anda menunggu respons dari Google, maka tidak ada gunanya rendering server (pengguna masih tidak dapat berinteraksi dengan halaman sampai kami mendapatkan data pada klien), dan kami mulai bergantung pada layanan pihak ketiga. Jika ada masalah dengan Internet, Google diblokir atau tidak dapat diakses, maka pengguna tidak akan dapat menggunakan halaman, meskipun tidak ada yang mencegahnya dari memasukkan nomor kartu.
Desainer membuat beberapa opsi lagi, tetapi karena berbagai alasan mereka tidak cocok, dan persyaratan untuk tata letak secara bertahap berubah.
Waktu pendekatan
Pendekatan dua
Akibatnya, ada tiga persyaratan utama:
- Pengguna harus dapat membayar terlepas dari apakah layanan pihak ketiga akan merespons dan berapa lama dia akan melakukannya. Layanan seharusnya tidak menjadi lebih lambat.
- Perlu skalabilitas. Ketika pembayaran dari Apple atau Samsung ditambahkan, ini seharusnya tidak mempengaruhi kecepatan dan kemampuan untuk bekerja dengan bidang input kartu bank.
- Solusinya seharusnya tidak memiliki terlalu banyak animasi / dinamika. Jika pengguna mulai memasukkan data, dan saat ini tombol Google Pay memuat dan sesuatu berubah, pengguna mungkin tidak mengerti apa yang terjadi dan mengapa.
Berdasarkan mereka, desain akhir dari bentuk pembayaran muncul. Dia diatur oleh semua kriteria - scalable, tidak memblokir input kartu bank, dan ketika menerima data kartu bank tidak ada animasi yang tidak perlu.
Bagaimana dengan smartphone tanpa NFC?
Untuk pembayaran melalui Google Pay di toko offline, NFC masih diperlukan, tidak ada opsi.
NFC tidak diperlukan secara online. Semua browser desktop berfungsi baik dengan Google Pay. Ada beberapa nuansa dengan ponsel cerdas - Google memiliki beberapa persyaratan untuk perangkat dengan Google Pay. Berikut adalah daftar yang tidak diizinkan:
- Gunakan telepon dengan Android 4.4.3 atau yang lebih lama;
- Instal versi Android untuk pengembang;
- Lakukan root, buka kunci bootloader atau instal firmware tidak resmi;
- Gunakan Samsung MyKnox;
- Gunakan perangkat Google yang tidak diverifikasi.
Dalam kasus lain, pembayaran melalui Google Pay di Internet akan berfungsi dengan baik - tetapi, mungkin, tidak ada yang tahu tentang semua pengecualian.
Kesimpulan bisnis yang keras jika Anda sudah menggunakan Yandex.Cash
Untuk mengaktifkan penerimaan pembayaran melalui Google Pay, tulis ke manajer di akun Anda. Setelah beberapa saat, tombol akan muncul dengan sendirinya, dan Anda dapat menghabiskan waktu pengembang untuk hal lain.
Konversi akan meningkat - menurut sebuah studi oleh Mediascope, 36,3% pengguna membayar non-kontak. Penelitian Yandex.Money sendiri menunjukkan bahwa 43% pemegang kartu menggunakannya untuk pembayaran tanpa kontak. Selain itu, ada beberapa orang dengan Android di antara pengguna Android - mereka tidak perlu memasukkan kode 3-D Secure.
Kesimpulan bisnis yang keras, jika Anda belum menggunakan Yandex.Cash
Terhubung dengan cepat , mengapa menarik sesuatu?
Kisah-kisah lain tentang apa yang baik di Kassa
Sepuluh orang di 90 ribu situs: bagaimana tidak menjadi gila
Saya lelah menerima pembayaran melalui WebView. Apa yang harus saya lakukan
Bagaimana kami melindungi ulasan, pembelian, dan perjalanan dari penipu