Payment Request API の仕組み

Payment Request API の仕組みの概要を説明します。

Eiji Kitamura

Payment Request API

ユーザーが貴社のウェブサイトで何かを購入しようとするとき、サイトで尋ねられるのは 支払い情報、および必要に応じてその他の情報を提供 配送設定などの追加情報が必要ですこれは、 Payment Request API（PR API）。

基本構造

PaymentRequest オブジェクトを作成するには、次の 2 つのパラメータが必要です。payment お支払い方法とお支払い情報を確認します。3 つ目のお支払い方法のパラメータに オプションです。基本的なリクエストは次のように作成できます。

const request = new PaymentRequest(paymentMethods, paymentDetails);

では、各パラメータがどのように作成、使用されるかを見てみましょう。

お支払い方法

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

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()。発信中 canMakePayment() は、ブラウザが少なくとも 1 つの支払いをサポートしている場合に 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 に送金して支払いを処理します。

最後に、 response.complete('success') または response.complete('fail') に応じて、 返されます。

次のステップ

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