このページは Cloud Translation API によって翻訳されました。

支払い取引のライフサイクル

販売者が決済アプリを統合する方法と支払い取引の仕組みについて説明します Payment Request API を通じて申請できます。

Eiji Kitamura

Milica Mihajlija

Web Payments API は、ブラウザに組み込まれた専用の決済機能です。説明します。Web Payments により、販売者は決済アプリと統合可能簡素化され、カスタマーエクスペリエンスが合理化され、安全性が向上します。

Web Payments を利用するメリットについて詳しくは、ウェブ決済機能を利用するをご覧ください。

この記事では、販売者のウェブサイトでの支払い取引について説明します。決済アプリの統合の仕組みを理解するのに役立ちます。

このプロセスには 6 つのステップがあります。

販売者が支払い取引を開始します。
販売者は支払いボタンを表示します。
お客様が支払いボタンを押します。
ブラウザで決済アプリが起動します。
お客様が詳細情報（配送オプション、住所）がある場合、販売者はその変更を反映して取引の詳細を更新します。
お客様が購入を確定したら、販売者が支払いを検証します。トランザクションを完了します

ステップ 1: 販売者が支払い取引を開始する

購入者が購入を決定すると、販売者が支払いを開始します新しいトランザクションを PaymentRequest 渡されます。このオブジェクトには、トランザクションに関する重要な情報が含まれています。

取引を処理するための支払い方法とそのデータ。
合計金額（必須）や商品アイテムに関する情報などの詳細情報。
販売者が配送情報（配送など）をリクエストできるオプション配送方法が含まれます
販売者は、請求先住所、支払人の名前、メールアドレス、あります。
販売者はオプションの送料種類（shipping、delivery、または pickup）。PaymentRequest 内。決済アプリ UI に正しいラベルを表示するためのヒントとして使用できます。

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  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' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

トランザクション ID を含める

支払いハンドラによっては、販売者による取引 ID の提供が求められる場合があります。。一般的な統合には、販売者と顧客の間でのやり取りが支払いハンドラのサーバーに送信して合計金額を予約します。これにより、悪意のある価格を操作したり、不正な方法で販売者を欺いたりすることの検証を行います。

販売者は取引 ID を PaymentMethodData オブジェクトの data プロパティ。

トランザクション情報が提供されると、ブラウザは検出を行います。支払いに基づく、PaymentRequest で指定された支払いアプリのプロセスメソッド識別子。これにより、ブラウザは決済アプリが販売者が取引を進める準備が整い次第、すぐに開始します。

調査プロセスの仕組みについて詳しくは、お支払いメソッド。

ステップ 2: 販売者が支払いボタンを表示する

販売者はさまざまな支払い方法に対応できますが、提示する必要があるのは支払いのみです。用意したものです支払いボタンを表示していますユーザーエクスペリエンスの低下につながります販売者が予測する商品の在庫が PaymentRequest オブジェクトで指定されたお支払い方法は、代替ソリューションを提供するか、ボタンをまったく表示しないようにできます。

販売者は PaymentRequest インスタンスを使用して、顧客がお支払いアプリで利用できます。

お客様は決済アプリをお持ちですか？

「 canMakePayment() PaymentRequest のメソッドは、true がお客様のデバイスに示されます「利用可能」決済アプリがお支払い方法が検出され、プラットフォーム固有の決済アプリがインストールされているウェブベースの決済アプリに登録済み。

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

ステップ 3: お客様が支払いボタンを押す

顧客が支払いボタンを押すと、販売者は show() に電話をかけます PaymentRequest インスタンスのメソッドを呼び出して、支払い UI を表示します。

最終的な合計金額が動的に設定される（たとえば、支払い UI の起動を遅らせて、合計金額が認識します。

支払い UI の起動を延期する

お支払いの延期に関するデモをご覧ください。 UI で支払います。決定します

支払い UI を延期するために、販売者は Promise を show() メソッドに渡します。ブラウザには、Promise が解決されるまで読み込みインジケーターが表示され、取引を開始できます。

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

show() の引数として Promise が指定されていない場合、ブラウザは支払い UI をすぐに起動できます。

ステップ 4: ブラウザで決済アプリが起動する

ブラウザから、プラットフォーム固有の支払いアプリまたはウェブベースの支払いアプリを起動できます。（詳しくは、どの決済アプリを使用するかを Chrome が決定する仕組みについて、起動をご覧ください）。

決済アプリの構築方法はデベロッパー次第ですが、販売者との間で発生するイベント、データの構造標準化されます。

決済アプリが起動すると、トランザクションを受け取ります。情報これをステップ 1 で PaymentRequest オブジェクトに渡します。これには以下が含まれます。

お支払い方法のデータ
合計金額
支払い方法

支払いアプリは、取引情報を使用して UI にラベルを付けます。

ステップ 5: ユーザーの行動に応じて販売者が取引明細を更新する方法

顧客は支払いなどの取引の詳細を変更できます支払い方法と配送オプションを決済アプリで登録しますお客様が変更を加える間販売者が変更イベントを受信し、取引の詳細を更新します。

販売者が受け取るイベントには次の 4 種類があります。

お支払い方法の変更イベント
配送先住所の変更イベント
配送オプションの変更イベント
販売者検証イベント

お支払い方法の変更イベント

決済アプリは複数のお支払い方法に対応でき、販売者は特別割引が適用されますこのユースケースに対応するには支払い方法の変更イベントにより、販売者に新しい支払いについて通知できるメソッドを呼び出し、割引を適用した合計価格を更新して、その価格を決済アプリに戻ります。

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

配送先住所の変更イベント

支払いアプリは、必要に応じてお客様の配送先住所を提供できます。これは、顧客は詳細を手動で入力する必要がないため、便利ですフォームに必要事項を入力し、ご希望のお支払い方法に配送先住所を保存できます。複数の販売者のウェブサイトにアクセスするのではなく、

お客様がトランザクションが開始されると、'shippingaddresschange' イベントが送信されます。必要があります。このイベントにより、販売者は送料に基づいて送料を新しい住所で合計金額を更新してから、決済アプリに戻します。

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

販売者が更新後の住所に配送できない場合は、エラーを提示できます。返されたトランザクションの詳細に error パラメータを追加して、メッセージに。

配送オプションの変更イベント

販売者は購入者に複数の配送オプションを提示でき、配送を委任できる決済アプリに提供しますさまざまな配送オプションが提示する料金やサービス名は顧客が選択できます例:

通常便 - 無料
エクスプレス配送 - 5 米ドル

お客様が決済アプリで配送オプションを更新すると、 'shippingoptionchange' イベントが販売者に送信されます。販売者は次に送料を決定し、合計金額を更新して。

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

販売者は、購入者の情報に基づいて配送先住所も含まれます。これは販売者が国内外の顧客向けにさまざまな配送オプションを用意しています。

販売者検証イベント

セキュリティを強化するため、決済アプリで事前に販売者の検証を実施できる支払いフローに進みます検証メカニズムの設計は決済アプリですが、販売者検証イベントは販売者に通知するために機能しますできます。

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

ステップ 6: 販売者が支払いを確認して取引を完了する

お客様が支払いを承認すると、show() メソッドに解決される Promise を返します。 PaymentResponse。 PaymentResponse オブジェクトには、次の情報が含まれます。

お支払い結果の詳細
配送先住所
配送オプション
連絡先情報

この時点でも、ブラウザ UI には読み込みインジケーターが表示される可能性があります。取引はまだ完了していません

支払いの失敗またはエラーのために決済アプリが終了した場合、 show() から返された Promise が拒否され、ブラウザが支払いを終了します。あります。

支払いの処理と検証

PaymentResponse の details は、返される支払い認証情報オブジェクトです。確認できます。販売者は認証情報を使用して処理または検証できる行われます。この重要なプロセスの動作は、支払いハンドラ次第です。

トランザクションの完了または再試行

取引が成功したか失敗したかを販売者が判断したら、次のいずれかを行うこともできます。

.complete() メソッドを呼び出してトランザクションを完了し、表示されます。
お客様に retry() メソッドを呼び出して、再試行してもらいます。

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

次のステップ

お支払い方法 ID を宣言する方法について詳しくは、支払い方法。
プラットフォーム固有の決済アプリを作成する方法を学習する Android 決済アプリのデベロッパーガイド
ウェブベースの決済アプリの作成方法については、ウェブベースの決済アプリデベロッパーのガイドをご覧ください。