Payment Request API の概要

Eiji Kitamura

お客様がウェブサイトで商品を購入しようとした場合、サイトではお客様に支払い情報の提供を求め、必要に応じて配送方法などのその他の情報の提供を求める必要があります。この処理は、Payment Request API（PR API）を使用すると迅速に実現できます。

基本的なお支払いの仕組み

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

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

お支払い方法

最初のパラメータ paymentMethods は、配列変数内のサポートされているお支払い方法のリストです。配列内の各要素は、supportedMethods と、必要に応じて data の 2 つのコンポーネントで構成されます。

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') でプロセスを完了して、Payment Request UI を閉じます。

次のステップ

詳しくは、Web Payments をご覧ください。