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 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:

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

  3. Pelanggan menekan tombol pembayaran.

    Diagram situs toko keju dengan tombol BobPay (aplikasi pembayaran).

  4. Browser meluncurkan aplikasi pembayaran.

    Diagram situs toko keju dengan aplikasi BobPay diluncurkan dalam modal. Modal menampilkan opsi pengiriman dan total biaya.

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

    Diagram yang menunjukkan pelanggan memilih opsi pengiriman yang berbeda di modal aplikasi BobPay. Diagram kedua menunjukkan penjual memperbarui total biaya yang ditampilkan di BobPay.

  6. Setelah pelanggan mengonfirmasi pembelian, penjual memvalidasi pembayaran dan menyelesaikan transaksi.

    Diagram yang menunjukkan pelanggan menekan tombol

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

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