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

Web tabanlı ödeme uygulamanızı Web Payments'a uyarlama ve müşterilere daha iyi bir kullanıcı deneyimi sunma.

Eiji Kitamura

Ödeme uygulaması kaydedildikten sonra satıcıların ödeme isteklerini kabul etmeye hazır olursunuz. Bu yayında, çalışma zamanında (ör. bir pencere gösterildiğinde ve kullanıcı pencereyle etkileşimde bulunduğunda) bir hizmet çalışanından ödeme işleminin nasıl düzenleneceği açıklanmaktadır.

"Çalışma zamanında ödeme parametresi değişiklikleri", kullanıcı ödeme işleyiciyle etkileşimde bulunurken satıcının ve ödeme işleyicinin mesaj alışverişinde bulunmasına olanak tanıyan bir etkinlik grubunu ifade eder. İsteğe bağlı ödeme bilgilerini servis çalışanıyla işleme başlıklı makalede daha fazla bilgi edinin.

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() çağrısı yaptığında hizmet çalışanınız bir paymentrequest etkinliği alır. Etkinliği yakalamak ve sonraki işleme hazırlanmak için hizmet işleyiciye bir etkinlik dinleyici 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;
…

Korunan 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()'u çağırarak bir ödeme işleyici penceresi açabilir. Ödeme işleyici penceresinde müşterilere, kimlik doğrulama yapabilecekleri, kargo adresini ve seçeneklerini belirleyebilecekleri ve ödemeyi yetkilendirebilecekleri ödeme uygulamanızın arayüzü gösterilir. Ödeme ön ucunda ödemeleri işleme başlıklı makalede (yakında yayınlanacak) ön uç kodunu nasıl yazacağınızı ele alacağız.

Gelecekte bir ödeme sonucuyla çözebilmeniz için PaymentRequestEvent.respondWith() değerine 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 promise'i istediğiniz zaman çö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() üzerinden ödeme uygulamasının kullanıcı arayüzüyle mesaj alışverişinde bulunabilir. Kullanıcı arayüzünden 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 });
}

Kullanıma hazır sinyalini kullanıcı arayüzünden alma

Ödeme işleyici penceresi açıldıktan sonra hizmet çalışanı, ödeme uygulamasının ön ucundan hazır durum sinyali bekler. Hizmet çalışanı, hazır olduğunda önemli bilgileri ön uça 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 uça aktarma

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

[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 iade etme

Müşteri ödemeyi yetkilendirdiğinde ön uç, devam etmek için hizmet işçisine bir gönderi mesajı gönderebilir. Sonuçları satıcıya geri göndermek için PaymentRequestEvent.respondWith() adresine iletilen vaadi çö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

Müşterinin işlemi iptal etmesine izin vermek için ön uç, bunu yapması amacıyla servis çalışanına bir yayın mesajı gönderebilir. Ardından servis çalışanı, satıcıya işlemin iptal edildiğini belirtmek için PaymentRequestEvent.respondWith()'e iletilen vaadi null ile çözebilir.

[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ğıdaki çalışan örnek uygulamadan alınmıştır:

https://paymenthandler-demo.glitch.me

[payment handler] service worker

[payment handler] frontend

Denemek için:

1. https://paymentrequest-demo.glitch.me/ adresine gidin.
2. Sayfanın alt kısmına gidin.
3. Ödeme düğmesi ekle'ye basın.
4. Ödeme Yöntemi Tanımlayıcısı alanına https://paymenthandler-demo.glitch.me yazın.
5. Alanın yanındaki Öde düğmesine basın.

Sonraki adımlar

Bu makalede, bir hizmet çalışanından ödeme işlemini nasıl düzenleyeceğinizi öğrendiniz. Bir sonraki adımda, hizmet işleyiciye nasıl daha gelişmiş özellikler ekleyeceğinizi öğreneceksiniz.

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