Pelajari cara kerja Payment Request API di tingkat tinggi.
API Permintaan Pembayaran
Saat pelanggan mencoba membeli sesuatu dari situs Anda, situs tersebut harus meminta pelanggan memberikan informasi pembayaran dan, jika perlu, informasi lain seperti preferensi pengiriman. Anda dapat melakukannya dengan mudah dan cepat menggunakan Payment Request API (PR API).
Struktur dasar
Pembuatan objek PaymentRequest
memerlukan dua parameter: metode
pembayaran dan detail pembayaran. Selain itu, parameter opsi pembayaran ketiga bersifat opsional. Permintaan dasar dapat dibuat seperti ini:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Mari kita lihat bagaimana setiap parameter dibuat dan digunakan.
Metode pembayaran
Parameter pertama, paymentMethods, adalah daftar metode pembayaran yang didukung dalam
variabel array. Setiap elemen dalam array terdiri dari dua komponen,
supportedMethods
dan, secara opsional, data
.
Untuk supportedMethods
, penjual harus menentukan ID Metode
Pembayaran
seperti https://bobbucks.dev/pay
. Keberadaan dan konten data
bergantung pada
konten supportedMethods
dan desain penyedia aplikasi pembayaran.
Kedua informasi tersebut harus diberikan oleh penyedia aplikasi pembayaran.
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
Detail pembayaran
Parameter kedua, paymentDetails, diteruskan sebagai objek dan menentukan
detail pembayaran untuk transaksi. Kolom ini berisi nilai yang diperlukan total
,
yang menentukan jumlah total yang harus dibayar dari pelanggan. Parameter ini juga dapat
mencantumkan item yang dibeli secara opsional.
Dalam contoh di bawah, daftar item pembelian opsional (dalam hal ini hanya satu item) ditampilkan, sebagaimana jumlah total terutang yang diperlukan. Dalam kedua kasus tersebut, unit mata uang ditentukan dengan masing-masing jumlah.
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
Memeriksa ketersediaan metode pembayaran
Chrome akan memeriksa apakah pengguna dan lingkungan siap melakukan pembayaran
selama pembuatan objek PaymentRequest
.
Untuk memeriksa apakah pengguna dan lingkungan siap melakukan pembayaran, panggil
canMakePayment()
sebelum memanggil prosedur pembayaran. Memanggil
canMakePayment()
akan menampilkan true
jika browser mendukung setidaknya satu metode
pembayaran yang ditentukan dalam objek.
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
Pelajari lebih lanjut PaymentRequest.canMakePayment() di MDN
Metode show()
Setelah menetapkan dua parameter dan membuat objek request
seperti yang ditunjukkan
di atas, Anda dapat memanggil metode show()
, yang menampilkan antarmuka pengguna
aplikasi pembayaran.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Tampilan antarmuka pengguna aplikasi pembayaran akan sepenuhnya bergantung pada penyedia aplikasi pembayaran. Setelah pelanggan setuju untuk melakukan pembayaran, objek JSON akan diteruskan ke penjual yang berisi semua informasi yang diperlukan untuk mentransfer uang. Penjual kemudian dapat mengirimkannya ke PSP untuk memproses pembayaran.
Terakhir, Anda dapat menutup UI Permintaan Pembayaran dengan menyelesaikan proses menggunakan
response.complete('success')
atau response.complete('fail')
, bergantung pada
hasil yang ditampilkan PSP.
Berikutnya
Pelajari lebih lanjut Pembayaran Web.