Update pada Web Payments API

Terus dapatkan informasi terbaru tentang hal baru di Pembayaran Web.

Danyao Wang
Danyao Wang
Rouslan Solomakhin
Rouslan Solomakhin

Pembayaran Web telah tersedia secara publik di browser sejak tahun 2016. Fitur inti—Payment Request API—kini tersedia di beberapa browser: Chrome, Safari, Edge, dan dalam waktu dekat Firefox. Jika Anda baru menggunakan Pembayaran Web, lihat "Ringkasan Pembayaran Web" untuk memulai.

Sejak peluncuran Payment Request API dan Payment Handler API, telah ada cukup banyak perubahan yang dilakukan pada spesifikasi masing-masing. Perubahan ini tidak akan merusak kode yang berfungsi, tetapi sebaiknya Anda memperhatikannya. Postingan ini merangkum update tersebut dan akan terus mengumpulkan perubahan API tersebut.

Metode baru: hasEnrolledInstrument()

Di Payment Request API versi sebelumnya, canMakePayment() digunakan untuk memeriksa keberadaan instrumen pembayaran pengguna. Dalam update spec terbaru, canMakePayment() telah diganti dengan hasEnrolledInstrument() tanpa mengubah fungsinya.

Metode hasEnrolledInstrument() memiliki konsensus dari semua browser utama. Chrome telah menerapkannya di versi 74 dan Webkit serta Gecko memiliki bug pelacakan, tetapi belum menerapkan metode ini sejak Juni 2019.

Untuk menggunakan metode hasEnrolledInstrument() baru, ganti kode yang terlihat seperti ini:

// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);

Dengan kode yang terlihat seperti ini:

// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // hasEnrolledInstrument() is available.
  request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
  request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}

canMakePayment() tidak lagi memeriksa keberadaan instrumen

Karena hasEnrolledInstrument() kini menangani pemeriksaan instrumen pembayaran pengguna, canMakePayment() telah diperbarui untuk hanya memeriksa ketersediaan aplikasi pembayaran.

Perubahan pada canMakePayment() ini terikat dengan implementasi hasEnrolledInstrument(). Mulai Juni 2019, fitur ini diterapkan di Chrome 74, tetapi tidak di browser lain. Pastikan untuk memeriksa apakah metode hasEnrolledInstrument() tersedia di browser pengguna sebelum mencoba menggunakannya.

// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // `canMakePayment()` behavior change corresponds to
  // `hasEnrolledInstrument()` availability.
  request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
  console.log("Cannot check for payment app availability without checking for instrument presence.");
}

languageCode dihapus dari metode pembayaran basic-card

PaymentAddress.languageCode telah dihapus dari alamat pengiriman dan alamat penagihan untuk basic-card. Alamat penagihan metode pembayaran lain (seperti Google Pay) tidak terpengaruh.

Perubahan ini telah diterapkan di Chrome 74, Firefox, dan Safari.

PaymentRequest.show() kini menggunakan detailsPromise opsional

PaymentRequest.show() memungkinkan penjual menampilkan UI permintaan pembayaran sebelum jumlah akhir diketahui. Penjual memiliki waktu sepuluh detik untuk me-resolve detailsPromise sebelum waktu tunggu habis. Fitur ini ditujukan untuk perjalanan bolak-balik sisi server yang cepat.

Fitur ini telah disertakan dalam Chrome 75 dan Safari.

// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
  return;
}

// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
  // Find out the exact total amount and call
  // `resolveDetailsPromise(details)`.
  // Use a 3 second timeout as an example.
  window.setTimeout(function() {
    resolveDetailsPromise(details);
  }, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);

PaymentRequestEvent.changePaymentMethod()

Fitur Payment Handler API PaymentRequestEvent.changePaymentMethod() memungkinkan pengendali pembayaran (misalnya, Google Pay) untuk memicu pengendali peristiwa onpaymentmethodchange. changePaymentMethod() menampilkan promise yang me-resolve ke respons penjual dengan informasi harga yang diperbarui (misalnya, penghitungan ulang pajak).

Peristiwa PaymentRequestEvent.changePaymentMethod() dan paymentmethodchange tersedia di Chrome 76 dan Webkit telah mengimplementasikan peristiwa paymentmethodchange dalam Pratinjau Teknologinya.

// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
  evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
    if (evt.changePaymentMethod === undefined) {
      // Not implemented in this version of Chrome.
      return;
    }
    // Notify merchant that the user selected a different payment method.
    evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
    .then((responseFromMerchant) => {
      if (responseFromMerchant === null) {
        // Merchant ignored the 'paymentmethodchange' event.
        return;
      }
      handleResponseFromMerchant(responseFromMerchant);
    })
    .catch((error) => {
      handleError(error);
    });
  }));
});

Contoh penjual:

if (request.onpaymentmethodchange === undefined) {
  // Feature not available in this browser.
  return;
}

request.addEventListener('paymentmethodchange', (evt) => {
  evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});

Peningkatan pengembangan lokal

Chrome 76 menambahkan dua peningkatan kecil untuk produktivitas developer. Jika lingkungan pengembangan lokal Anda menggunakan sertifikat yang ditandatangani sendiri, kini Anda dapat menggunakan flag command line --ignore-certificate-errors untuk membuat Chrome mengizinkan Web Payments API di lingkungan pengembangan Anda. Jika Anda mengembangkan menggunakan server web lokal yang tidak mendukung HTTPS, Anda juga dapat menggunakan tanda --unsafely-treat-insecure-origin-as-secure=<origin> untuk membuat Chrome memperlakukan origin HTTP sebagai HTTPS.