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 dibangun pada browser untuk pertama kalinya. Dengan Pembayaran Web, integrasi penjual dengan aplikasi pembayaran menjadi lebih mudah sekaligus pengalaman pelanggan menjadi lebih sederhana dan aman.

Untuk mempelajari manfaat penggunaan Pembayaran Web lebih lanjut, lihat Memberdayakan 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:

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 akan 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 beserta datanya untuk memproses transaksi.
• Detail, seperti harga total (wajib) dan informasi tentang item.
• Opsi yang memungkinkan penjual 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'
});

Menyertakan ID transaksi

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 harga total. Tindakan 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.

Memberikan 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 yang benar-benar dapat digunakan oleh pelanggan. Menampilkan tombol pembayaran yang tidak dapat digunakan merupakan 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 atau tidak.

Apakah pelanggan memiliki aplikasi pembayaran?

Metode canMakePayment() dari PaymentRequest akan menampilkan true jika aplikasi pembayaran tersedia di perangkat pelanggan. "Tersedia" berarti aplikasi pembayaran yang mendukung metode pembayaran ditemukan, dan aplikasi pembayaran khusus platform telah 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 memanggil metode show() dari instance PaymentRequest yang segera memicu peluncuran UI pembayaran.

Jika total harga 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 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 ditentukan sebagai argumen untuk show(), browser akan segera meluncurkan UI pembayaran.

Catatan: Jika pengendali pembayaran didesain untuk menampilkan ID transaksi setelah harga total ditetapkan, ID tersebut dapat diteruskan sebagai bagian dari hasil promise.

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 pembuatan aplikasi pembayaran sepenuhnya bergantung pada developer, tetapi peristiwa yang dimunculkan dari dan ke penjual, serta struktur data yang diteruskan bersama dengan peristiwa tersebut, distandarisasi.

Saat diluncurkan, aplikasi pembayaran akan menerima informasi transaksi yang diteruskan ke objek PaymentRequest pada Langkah 1, yang mencakup hal berikut:

• Data metode pembayaran
• Total harga
• 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 mereka 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 memberikan alamat pengiriman pelanggan secara opsional. Hal ini nyaman bagi 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 pengirimannya 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 mengembalikannya ke aplikasi pembayaran.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

Jika penjual tidak dapat melakukan pengiriman ke alamat yang diperbarui, mereka dapat memberikan pesan error dengan menambahkan parameter error ke detail transaksi yang ditampilkan ke aplikasi pembayaran.

Catatan: Penjual tidak menerima alamat pengiriman lengkap pelanggan hingga mereka memberikan otorisasi untuk 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. Kemudian, penjual dapat menentukan biaya pengiriman, memperbarui harga total, dan mengembalikannya 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 serangkaian 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 tentang URL yang dapat mereka gunakan untuk memvalidasi sendiri.

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

Catatan: Dukungan untuk peristiwa validasi penjual terbatas untuk Apple Safari. Browser berbasis Chromium belum menerapkan peristiwa ini per Mei 2020.

Langkah 6: Penjual memvalidasi pembayaran dan menyelesaikan transaksi

Jika pelanggan berhasil memberikan otorisasi pembayaran, metode show() akan menampilkan promise yang di-resolve ke 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 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.
• Biarkan 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 membuat aplikasi pembayaran khusus platform di panduan developer aplikasi pembayaran Android.
• Pelajari cara membuat aplikasi pembayaran berbasis web di Panduan developer aplikasi pembayaran berbasis web.