Payment Request API の仕組み

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 の場合、販売者はお支払い方法 IDhttps://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' }
  }
};

お支払い方法が利用可能かどうかを確認する

販売者は、支払い手順を呼び出す前に、ユーザーと環境で支払いを行う準備ができているかどうかを確認できます。

canMakePayment() を呼び出すと、オブジェクトで指定されたお支払い方法がブラウザでサポートされているかどうかがチェックされます。

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 を閉じることができます。

次回

詳しくは、ウェブ決済をご覧ください。