Pelajari cara penjual mengintegrasikan aplikasi pembayaran dan cara kerja transaksi pembayaran dengan Payment Request API.
Web Payments API adalah fitur pembayaran khusus yang terintegrasi dalam browser untuk pertama kalinya. Dengan Web Payments, integrasi penjual dengan aplikasi pembayaran menjadi lebih sederhana sementara pengalaman pelanggan menjadi lebih efisien dan aman.
Untuk mempelajari lebih lanjut manfaat menggunakan Pembayaran Web, lihat Pemberdayaan aplikasi pembayaran dengan Pembayaran Web.
Artikel ini memandu Anda dalam 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 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 pembayaran
transaksi dengan membuat
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 yang dapat digunakan penjual untuk meminta informasi pengiriman, seperti info pengiriman alamat dan opsi pengiriman.
- Penjual juga dapat meminta alamat penagihan, nama, email, dan nomor telepon Anda.
- Penjual juga dapat menyertakan pengiriman opsional
jenis
(
shipping
,delivery
, ataupickup
) diPaymentRequest
. Aplikasi pembayaran 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 memberikan ID transaksi yang telah mereka keluarkan di muka sebagai bagian dari informasi transaksi. J integrasi standar mencakup komunikasi antara server pengendali pembayaran untuk memesan harga total. Hal ini mencegah pesan pelanggan agar tidak memanipulasi harga dan memperdaya penjual dengan validasi di akhir transaksi.
Penjual dapat meneruskan ID transaksi sebagai bagian dari
PaymentMethodData
properti data
objek.
Memberikan informasi transaksi, browser akan melakukan proses penemuan
proses aplikasi pembayaran yang ditentukan dalam PaymentRequest
berdasarkan metode pembayaran
ID metode. Dengan cara ini, browser dapat
menentukan aplikasi pembayaran untuk
diluncurkan segera setelah penjual siap melakukan transaksi.
Untuk mempelajari cara kerja proses penemuan secara rinci, lihat Menyiapkan pembayaran metode.
Langkah 2: Penjual menampilkan tombol pembayaran
Penjual dapat mendukung banyak metode pembayaran, tetapi hanya boleh menampilkan metode pembayaran
tombol untuk mereka yang benar-benar dapat digunakan oleh 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 mengkueri apakah pelanggan memiliki
aplikasi pembayaran yang tersedia.
Apakah pelanggan memiliki aplikasi pembayaran?
Tujuan
canMakePayment()
metode PaymentRequest
menampilkan true
jika aplikasi pembayaran tersedia di
di perangkat pelanggan. "Tersedia" berarti bahwa aplikasi pembayaran
yang mendukung
ditemukan, dan bahwa aplikasi pembayaran khusus platform tersebut sudah diinstal, atau
aplikasi pembayaran berbasis web siap untuk
terdaftar.
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 memanggil show()
dari instance PaymentRequest
yang segera memicu peluncuran
UI pembayaran.
Jika total harga akhir ditetapkan secara dinamis (misalnya, diambil dari penjual dapat menunda peluncuran UI pembayaran hingga total pembayaran dikenal.
Menunda peluncuran UI pembayaran
Lihat demo menunda pembayaran UI hingga total harga akhir ditentukan.
Untuk menunda UI pembayaran, penjual meneruskan promise ke metode show()
.
Browser akan menampilkan indikator pemuatan hingga promise selesai 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 ditetapkan sebagai argumen untuk show()
, browser akan
segera meluncurkan UI pembayaran.
Langkah 4: Browser meluncurkan aplikasi pembayaran
Browser dapat meluncurkan aplikasi pembayaran khusus platform atau berbasis web. (Anda dapat mempelajari lebih lanjut cara Chrome menentukan aplikasi pembayaran yang akan luncurkan.)
Bagaimana aplikasi pembayaran dibangun sepenuhnya tergantung pada pengembang, tetapi yang dikeluarkan dari dan ke penjual, serta struktur datanya yang diteruskan dengan peristiwa tersebut, akan distandarisasi.
Saat aplikasi pembayaran diluncurkan, aplikasi akan menerima transaksi
informasi
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 pembayaran metode pembayaran dan opsi pengiriman di aplikasi pembayaran. Sementara 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 sesuai pilihan pelanggan. Untuk membahas kasus penggunaan ini, peristiwa perubahan metode pembayaran dapat memberi tahu penjual tentang pembayaran baru agar mereka dapat memperbarui harga total dengan diskon dan mengembalikannya kembali ke aplikasi pembayaran.
request.addEventListener('paymentmethodchange', e => {
e.updateWith({
// Add discount etc.
});
});
Peristiwa perubahan alamat pengiriman
Aplikasi pembayaran dapat memberikan alamat pengiriman pelanggan secara opsional. Ini adalah nyaman bagi pelanggan karena mereka tidak harus memasukkan detail secara manual ke dalam formulir dan mereka dapat menyimpan alamat pengiriman di metode pembayaran pilihan aplikasi, bukan di beberapa situs penjual yang berbeda.
Jika pelanggan memperbarui alamat pengirimannya di aplikasi pembayaran setelah
transaksi telah dimulai, peristiwa 'shippingaddresschange'
akan dikirim
kepada penjual. Peristiwa ini membantu penjual menentukan biaya pengiriman berdasarkan
di alamat baru, perbarui harga total, dan mengembalikannya ke aplikasi pembayaran.
request.addEventListener('shippingaddresschange', e => {
e.updateWith({
// Update the details
});
});
Jika penjual tidak dapat mengirim ke alamat yang diperbarui, hal ini dapat terjadi karena penjual pesan dengan menambahkan parameter error ke detail transaksi yang ditampilkan ke metode 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 dapat
lalu tentukan biaya pengiriman, perbarui harga total, dan kembalikan ke
aplikasi pembayaran.
request.addEventListener('shippingoptionchange', e => {
e.updateWith({
// Update the details
});
});
Penjual dapat mengubah opsi pengiriman secara dinamis berdasarkan alamat pengiriman. Hal ini berguna ketika penjual ingin menawarkan rangkaian opsi pengiriman yang berbeda untuk pelanggan domestik dan internasional.
Peristiwa validasi penjual
Agar lebih aman, aplikasi pembayaran dapat melakukan validasi penjual sebelum untuk melanjutkan ke alur pembayaran. Desain mekanisme validasi hingga 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
Jika pelanggan berhasil memberikan otorisasi pembayaran, metode show()
menampilkan promise yang di-resolve menjadi
PaymentResponse
.
Objek PaymentResponse
menyertakan informasi berikut:
- Detail hasil pembayaran
- Alamat pengiriman
- Opsi pengiriman
- Informasi kontak
Pada tahap ini, UI browser mungkin masih menampilkan indikator pemuatan yang berarti bahwa transaksi belum selesai.
Jika aplikasi pembayaran dihentikan karena kegagalan atau error pembayaran,
promise yang ditampilkan dari show()
akan menolak, dan browser menghentikan pembayaran
transaksi.
Memproses dan memvalidasi pembayaran
details
di PaymentResponse
adalah objek kredensial pembayaran yang ditampilkan
dari aplikasi pembayaran. Penjual dapat menggunakan kredensial untuk memproses atau memvalidasi
pembayaran. Penanganan pembayaran bergantung pada cara kerja proses penting ini.
Menyelesaikan atau mencoba kembali transaksi
Setelah penjual menentukan apakah transaksi berhasil atau gagal, mereka bisa:
- 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 membangun aplikasi pembayaran khusus platform di Panduan developer aplikasi pembayaran Android.
- Pelajari cara membangun aplikasi pembayaran berbasis web di aplikasi pengembang aplikasi pembayaran berbasis web panduan kami.