Payment Request API の仕組みの概要を説明します。
Payment Request API
ユーザーが販売者のウェブサイトで何かを購入しようとすると、サイトでは支払い情報や配送設定などの情報の提供をユーザーに求める必要があります。これは、Payment Request API（PR API）を使用して簡単かつ迅速に行うことができます。
基本構造
PaymentRequest オブジェクトを作成するには、お支払い方法とお支払い情報の 2 つのパラメータが必要です。また、3 つ目の支払いオプション パラメータは省略可能です。基本的なリクエストは次のように作成できます。
const request = new PaymentRequest(paymentMethods, paymentDetails);
では、各パラメータがどのように作成、使用されるかを見てみましょう。
お支払い方法
最初のパラメータの paymentMethods は配列変数内のサポートされているお支払い方法のリストです。配列内の各要素は、supportedMethods と、必要に応じて data の 2 つのコンポーネントで構成されます。
supportedMethods の場合、販売者はお支払い方法 ID（https://bobbucks.dev/pay など）を指定する必要があります。data の存在と内容は、supportedMethods の内容と決済アプリ プロバイダの設計によって異なります。
決済アプリ プロバイダは、両方の情報を提供する必要があります。
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
お支払いの詳細
2 番目のパラメータ paymentDetails はオブジェクトとして渡され、トランザクションの支払いの詳細を指定します。必須の値 total は、顧客の合計請求額を指定します。このパラメータでは、必要に応じて購入アイテムを一覧表示することもできます。
以下の例では、任意の購入アイテムのリスト（この場合は 1 つのアイテムのみ）と必要な合計金額が表示されています。どちらの場合も、通貨単位は個々の金額で指定されます。
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
お支払い方法が利用できるかどうかを確認する
Chrome は、PaymentRequest オブジェクトの構築中に、ユーザーと環境が支払いを行う準備ができているかどうかを確認します。
ユーザーと環境が支払いを行う準備ができているかどうかを確認するには、支払い手順を呼び出す前に canMakePayment() を呼び出します。オブジェクトで指定されたお支払い方法が 1 つ以上ブラウザでサポートされている場合、canMakePayment() を呼び出すと true が返されます。
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
MDN の PaymentRequest.canMakePayment() について
show() メソッド
上記のように 2 つのパラメータを設定して request オブジェクトを作成したら、決済アプリのユーザー インターフェースを表示する show() メソッドを呼び出します。
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
決済アプリのユーザー インターフェースの外観は、決済アプリ プロバイダによって異なります。顧客が支払いに同意すると、送金に必要なすべての情報を含む JSON オブジェクトが販売者に渡されます。販売者は PSP に送金して支払いを処理します。
最後に、PSP から返された結果に応じて response.complete('success') または response.complete('fail') を使用してプロセスを完了し、支払いリクエスト UI を閉じることができます。
次回
詳しくは、ウェブ決済をご覧ください。