Ödeme işlemlerini bir hizmet çalışanıyla düzenleme

Web tabanlı ödeme uygulamanızı Web Ödemeleri'ne nasıl uyarlayacağınız ve müşterilere daha iyi bir kullanıcı deneyimi nasıl sunacağınız.

Eiji Kitamura

Ödeme uygulaması kaydedildikten sonra satıcılardan gelen ödeme isteklerini kabul etmeye hazırsınız. Bu yayında, çalışma zamanında (ör. bir pencere gösterilirken ve kullanıcı bu pencereyle etkileşimde bulunurken) bir hizmet çalışanından ödeme işleminin nasıl düzenleneceği açıklanmaktadır.

"Çalışma zamanı ödeme parametresi değişiklikleri", kullanıcı ödeme işleyiciyle etkileşimde bulunurken satıcının ve ödeme işleyicinin mesaj alışverişi yapmasına olanak tanıyan bir dizi etkinliği ifade eder. Daha fazla bilgiyi Hizmet çalışanıyla isteğe bağlı ödeme bilgilerini işleme başlıklı makalede bulabilirsiniz.

Satıcıdan ödeme isteği etkinliği alma

Bir müşteri web tabanlı ödeme uygulamanızla ödeme yapmayı seçtiğinde ve satıcı PaymentRequest.show() işlemi başlattığında paymentrequest, hizmet çalışanınız bir paymentrequest etkinliği alır. Etkinliği yakalamak ve sonraki işleme hazırlanmak için hizmet çalışanına bir etkinlik işleyici ekleyin.

[payment handler] service-worker.js:

…
let payment_request_event;
let resolver;
let client;

// `self` is the global object in service worker
self.addEventListener('paymentrequest', async e => {
  if (payment_request_event) {
    // If there's an ongoing payment transaction, reject it.
    resolver.reject();
  }
  // Preserve the event for future use
  payment_request_event = e;
…

Saklanan PaymentRequestEvent, bu işlemle ilgili önemli bilgiler içerir:

Web tabanlı ödeme uygulaması ön ucunu görüntülemek için ödeme işleyici penceresini açın.

Bir paymentrequest etkinliği alındığında ödeme uygulaması, PaymentRequestEvent.openWindow() işlevini çağırarak bir ödeme işleyici penceresi açabilir. Ödeme işleyici penceresi, müşterilere ödeme uygulamanızın arayüzünü gösterir. Müşteriler bu arayüzde kimliklerini doğrulayabilir, kargo adresini ve seçeneklerini belirleyebilir ve ödemeyi yetkilendirebilir. Ön uç kodunun nasıl yazılacağını Ödeme ön ucunda ödemeleri işleme (yakında yayınlanacak) başlıklı makalede ele alacağız.

Gelecekte ödeme sonucuyla çözebilmeniz için PaymentRequestEvent.respondWith() öğesine korunmuş bir söz iletin.

[payment handler] service-worker.js:

…
self.addEventListener('paymentrequest', async e => {
…
  // Retain a promise for future resolution
  // Polyfill for PromiseResolver is provided below.
  resolver = new PromiseResolver();

  // Pass a promise that resolves when payment is done.
  e.respondWith(resolver.promise);
  // Open the checkout page.
  try {
    // Open the window and preserve the client
    client = await e.openWindow(checkoutURL);
    if (!client) {
      // Reject if the window fails to open
      throw 'Failed to open window';
    }
  } catch (err) {
    // Reject the promise on failure
    resolver.reject(err);
  };
});
…

Bir sözü rastgele bir zamanda çözmek için uygun bir PromiseResolver polyfill kullanabilirsiniz.

class PromiseResolver {
  constructor() {
    this.promise_ = new Promise((resolve, reject) => {
      this.resolve_ = resolve;
      this.reject_ = reject;
    })
  }
  get promise() { return this.promise_ }
  get resolve() { return this.resolve_ }
  get reject() { return this.reject_ }
}

Ön uçla bilgi alışverişi yapma

Ödeme uygulamasının hizmet çalışanı, ServiceWorkerController.postMessage() aracılığıyla ödeme uygulamasının ön ucuyla mesaj alışverişi yapabilir. Ön uçtan mesaj almak için message etkinliklerini dinleyin.

[payment handler] service-worker.js:

// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
  if (client) client.postMessage({ type, ...contents });
}

Ön uçtan hazır sinyalini alma

Ödeme işleyici penceresi açıldıktan sonra hizmet çalışanı, ödeme uygulaması ön ucundan hazır durumu sinyali gelmesini beklemelidir. Service worker, hazır olduğunda önemli bilgileri ön uca iletebilir.

[payment handler] frontend:

navigator.serviceWorker.controller.postMessage({
  type: 'WINDOW_IS_READY'
});

[payment handler] service-worker.js:

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      // `WINDOW_IS_READY` is a frontend's ready state signal
      case 'WINDOW_IS_READY':
        const { total } = payment_request_event;
…

İşlem ayrıntılarını ön uca aktarma

Şimdi ödeme ayrıntılarını geri gönderin. Bu durumda, yalnızca ödeme isteğinin toplamını gönderiyorsunuz ancak isterseniz daha fazla ayrıntı iletebilirsiniz.

[payment handler] service-worker.js:

…
        // Pass the payment details to the frontend
        postMessage('PAYMENT_IS_READY', { total });
        break;
…

[payment handler] frontend:

let total;

navigator.serviceWorker.addEventListener('message', async e => {
  switch (e.data.type) {
      case 'PAYMENT_IS_READY':
        ({ total } = e.data);
        // Update the UI
        renderHTML(total);
        break;
…

Müşterinin ödeme kimlik bilgilerini döndürme

Müşteri ödemeyi yetkilendirdiğinde, ön uç devam etmek için hizmet çalışanına bir post mesajı gönderebilir. Sonucu satıcıya geri göndermek için PaymentRequestEvent.respondWith() öğesine iletilen sözü çözebilirsiniz. Bir PaymentHandlerResponse nesnesi iletin.

[payment handler] frontend:

  const paymentMethod = …

  postMessage('PAYMENT_AUTHORIZED', {
    paymentMethod,              // Payment method identifier
  });

[payment handler] service-worker.js:

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'PAYMENT_AUTHORIZED':
        // Resolve the payment request event promise
        // with a payment response object
        const response = {
          methodName: e.data.paymentMethod,
          details: { id: 'put payment credential here' },
        }
        resolver.resolve(response);
        // Don't forget to initialize.
        payment_request_event = null;
        break;
      …

Ödeme işlemini iptal etme

Ön uç, müşterinin işlemi iptal etmesine izin vermek için hizmet çalışanına bir postMessage göndererek bunu yapmasını sağlayabilir. Hizmet çalışanı daha sonra PaymentRequestEvent.respondWith()'ya iletilen sözü null ile çözerek satıcıya işlemin iptal edildiğini bildirebilir.

[payment handler] frontend:

  postMessage('CANCEL_PAYMENT');

[payment handler] service-worker.js:

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'CANCEL_PAYMENT':
        // Resolve the payment request event promise
        // with null
        resolver.resolve(null);
        // Don't forget to initialize.
        payment_request_event = null;
        break;
      …

Örnek kod

Bu belgede gördüğünüz tüm örnek kodlar, aşağıdakilerden alınmış alıntılardır: Payment Handler Demo

Sonraki adımlar

Bu makalede, bir hizmet çalışanından ödeme işleminin nasıl düzenleneceğini öğrendik. Bir sonraki adım, hizmet çalışanına daha gelişmiş özellikler eklemeyi öğrenmektir.

• İsteğe bağlı ödeme bilgilerini hizmet çalışanıyla işleme