Memperkenalkan Pembayaran Web: Pembelian Online Lebih Mudah Dengan API Permintaan Pembayaran

Membeli barang secara online bisa menjadi proses yang membuat frustrasi, terutama di ponsel. Meskipun halaman didesain dengan baik, ada banyak informasi yang diperlukan: Informasi kontak, alamat pengiriman dan penagihan, opsi pengiriman, dan detail kartu kami. Jika Anda pernah menyerah kadang-kadang, Anda berada di mayoritas.

The Baymard Institute mengambil rata-rata 37 studi yang berbeda dan menemukan bahwa 69% dari keranjang belanja ditinggalkan.

Tidak mengherankan, angkanya lebih buruk di ponsel, di mana layar yang lebih kecil dan kurangnya keyboard fisik dapat membuat input lebih lambat. Tingkat pengabaian di ponsel bisa mencapai 84% atau lebih! Dengan naik turunnya penjelajahan seluler selama beberapa tahun terakhir, ini berarti masalah keseluruhan semakin buruk. Untuk situs e-commerce, gerobak yang ditinggalkan ini menghabiskan banyak uang. Business Insider memperkirakan barang dagangan senilai $4 triliun akan ditinggalkan dalam satu tahun.

Untungnya, web melawan masalah ini. Kelompok Kerja W3C “Pembayaran Web” telah sibuk mengerjakan “revolusi pembayaran di web” , mengembangkan standar baru untuk membantu mempermudah pembayaran online. Selain menjadi nama Kelompok Kerja, “Pembayaran Web” pada dasarnya adalah istilah umum yang mencakup standar baru yang akan datang ini.

API Permintaan Pembayaran

Standar pertama, API Permintaan Pembayaran , merupakan langkah maju yang besar. Ini memberi kami kemampuan untuk meminta pembayaran dari pengguna dan browser menyediakan antarmuka pengguna untuk menerimanya. Ini sudah didukung di Chrome, Edge dan Samsung Internet, dan sedang dikembangkan di Firefox dan Safari. Banyak perusahaan terkenal yang mengadopsi API, termasuk New York Times, Washington Post, dan Monzo.

Meminta informasi ini dari browser memberikan manfaat besar dan langsung karena mungkin detail ini sudah tersimpan . Selama kami telah memasukkan detail kami di satu situs web lain yang menggunakan API dan mengizinkan browser kami untuk mengingatnya, browser akan dapat mengisi formulir terlebih dahulu, memungkinkan kami untuk check out lebih cepat.

Ini lebih baik daripada isi otomatis standar; mengizinkan browser untuk menangani bidang input berarti itu bisa benar-benar akurat — menghindari masalah apa pun dengan mengisi informasi yang salah di bidang yang salah. Ini juga berarti kami memiliki formulir checkout satu halaman yang dioptimalkan untuk seluler, tanpa harus menulis HTML dan CSS kami sendiri untuk itu.

Manfaatnya mungkin lebih terasa di seluler, tetapi API Permintaan Pembayaran tidak terbatas pada peramban seluler. Ini sudah didukung di versi desktop Chrome, Edge dan Samsung Internet untuk DeX. Kami juga dapat mengharapkan dukungan untuk tiba di Firefox desktop dan Safari nanti juga (pada saat penulisan, baru-baru ini telah diaktifkan secara default di Pratinjau Teknologi Safari 44).

Permintaan Pembayaran Pertama Kami

Mari mulai menjelajahi API dengan contoh dasar. Kami akan meminta pembayaran kartu dari pengguna dan mengizinkan mereka untuk check out seperti ini:

Dalam video di atas, Anda akan melihat bahwa pengguna mengonfirmasi pembayaran dengan sidik jari mereka. Ini bukan bagian dari standar Permintaan Pembayaran itu sendiri, tetapi fitur keamanan yang disediakan oleh browser Internet Samsung (bersama dengan pemindaian iris mata) pada perangkat yang didukung.

Jika Anda tertarik pada potensi lebih lanjut untuk mengintegrasikan otentikasi biometrik di web, Anda mungkin ingin mengawasi standar Otentikasi Web yang akan datang.

Pertama, seperti biasa kita harus mengadopsi Progressive Enhancement dan memeriksa apakah browser ini memiliki dukungan untuk API:

 if (window.PaymentRequest) { // We can continue with the Payment Request API } else { // Here we could fall back to a legacy checkout form }

Sekarang kami dapat mengatur konfigurasi untuk PaymentRequest kami — jenis pembayaran yang akan kami terima dan detail untuk ditampilkan tentang pembelian:

 var methodData = [{ // 'basic-card' means standard card payments - credit and debit cards supportedMethods: 'basic-card' }]; var details = { // If we are buying multiple items, each one can be included displayItems: [ { label: 'Some product that we are buying', amount: {currency: 'USD', value: '699.99'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '699.99'} } }; var paymentRequest = new PaymentRequest(methodData, details);

Ketika kita ingin menampilkan UI pembayaran (misalnya ketika pengguna mengklik “Beli Sekarang”), kita dapat memanggil show() . Kemudian kami menangani data yang diberikan pengguna saat janji diselesaikan:

 // show() makes it actually display the user interface paymentRequest.show() .then(function(paymentResponse) { // User has confirmed. paymentResponse contains the data entered. // Here we would process it server-side... processPaymentDetails(paymentResponse) .then(function(paymentResponse) { // ...Then when processed successfully, this will make the dialog indicate success & then close: paymentResponse.complete('success'); // We could also update the page here appropriately }); }) .catch(function(error) { // Handle error, eg if user clicks the 'cancel' button. });

Kami sekarang memiliki aliran UI yang diatur di ujung depan. Kami juga dapat mengonfigurasinya lebih lanjut, agar sesuai dengan kebutuhan kami. Misalnya, jika kami ingin meminta detail tambahan dari pelanggan, kami dapat meneruskan options tambahan ke konstruktor PaymentRequest. Misalnya, untuk meminta nama pengguna, alamat email, nomor telepon, dan alamat pengiriman:

 var options = { requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true, requestShipping: true }; var paymentRequest = new PaymentRequest(methodData, details, options);

Kami juga dapat menentukan beberapa opsi pengiriman dan bahkan mengontrol opsi mana yang disajikan secara dinamis, berdasarkan alamat pelanggan. Anda dapat menemukan contohnya di sini di Glitch.

Pengalaman pengguna

Kami mulai melihat beberapa statistik yang mengesankan untuk manfaat yang dapat diberikan oleh Permintaan Pembayaran kepada perusahaan. Google baru-baru ini membagikan bahwa J.Crew, sebuah merek fesyen, telah menemukan bahwa 50% pengguna mereka sekarang melalui alur Permintaan Pembayaran dan ini memangkas waktu transaksi mereka hingga 75%!

Terserah Anda bagaimana mengintegrasikan Permintaan Pembayaran ke dalam pengalaman belanja Anda, tetapi cara yang umum adalah dengan menawarkan sesuatu seperti opsi “Checkout Ekspres” atau “Beli Sekarang”, tanpa mengharuskan pelanggan untuk masuk terlebih dahulu. Jika mau, Anda dapat mengumpulkan detail kontak pengguna menggunakan UI Permintaan Pembayaran dan setelah mereka melakukan pembelian, tawarkan kesempatan untuk membuat akun, untuk penggunaan di masa mendatang.

Jika mau, Anda dapat memeriksa terlebih dahulu apakah pelanggan sudah menyiapkan metode pembayaran yang valid, sebelum menampilkan UI Permintaan Pembayaran. Untuk melakukan ini, Anda dapat menghubungi canMakePayment :

 if (paymentRequest.canMakePayment) { paymentRequest.canMakePayment().then(function(result) { if (result) { // User has an active payment method } else { // No active payment method yet (but they could add one) } }).catch(function(error) { // Unable to determine }); }

Integrasi Back-End

Kami telah melihat cara mengatur antarmuka pengguna untuk menerima pembayaran, tetapi bagaimana kami sebenarnya memproses pembayaran di back-end?

Sebagian besar situs web tidak akan menangani pembayaran sendiri (sesuatu yang akan membutuhkan banyak perawatan dan kepatuhan PCI DSS) tetapi menggunakan Gateway Pembayaran (PG) atau Penyedia Layanan Pembayaran (PSP) pihak ketiga. Sejumlah Gateway Pembayaran telah memperkenalkan dukungan khusus untuk API Permintaan Pembayaran. Mereka dapat memulai Permintaan Pembayaran melalui skrip mereka sendiri yang Anda sertakan di halaman Anda, membantu memastikan bahwa data dikirim dengan aman dan Anda tidak harus menanganinya sendiri. Mereka mungkin juga menawarkan solusi iFrame atau pengalihan. Cara terbaik untuk melanjutkan adalah untuk memeriksa dengan Gateway Pembayaran Anda bagaimana mereka merekomendasikan memasukkan Permintaan Pembayaran.

Integrasi Aplikasi Pembayaran

Sejauh ini kita telah membahas pembayaran kartu. Namun, API Permintaan Pembayaran juga mendukung aplikasi pembayaran seluler seperti Samsung Pay, Pay with Google (termasuk Android Pay), dan Apple Pay.

Membiarkan pelanggan kami membayar dengan salah satu aplikasi ini berarti mereka dapat menggunakan kartu yang telah mereka simpan di aplikasi, tanpa harus memasukkan kembali detailnya (bahkan untuk pertama kali) di browser. Menggunakan aplikasi ini juga bisa lebih cepat karena tidak mengharuskan pelanggan memasukkan kembali CVC (Kode Verifikasi Kartu, juga dikenal sebagai CVV) dari bagian belakang kartu. Akhirnya, mereka dapat membawa manfaat keamanan tambahan karena mereka tidak mengirimkan detail kartu asli, hanya token sekali pakai, sehingga melindungi kita dari potensi intersepsi dan serangan replay.

Saat pelanggan memilih aplikasi pembayaran sebagai metode pembayaran yang mereka pilih, browser beralih ke lembar pembayaran yang disediakan oleh aplikasi, untuk mengonfirmasi pembayaran. Aplikasi pihak ketiga kemudian secara umum akan menerima sidik jari pelanggan atau pemindaian iris mata untuk mengonfirmasi pembayaran jika perangkat mendukungnya.

Setiap aplikasi pembayaran akan memiliki instruksi khusus mereka sendiri, tetapi ide umumnya sama. Anda dapat mengidentifikasi mereka sebagai metode pembayaran potensial menggunakan URL khusus mereka sendiri dan meneruskan konfigurasi yang diperlukan di bidang data . Misalnya, untuk mendukung Samsung Pay, Anda akan menyertakan kode seperti ini di array methodData Anda:

 var methodData = [ { supportedMethods: 'https://spay.samsung.com', data: { // Samsung Pay specific data here } }, … // Other payment methods ];

Secara umum, ada dua metode untuk mengintegrasikan aplikasi ini dengan gateway pembayaran Anda: metode "Gateway Token" dan metode "Network Token". Jika Anda menggunakan layanan pihak ketiga yang mendukungnya, kemungkinan besar Anda akan menggunakan mode Gateway Token, di mana layanan aplikasi pembayaran akan melakukan panggilan ke Payment Gateway Anda atas nama Anda. Atau, Anda dapat menggunakan metode Token Jaringan di mana Anda akan menangani pengiriman token ke Gateway Pembayaran Anda dengan aman, menggunakan SDK mereka. Gateway Pembayaran dan/atau penyedia aplikasi pembayaran Anda harus dapat memberikan perincian lebih lanjut.

Google baru-baru ini mengumumkan Google Payment API yang menggabungkan Android Pay serta kartu yang disimpan di akun Google pelanggan.

Apple Pay saat ini menggunakan solusi JavaScript sendiri, Apple Pay JS. Namun, pengembang di Google telah membuat pembungkus yang memungkinkan Anda menggunakannya melalui API Permintaan Pembayaran standar.

Apa berikutnya?

Kelompok Kerja Pembayaran Web tidak berhenti di API Permintaan Pembayaran. Pekerjaan juga sedang dilakukan pada standar lain, termasuk Payment Handler API yang akan memungkinkan aplikasi web bertindak sebagai aplikasi pembayaran pihak ketiga. Topik lain yang sedang dibahas mencakup kemungkinan standarisasi seputar tokenisasi dan kemampuan Permintaan Pembayaran untuk mendukung hal-hal seperti kartu hadiah. Jika Anda ingin mengikuti perkembangan, berikut adalah milis publik. Saya berharap bahwa bersama-sama kita dapat memecahkan pengalaman checkout yang membuat frustrasi di masa lalu dan mencapai visi revolusi pembayaran web!

Sumber Daya Lebih Lanjut

• “Wiki Pembayaran Web W3C,” GitHub
• “Informasi Pengembang API Permintaan Pembayaran W3C,” GitHub lihat juga FAQ
• “Pembayaran Web 101: Tutorial Pengodean Permintaan Pembayaran Singkat,” Glitch
• “Mendalami API Permintaan Pembayaran,” Pengembang Google
• “Panduan Pengembang API Permintaan Pembayaran,” Microsoft Edge
• “Cara Menerima Samsung Pay Di Situs Web Anda Menggunakan Pembayaran Web,” Winston Chen, Medium