Ö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 edebilirsiniz. Bu gönderide, çalışma zamanında bir hizmet çalışanından gelen ödeme işleminin nasıl düzenleneceği (ör. bir pencere görüntülendiğinde ve kullanıcı onunla etkileşimde bulunduğunda) açıklanmaktadır.

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

"Ç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ını sağlayan bir dizi etkinliği ifade eder. Service Worker ile isteğe bağlı ödeme bilgilerini yönetme bölümünden daha fazla bilgi edinebilirsiniz.

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

Bir müşteri web tabanlı ödeme uygulamanızla ödeme yapmayı tercih ettiğinde ve satıcı PaymentRequest.show() kodunu çağırdığında, hizmet çalışanınız bir paymentrequest etkinliği alır. Etkinliği kaydetmek ve sonraki işleme hazırlanmak için Service Worker'a etkinlik işleyici ekleyin.

[ödeme işleyici] 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;
…

Dikkat: Hizmet çalışanının aynı tarayıcıda farklı sekme ve pencerelerde bulunan tek bir örnek olduğunu unutmayın. Genel değişkenler tüm sekmeler ve pencerelerde paylaşılır.

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

Mülk adı	Açıklama
topOrigin	Üst düzey web sayfasının (genellikle alacaklı satıcısıdır) kaynağını belirten bir dize. Satıcı kaynağını tanımlamak için bunu kullanın.
paymentRequestOrigin	Çağrıcının kaynağını belirten bir dize. Satıcının Ödeme İsteği API'sini doğrudan çağırdığı durumlardaki bu değer topOrigin ile aynı olabilir. Ancak API, ödeme ağ geçidi gibi bir üçüncü tarafın iframe içinden çağrılırsa farklı olabilir.
paymentRequestId	Ödeme İsteği API'sine sağlanan PaymentDetailsInit öğesinin id özelliği. Satıcı bunları atlarsa tarayıcı otomatik olarak oluşturulan bir kimlik sağlar.
methodData	Satıcı tarafından PaymentMethodData kapsamında sağlanan ödeme yöntemine özel veriler. Ödeme işleminin ayrıntılarını belirlemek için bunu kullanın.
total	Satıcı tarafından PaymentDetailsInit kapsamında sağlanan toplam tutar. Bu bilgiyi, müşteriye ödenecek toplam tutarı bildirecek bir kullanıcı arayüzü oluşturmak için kullanın.
instrumentKey	Kullanıcı tarafından seçilen araç anahtarı. Bu, önceden sağladığınız instrumentKey miktarını yansıtır. Boş dize, kullanıcının herhangi bir araç belirtmediğini gösterir.

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() numaralı telefonu arayarak bir ödeme işleyici penceresi açabilir. Ödeme işleyici penceresinde, müşterilere kimlik doğrulaması yapabilecekleri, gönderim adresi ile seçeneklerini belirleyebilecekleri ve ödemeyi yetkilendirebilecekleri ödeme uygulamanızın arayüzü gösterilir. Ödeme ön ucunda ödemeleri yönetme (yakında) bölümünde ön uç kodunun nasıl yazılacağını ele alacağız.

Web tabanlı bir ödeme uygulamasıyla ödeme akışı.

Korunan bir sözü PaymentRequestEvent.respondWith() adlı kullanıcıya ileterek bu sorunu ileride bir ödeme sonucuyla çözebilirsiniz.

[ödeme işleyici] 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);
  };
});
…

İsteğe bağlı zamanlamada bir sözü çözüme kavuşturmak için kullanışlı bir PromiseResolver çoklu dolgusu 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_ }
}

Not: Güvenlik nedeniyle, ödeme işleyici penceresinde açılan ön uç sayfasında geçerli HTTPS sertifikaları bulunmalı ve karma içerik bulunmamalıdır. Aksi takdirde, ödeme isteği Chrome tarafından iptal edilir. Daha fazla bilgi için Web tabanlı bir ödeme uygulamasında hata ayıklama bölümüne bakın.

Ön uç ile bilgi alışverişi

Ö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.

[ödeme işleyici] service-worker.js:

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

Ön uçtan hazır sinyali alma

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

[ödeme işleyici] ön ucu:

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

[ödeme işleyici] 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 iletme

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

[ödeme işleyici] service-worker.js:

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

[ödeme işleyici] ön ucu:

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 etmesi için hizmet çalışanına bir yayınlama mesajı gönderebilir. PaymentRequestEvent.respondWith() adlı alıcıya iletilen sözü çözüme ulaştırarak sonucu satıcıya geri gönderebilirsiniz. PaymentHandlerResponse nesnesi iletin.

Mülk adı	Açıklama
methodName	Ödeme yapmak için kullanılan ödeme yöntemi kimliği.
details	Satıcının ödemeyi işleme alması için gerekli bilgileri sağlayan, ödeme yöntemine özgü verilerdir.

[ödeme işleyici] ön ucu:

  const paymentMethod = …

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

[ödeme işleyici] 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 et

Ön uç, müşterinin işlemi iptal etmesine izin vermek için hizmet çalışanına bir yayın mesajı gönderebilir. Böylece hizmet çalışanı, PaymentRequestEvent.respondWith() adlı müşteriye iletilen taahhüdü null ile çözüme kavuşturarak satıcıya işlemin iptal edildiğini bildirebilir.

[ödeme işleyici] ön ucu:

  postMessage('CANCEL_PAYMENT');

[ödeme işleyici] 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 dokümanda gördüğünüz tüm örnek kodlar, aşağıdaki çalışan örnek uygulamadan alıntılardır:

https://paymenthandler-demo.glitch.me

[ödeme işleyici] hizmet çalışanı

[ödeme işleyici] ön ucu

Denemek için:

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

Sonraki adımlar

Bu makalede, bir hizmet çalışanının ödeme işlemini nasıl düzenleyeceğini öğrendik. Bir sonraki adım, Service Worker'a daha fazla gelişmiş özelliğin nasıl ekleneceğini öğrenmektir.

• Service Worker ile isteğe bağlı ödeme bilgilerini yönetme