Masa berlaku transaksi pembayaran

Pelajari cara penjual mengintegrasikan aplikasi pembayaran dan cara kerja transaksi pembayaran dengan Payment Request API.

Eiji Kitamura

Milica Mihajlija

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:

1. Penjual memulai transaksi pembayaran.
2. Penjual menampilkan tombol pembayaran.

3. Pelanggan menekan tombol pembayaran.

   

4. Browser meluncurkan aplikasi pembayaran.

   

5. Jika pelanggan mengubah detail apa pun (seperti opsi pengiriman atau alamatnya), penjual akan memperbarui detail transaksi yang mencerminkan perubahan tersebut.

   

6. 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, atau pickup) di PaymentRequest. 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'
});

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.