ウェブベースの決済アプリを Web Payments に適応させ、お客様のユーザー エクスペリエンスを向上させる方法について説明します。
支払いアプリが登録されると、販売者からの支払いリクエストを受け入れる準備が整います。この投稿では、ランタイム（ウィンドウが表示され、ユーザーが操作しているとき）に Service Worker からの支払いトランザクションをオーケストレートする方法について説明します。
「ランタイムの支払いパラメータの変更」とは、ユーザーが支払いハンドラを操作している間に販売者と支払いハンドラがメッセージを交換できるようにする一連のイベントを指します。詳細については、Service Worker でオプションのお支払い情報を処理するをご覧ください。
販売者から支払いリクエスト イベントを受信する
顧客がウェブベースの決済アプリで支払うことを選択し、販売者が PaymentRequest.show() を呼び出すと、Service Worker は paymentrequest イベントを受け取ります。イベント リスナーを Service Worker に追加して、イベントをキャプチャし、次のアクションの準備をします。
[支払いハンドラ] 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;
…
保持される PaymentRequestEvent には、このトランザクションに関する重要な情報が含まれています。
| プロパティ名 | 説明 |
|---|---|
topOrigin |
最上位のウェブページの提供元（通常はお支払い受取人の販売者）を示す文字列です。これを使用して販売者の配信元を特定します。 |
paymentRequestOrigin |
呼び出し元のオリジンを示す文字列。販売者が Payment Request API を直接呼び出す場合は topOrigin と同じになりますが、支払いゲートウェイなどの第三者によって iframe 内から API を呼び出す場合は異なる可能性があります。 |
paymentRequestId |
Payment Request API に指定された PaymentDetailsInit の id プロパティ。省略すると、ブラウザから自動生成された ID が表示されます。 |
methodData |
PaymentMethodData の一部として販売者から提供されるお支払い方法固有のデータ。これを使用して、支払い取引の詳細を判断します。 |
total |
PaymentDetailsInit の一部として販売者から提示される合計金額。これを使用して、合計支払い額をお客様に伝える UI を作成します。 |
instrumentKey |
ユーザーが選択したインストルメント キー。これは、事前に指定した instrumentKey を反映しています。空の文字列は、ユーザーがインストルメンテーションを指定しなかったことを示します。 |
支払いハンドラのウィンドウを開き、ウェブベースの支払いアプリのフロントエンドを表示する
paymentrequest イベントを受信すると、決済アプリは PaymentRequestEvent.openWindow() を呼び出して支払いハンドラ ウィンドウを開くことができます。支払いハンドラ ウィンドウに、支払いアプリのインターフェースが表示されます。ユーザーは、認証、配送先住所とオプションの選択、支払いの承認を行うことができます。フロントエンド コードの記述方法については、支払いフロントエンドでの支払い処理（近日提供予定）で説明します。
将来の支払い結果で解決できるように、保持された Promise を PaymentRequestEvent.respondWith() に渡します。
[支払いハンドラ] 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);
};
});
…
便利な PromiseResolver ポリフィルを使用して、任意のタイミングで Promise を解決できます。
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_ }
}
フロントエンドと情報を交換する
決済アプリの Service Worker は、ServiceWorkerController.postMessage() を介して決済アプリのフロントエンドとメッセージを交換できます。フロントエンドからメッセージを受信するには、message イベントをリッスンします。
[支払いハンドラ] service-worker.js:
// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
if (client) client.postMessage({ type, ...contents });
}
フロントエンドから Ready シグナルを受信する
支払いハンドラのウィンドウが開いたら、Service Worker は支払いアプリのフロントエンドから準備完了状態のシグナルを待機する必要があります。Service Worker は、準備ができたら重要な情報をフロントエンドに渡すことができます。
[支払いハンドラ] frontend:
navigator.serviceWorker.controller.postMessage({
type: 'WINDOW_IS_READY'
});
[支払いハンドラ] 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;
…
トランザクションの詳細をフロントエンドに渡す
お支払いの詳細を返送します。この例では、支払いリクエストの合計のみを送信しますが、必要に応じて詳細を渡すこともできます。
[支払いハンドラ] service-worker.js:
…
// Pass the payment details to the frontend
postMessage('PAYMENT_IS_READY', { total });
break;
…
[支払いハンドラ] 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;
…
お客様のお支払い認証情報を返す
お客様が支払いを承認すると、フロントエンドは Service Worker に POST メッセージを送信して処理を続行できます。PaymentRequestEvent.respondWith() に渡された Promise を解決して、販売者に結果を返すことができます。PaymentHandlerResponse オブジェクトを渡します。
| プロパティ名 | 説明 |
|---|---|
methodName |
支払いに使用されたお支払い方法の ID。 |
details |
販売者が支払いを処理するために必要な情報を提供する、お支払い方法固有のデータ。 |
[支払いハンドラ] frontend:
const paymentMethod = …
postMessage('PAYMENT_AUTHORIZED', {
paymentMethod, // Payment method identifier
});
[支払いハンドラ] 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;
…
支払い取引をキャンセルする
ユーザーがトランザクションをキャンセルできるように、フロントエンドは Service Worker に POST メッセージを送信します。これにより、Service Worker は PaymentRequestEvent.respondWith() に渡された Promise を null で解決して、トランザクションがキャンセルされたことを販売者に通知できます。
[支払いハンドラ] frontend:
postMessage('CANCEL_PAYMENT');
[支払いハンドラ] 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;
…
サンプルコード
このドキュメントで紹介したサンプルコードはすべて、次の動作中のサンプルアプリからの抜粋です。
https://paymenthandler-demo.glitch.me
[支払いハンドラ] Service Worker
[支払いハンドラ] フロントエンド
試してみるには:
- https://paymentrequest-demo.glitch.me/ にアクセスします。
- ページの一番下に移動します。
- [支払いを追加] ボタンを押します。
- [Payment Method Identifier] フィールドに「
https://paymenthandler-demo.glitch.me」と入力します。 - 項目の横にある [Pay] ボタンを押します。
次のステップ
この記事では、Service Worker からの支払いトランザクションをオーケストレートする方法を学習しました。次のステップでは、Service Worker に高度な機能を追加する方法を学習します。