Pelajari cara penjual mengintegrasikan aplikasi pembayaran dan cara kerja transaksi pembayaran dengan Payment Request API.
Web Payments API adalah fitur pembayaran khusus yang diintegrasikan ke dalam browser untuk pertama kalinya. Dengan Pembayaran Web, integrasi penjual dengan aplikasi pembayaran menjadi lebih mudah sementara pengalaman pelanggan menjadi lebih sederhana dan lebih aman.
Untuk mempelajari lebih lanjut manfaat penggunaan Pembayaran Web, lihat Memperkuat aplikasi pembayaran dengan Pembayaran Web.
Artikel ini memandu Anda melakukan transaksi pembayaran di situs penjual dan membantu Anda memahami cara kerja integrasi aplikasi pembayaran.
Proses ini melibatkan 6 langkah:
- Penjual memulai transaksi pembayaran.
- Penjual menampilkan tombol pembayaran.
Pelanggan menekan tombol pembayaran.
Browser meluncurkan aplikasi pembayaran.
Jika pelanggan mengubah detail apa pun (seperti opsi pengiriman atau alamatnya), penjual akan memperbarui detail transaksi yang mencerminkan perubahan tersebut.
Setelah pelanggan mengonfirmasi pembelian, penjual memvalidasi pembayaran dan menyelesaikan transaksi.
Langkah 1: Penjual memulai transaksi pembayaran
Saat pelanggan memutuskan untuk melakukan pembelian, penjual akan memulai transaksi
pembayaran dengan membuat
objek
PaymentRequest
. Objek ini menyertakan informasi penting tentang transaksi:
- Metode pembayaran yang dapat diterima dan datanya untuk memproses transaksi.
- Detail, seperti harga total (wajib) dan informasi tentang item.
- Opsi tempat penjual dapat meminta informasi pengiriman seperti alamat pengiriman dan opsi pengiriman.
- Penjual juga dapat meminta alamat penagihan, nama pembayar, email, dan nomor telepon.
- Penjual juga dapat menyertakan jenis
pengiriman
opsional (
shipping
,delivery
, ataupickup
) diPaymentRequest
. Aplikasi pembayaran dapat menggunakannya sebagai petunjuk untuk menampilkan label yang benar di UI-nya.
const request = new PaymentRequest([{
supportedMethods: 'https://bobpay.xyz/pay',
data: {
transactionId: '****'
}
}], {
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' }
}
}, {
requestShipping: true,
requestBillingAddress: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestPayerName: true,
shippingType: 'delivery'
});
Beberapa pengendali pembayaran mungkin mengharuskan penjual untuk memberikan ID transaksi yang telah dikeluarkan sebelumnya sebagai bagian dari informasi transaksi. Integrasi standar mencakup komunikasi antara server penjual dan pengendali pembayaran untuk memesan total harga. Hal ini mencegah pelanggan berbahaya memanipulasi harga dan menipu penjual dengan validasi di akhir transaksi.
Penjual dapat meneruskan ID transaksi sebagai bagian dari properti data
objek PaymentMethodData
.
Dengan menyediakan informasi transaksi, browser akan melalui proses penemuan
aplikasi pembayaran yang ditentukan dalam PaymentRequest
berdasarkan ID
metode pembayaran. Dengan cara ini, browser dapat menentukan aplikasi pembayaran yang akan
diluncurkan segera setelah penjual siap melanjutkan transaksi.
Untuk mempelajari cara kerja proses penemuan secara mendetail, lihat Menyiapkan metode pembayaran.
Langkah 2: Penjual menampilkan tombol pembayaran
Penjual dapat mendukung banyak metode pembayaran, tetapi hanya boleh menampilkan tombol
pembayaran untuk metode yang benar-benar dapat digunakan pelanggan. Menampilkan tombol pembayaran yang tidak dapat
digunakan adalah pengalaman pengguna yang buruk. Jika penjual dapat memprediksi bahwa
metode pembayaran yang ditentukan dalam objek PaymentRequest
tidak akan berfungsi untuk
pelanggan, mereka dapat memberikan solusi penggantian atau tidak menampilkan tombol tersebut sama sekali.
Dengan menggunakan instance PaymentRequest
, penjual dapat membuat kueri apakah pelanggan memiliki
aplikasi pembayaran yang tersedia.
Apakah pelanggan memiliki aplikasi pembayaran?
Metode
canMakePayment()
PaymentRequest
menampilkan true
jika aplikasi pembayaran tersedia di
perangkat pelanggan. "Tersedia" berarti aplikasi pembayaran yang mendukung
metode pembayaran ditemukan, dan aplikasi pembayaran khusus platform diinstal, atau
aplikasi pembayaran berbasis web siap
didaftarkan.
const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
// Fallback to other means of payment or hide the button.
}
Langkah 3: Pelanggan menekan tombol pembayaran
Saat pelanggan menekan tombol pembayaran, penjual akan memanggil metode show()
dari instance PaymentRequest
yang langsung memicu peluncuran
UI pembayaran.
Jika harga total akhir ditetapkan secara dinamis (misalnya, diambil dari server), penjual dapat menunda peluncuran UI pembayaran hingga totalnya diketahui.
Menunda peluncuran UI pembayaran
Lihat demo menunda UI pembayaran hingga harga total akhir ditentukan.
Untuk menunda UI pembayaran, penjual meneruskan promise ke metode show()
.
Browser akan menampilkan indikator pemuatan hingga promise di-resolve dan transaksi siap dimulai.
const getTotalAmount = async () => {
// Fetch the total amount from the server, etc.
};
try {
const result = await request.show(getTotalAmount());
// Process the result…
} catch(e) {
handleError(e);
}
Jika tidak ada promise yang ditentukan sebagai argumen untuk show()
, browser akan segera meluncurkan UI pembayaran.
Langkah 4: Browser meluncurkan aplikasi pembayaran
Browser dapat meluncurkan aplikasi pembayaran khusus platform atau aplikasi pembayaran berbasis web. (Anda dapat mempelajari lebih lanjut cara Chrome menentukan aplikasi pembayaran yang akan diluncurkan.)
Cara aplikasi pembayaran dibuat sebagian besar bergantung pada developer, tetapi peristiwa yang dimunculkan dari dan ke penjual, serta struktur data yang diteruskan bersama peristiwa tersebut, telah distandarisasi.
Saat diluncurkan, aplikasi pembayaran akan menerima informasi
transaksi
yang diteruskan ke objek PaymentRequest
di Langkah 1, yang mencakup hal berikut:
- Data metode pembayaran
- Harga total
- Opsi pembayaran
Aplikasi pembayaran menggunakan informasi transaksi untuk memberi label pada UI-nya.
Langkah 5: Cara penjual dapat memperbarui detail transaksi bergantung pada tindakan pelanggan
Pelanggan memiliki opsi untuk mengubah detail transaksi, seperti metode pembayaran dan opsi pengiriman di aplikasi pembayaran. Saat pelanggan membuat perubahan, penjual akan menerima peristiwa perubahan dan memperbarui detail transaksi.
Ada empat jenis peristiwa yang dapat diterima penjual:
- Peristiwa perubahan metode pembayaran
- Peristiwa perubahan alamat pengiriman
- Peristiwa perubahan opsi pengiriman
- Peristiwa validasi penjual
Peristiwa perubahan metode pembayaran
Aplikasi pembayaran dapat mendukung beberapa metode pembayaran dan penjual dapat menawarkan diskon khusus, bergantung pada pilihan pelanggan. Untuk mencakup kasus penggunaan ini, peristiwa perubahan metode pembayaran dapat memberi tahu penjual tentang metode pembayaran baru sehingga penjual dapat memperbarui harga total dengan diskon dan mengembalikannya ke aplikasi pembayaran.
request.addEventListener('paymentmethodchange', e => {
e.updateWith({
// Add discount etc.
});
});
Peristiwa perubahan alamat pengiriman
Aplikasi pembayaran dapat secara opsional memberikan alamat pengiriman pelanggan. Hal ini memudahkan pelanggan karena mereka tidak perlu memasukkan detail apa pun secara manual ke dalam formulir dan mereka dapat menyimpan alamat pengiriman di aplikasi pembayaran pilihan mereka, bukan di beberapa situs penjual yang berbeda.
Jika pelanggan memperbarui alamat pengiriman di aplikasi pembayaran setelah
transaksi dimulai, peristiwa 'shippingaddresschange'
akan dikirim
ke penjual. Peristiwa ini membantu penjual menentukan biaya pengiriman berdasarkan alamat baru, memperbarui harga total, dan menampilkannya ke aplikasi pembayaran.
request.addEventListener('shippingaddresschange', e => {
e.updateWith({
// Update the details
});
});
Jika penjual tidak dapat mengirim ke alamat yang diperbarui, mereka dapat memberikan pesan error dengan menambahkan parameter error ke detail transaksi yang ditampilkan ke aplikasi pembayaran.
Peristiwa perubahan opsi pengiriman
Penjual dapat menawarkan beberapa opsi pengiriman kepada pelanggan dan dapat mendelegasikan pilihan tersebut ke aplikasi pembayaran. Opsi pengiriman ditampilkan sebagai daftar harga dan nama layanan yang dapat dipilih pelanggan. Contoh:
- Pengiriman standar - Gratis
- Pengiriman ekspres - 5 USD
Saat pelanggan memperbarui opsi pengiriman di aplikasi pembayaran, peristiwa 'shippingoptionchange'
akan dikirim ke penjual. Penjual kemudian dapat
menentukan biaya pengiriman, memperbarui harga total, dan menampilkannya ke
aplikasi pembayaran.
request.addEventListener('shippingoptionchange', e => {
e.updateWith({
// Update the details
});
});
Penjual juga dapat mengubah opsi pengiriman secara dinamis berdasarkan alamat pengiriman pelanggan. Hal ini berguna saat penjual ingin menawarkan kumpulan opsi pengiriman yang berbeda untuk pelanggan domestik dan internasional.
Peristiwa validasi penjual
Untuk keamanan tambahan, aplikasi pembayaran dapat melakukan validasi penjual sebelum melanjutkan ke alur pembayaran. Desain mekanisme validasi bergantung pada aplikasi pembayaran, tetapi peristiwa validasi penjual berfungsi untuk memberi tahu penjual URL yang dapat mereka gunakan untuk memvalidasi diri mereka sendiri.
request.addEventListener('merchantvalidation', e => {
e.updateWith({
// Use `e.validateURL` to validate
});
});
Langkah 6: Penjual memvalidasi pembayaran dan menyelesaikan transaksi
Saat pelanggan berhasil memberikan otorisasi pembayaran, metode show()
akan menampilkan promise yang di-resolve ke
PaymentResponse
.
Objek PaymentResponse
mencakup informasi berikut:
- Detail hasil pembayaran
- Alamat pengiriman
- Opsi pengiriman
- Informasi kontak
Pada tahap ini, UI browser mungkin masih menampilkan indikator pemuatan yang berarti transaksi belum selesai.
Jika aplikasi pembayaran dihentikan karena kegagalan atau error pembayaran, promise
yang ditampilkan dari show()
akan ditolak, dan browser akan menghentikan transaksi
pembayaran.
Memproses dan memvalidasi pembayaran
details
di PaymentResponse
adalah objek kredensial pembayaran yang ditampilkan
dari aplikasi pembayaran. Penjual dapat menggunakan kredensial tersebut untuk memproses atau memvalidasi
pembayaran. Cara kerja proses penting ini bergantung pada pengendali pembayaran.
Menyelesaikan atau mencoba kembali transaksi
Setelah penjual menentukan apakah transaksi berhasil atau gagal, mereka dapat:
- Panggil metode
.complete()
untuk menyelesaikan transaksi dan menutup indikator pemuatan. - Izinkan pelanggan mencoba lagi dengan memanggil metode
retry()
.
async function doPaymentRequest() {
try {
const request = new PaymentRequest(methodData, details, options);
const response = await request.show();
await validateResponse(response);
} catch (err) {
// AbortError, SecurityError
console.error(err);
}
}
async function validateResponse(response) {
try {
const errors = await checkAllValuesAreGood(response);
if (errors.length) {
await response.retry(errors);
return validateResponse(response);
}
await response.complete("success");
} catch (err) {
// Something went wrong…
await response.complete("fail");
}
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();
Langkah Berikutnya
- Pelajari cara mendeklarasikan ID metode pembayaran secara mendetail di Menyiapkan metode pembayaran.
- Pelajari cara mem-build aplikasi pembayaran khusus platform di panduan developer aplikasi pembayaran Android.
- Pelajari cara mem-build aplikasi pembayaran berbasis web di Panduan developer aplikasi pembayaran berbasis web.