Payment Request API の仕組み

Payment Request API の仕組みの概要を学びます。

ユーザーがウェブサイトで商品を購入しようとすると、サイトはユーザーに支払い情報の提供を求める必要があります。また、必要に応じて、配送設定などの他の情報を提供するよう求める必要があります。これは、Payment Request API(PR API)を使用して簡単に実現できます。

基本構造

PaymentRequest オブジェクトを作成するには、支払い方法支払いの詳細の 2 つのパラメータが必要です。また、3 つ目のpayment options パラメータは省略可能です。基本的なリクエストは次のように作成できます。

const request = new PaymentRequest(paymentMethods, paymentDetails);

各パラメータの作成方法と使用方法を見てみましょう。

お支払い方法

最初のパラメータ paymentMethods は、サポートされている支払い方法のリスト(配列変数)です。配列内の各要素は、supportedMethodsdata の 2 つのコンポーネントで構成されます(data は省略可)。

supportedMethods の場合、販売者は https://bobbucks.dev/pay などのお支払い方法 ID を指定する必要があります。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 を閉じます。

次のステップ

詳しくは、ウェブ決済についての記事をご覧ください。