ServiceWorkerGlobalScope: paymentrequest イベント

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はサービスワーカー内でのみ利用可能です。

paymentrequest は ServiceWorkerGlobalScope インターフェイスのイベントで、PaymentRequest.show() メソッドを介して販売者ウェブサイト上で決済フローが開始された場合に決済アプリ上で発生します。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("paymentrequest", (event) => {});

onpaymentrequest = (event) => {};

イベント型

PaymentRequestEvent です。ExtendableEvent から継承しています。

Event ExtendableEvent PaymentRequestEvent

例

PaymentRequest.show() メソッドが呼び出されると、決済アプリのサービスワーカーに決済リクエストイベントが発行されます。このイベントは、決済アプリのサービスワーカー内でリスニングされ、決済プロセスの次の段階に入ります。

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;

  // ...
});

paymentrequest イベントを受信すると、決済アプリは PaymentRequestEvent.openWindow() を呼んで決済ハンドラーウィンドウを開くことができます。決済ハンドラーウィンドウには、顧客が認証をしたり、配送先住所やオプションを選べたり、決済を承認したりできる、決済アプリのインターフェイスが表示されます。

決済が処理されたら、PaymentRequestEvent.respondWith() を使用して、決済結果を販売者のウェブサイトに渡します。

この段階の詳細については、 Receive a payment request event from the merchant を参照してください。

仕様書

Specification
Payment Handler API
# the-paymentrequestevent

ブラウザーの互換性

BCD tables only load in the browser

関連情報