Service Worker での支払い情報(省略可)の処理

ウェブベースの決済アプリを Web Payments に適応させ、お客様のユーザー エクスペリエンスを向上させる方法について説明します。

ウェブベースの決済アプリが支払いリクエストを受信し、支払いを開始すると、 トランザクションを処理すると、Service Worker は 販売者と決済アプリ間のコミュニケーションのハブとして機能します。この投稿 決済アプリが支払い方法に関する情報を 配送先住所や連絡先情報を Service Worker で販売者に送信できます。

<ph type="x-smartling-placeholder">
</ph> Service Worker でオプションの支払い情報を処理する <ph type="x-smartling-placeholder">
</ph> Service Worker でオプションの支払い情報を処理する
をご覧ください。

お支払い方法の変更を販売者に通知する

決済アプリは、異なるお支払い方法で複数のお支払い方法をサポートできます。

顧客 お支払い方法 支払い方法
A クレジット カード発行会社 1 ****1234
クレジット カード発行会社 1 ****4242
銀行 X ******123
B クレジット カード発行会社 2 ****5678
銀行 X ******456

たとえば、上の表では、お客様 A のウェブベースのウォレットに 2 つのクレジットがあります。 1 つの銀行口座が登録されているこの例では、アプリは 3 つの お支払い方法(****1234****4242******123)と 2 件のお支払い (クレジット カード発行者 1 と銀行 X)。支払い取引では、支払いは アプリでいずれかの支払い方法を選択し、その支払い方法を使用して支払う 自動的に適用されます

<ph type="x-smartling-placeholder">
</ph> お支払い方法選択 UI <ph type="x-smartling-placeholder">
</ph> お支払い方法選択 UI
をご覧ください。

この決済アプリは、購入者がどの支払い方法を使っているかを販売者に知らせることができます。 選択することもできます。これは、 販売者が特定の支払い方法のブランドの割引キャンペーンを実施したいと考えている場合 できます。

Payment Handler API を使用すると、決済アプリが「お支払い方法の変更」を送信できます。 イベントを Service Worker 経由で販売者に送り、新しいお支払い方法に あります。Service Worker は、すべての Pod を 新しいお支払い方法で PaymentRequestEvent.changePaymentMethod() 情報です。

<ph type="x-smartling-placeholder">
</ph> お支払い方法の変更を販売者に通知する <ph type="x-smartling-placeholder">
</ph> お支払い方法の変更を販売者に通知する
をご覧ください。

決済アプリは、オプションの 2 番目の引数として methodDetails オブジェクトを渡すことができます。 (PaymentRequestEvent.changePaymentMethod())このオブジェクトには、 販売者が変更を処理するために必要な任意のお支払い方法の詳細情報 イベントです。

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] service-worker.js


// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      
      case 'PAYMENT_METHOD_CHANGED':
        const newMethod = e.data.paymentMethod;
        const newDetails = e.data.methodDetails;
        // Redact or check that no sensitive information is passed in
        // `newDetails`.
        // Notify the merchant of the payment method change
        details =
          await payment_request_event.changePaymentMethod(newMethod, newDetails);
      

販売者が Payment から paymentmethodchange イベントを受け取ったとき Request API を介して、支払いの詳細を更新し、 PaymentDetailsUpdate 渡されます。

<ph type="x-smartling-placeholder"></ph> [販売者]

request.addEventListener('paymentmethodchange', e => {
  if (e.methodName === 'another-pay') {
    // Apply $10 discount for example.
    const discount = {
      label: 'special discount',
      amount: {
        currency: 'USD',
        // The value being string complies the spec
        value: '-10.00'
      }
    };
    let total = 0;
    details.displayItems.push(discount);
    for (let item of details.displayItems) {
     total += parseFloat(item.amount.value);
    }
    // Convert the number back to string
    details.total.amount.value = total.toString();
  }
  // Pass a promise to `updateWith()` and send updated payment details
  e.updateWith(details);
});

販売者から応答があると、 PaymentRequestEvent.changePaymentMethod() エラーは PaymentRequestDetailsUpdate 渡されます。

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] service-worker.js


        // Notify the merchant of the payment method change
        details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;

このオブジェクトを使用してフロントエンドの UI を更新します。詳細については、更新後の お支払いの詳細

配送先住所の変更を販売者に通知する

支払いアプリは、支払い情報の一部としてお客様の配送先住所を販売者に提供できる 関連付ける。

販売者が住所の収集を 決済アプリまた、住所データは標準の データ形式、 一貫した構造で配送先住所を受け取ることができる。

さらに、お客様は住所情報を 別の販売者で再利用できます。

<ph type="x-smartling-placeholder">
</ph> 配送先住所選択 UI <ph type="x-smartling-placeholder">
</ph> 配送先住所選択 UI
をご覧ください。

決済アプリでは、配送先住所を編集するための UI や、 お客様の支払い取引時に事前に登録された住所情報。 配送先住所が一時的に決定されると、決済アプリは 削除された住所の情報を販売者に知らせます。これにより販売者は さまざまなメリットがもたらされます。

  • 販売者は、購入者が地域ごとの制限を満たしているかどうかを判断できます。 商品の配送(国内のみなど)。
  • 販売者は、配送オプションのリストを 配送先住所(例: 国際標準、エクスプレス)。
  • 販売者は住所に基づいて新しい送料を適用し、 合計金額。

Payment Handler API を使用すると、決済アプリが配送先住所を送信する際に、 変更」新しい配送を通知するため、Service Worker から販売者に あります。Service Worker は、すべての Pod を PaymentRequestEvent.changeShippingAddress() 新しい住所 オブジェクト

<ph type="x-smartling-placeholder">
</ph> 配送先住所の変更を販売者に通知する <ph type="x-smartling-placeholder">
</ph> 配送先住所の変更を販売者に通知する
をご覧ください。

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] service-worker.js

...
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      
      case 'SHIPPING_ADDRESS_CHANGED':
        const newAddress = e.data.shippingAddress;
        details =
          await payment_request_event.changeShippingAddress(newAddress);
      

販売者は Payment から shippingaddresschange イベントを受け取ります。 API をリクエストして、更新された PaymentDetailsUpdate で応答できるようにします。

<ph type="x-smartling-placeholder"></ph> [販売者]

request.addEventListener('shippingaddresschange', e => {
  // Read the updated shipping address and update the request.
  const addr = request.shippingAddress;
  const details = getPaymentDetailsFromShippingAddress(addr);
  // `updateWith()` sends back updated payment details
  e.updateWith(details);
});

販売者が応答すると、Promise は PaymentRequestEvent.changeShippingAddress() エラーは PaymentRequestDetailsUpdate 渡されます。

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] service-worker.js


        // Notify the merchant of the shipping address change
        details = await payment_request_event.changeShippingAddress(newAddress);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;

このオブジェクトを使用してフロントエンドの UI を更新します。詳細については、更新後の お支払いの詳細

配送オプションの変更を販売者に通知する

配送オプションとは、販売者が購入した商品を購入者に配送するために使用する配送方法のことです。一般的な配送オプションは次のとおりです。

  • 送料無料
  • エクスプレス配送
  • 国外配送について
  • プレミアムな海外配送

それぞれに費用がかかります。通常、高速なメソッド/オプションほど費用がかかります。

Payment Request API を使用している販売者は、この選択を支払いに委任できます 。決済アプリはこの情報を使用して UI を作成し、 顧客は配送オプションを選択できます

<ph type="x-smartling-placeholder">
</ph> 配送オプション選択 UI <ph type="x-smartling-placeholder">
</ph> 配送オプション選択 UI
をご覧ください。

販売者の Payment Request API で指定された配送オプションのリストは、 プロパティの Service Worker に伝播される PaymentRequestEvent

<ph type="x-smartling-placeholder"></ph> [販売者]

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: { transactionId: '****' }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  shippingOptions: [{
    id: 'standard',
    label: 'Standard',
    amount: { value: '0.00', currency: 'USD' },
    selected: true
  }, {
    id: 'express',
    label: 'Express',
    amount: { value: '5.00', currency: 'USD' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {  requestShipping: true });

この決済アプリは、購入者がどの配送オプションを注文しているかを販売者に知らせることができます 選択します。これは販売者と顧客の双方にとって重要です。なぜなら 送料オプションを変更すると 合計金額も変更されます販売者のニーズ 後でお支払い確認の最新の料金が通知され、 顧客にも変更を知らせる必要があります。

Payment Handler API を使用すると、決済アプリが「配送オプション」と 変更」イベントを Service Worker から販売者に送信できます。Service Worker は、 呼び出す PaymentRequestEvent.changeShippingOption() 新しい配送オプション ID に置き換えます

<ph type="x-smartling-placeholder">
</ph> 配送オプションの変更を販売者に通知する <ph type="x-smartling-placeholder">
</ph> 配送オプションの変更を販売者に通知する
をご覧ください。

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] service-worker.js


// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      
      case 'SHIPPING_OPTION_CHANGED':
        const newOption = e.data.shippingOptionId;
        details =
          await payment_request_event.changeShippingOption(newOption);
      

販売者は Payment から shippingoptionchange イベントを受け取ります。 リクエスト API。販売者はこの情報を使用して合計金額を更新する必要があります 更新された PaymentDetailsUpdate

<ph type="x-smartling-placeholder"></ph> [販売者]

request.addEventListener('shippingoptionchange', e => {
  // selected shipping option
  const shippingOption = request.shippingOption;
  const newTotal = {
    currency: 'USD',
    label: 'Total due',
    value: calculateNewTotal(shippingOption),
  };
  // `updateWith()` sends back updated payment details
  e.updateWith({ total: newTotal });
});

販売者から応答があると、 PaymentRequestEvent.changeShippingOption() エラーは PaymentRequestDetailsUpdate 渡されます。

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] service-worker.js


        // Notify the merchant of the shipping option change
        details = await payment_request_event.changeShippingOption(newOption);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;

このオブジェクトを使用してフロントエンドの UI を更新します。詳細については、更新後の お支払いの詳細

更新されたお支払い情報を反映させる

販売者が支払いの詳細の更新を完了すると、Promise が返されます。 .changePaymentMethod().changeShippingAddress().changeShippingOption() は共通で解決されます。 PaymentRequestDetailsUpdate 渡されます。支払いハンドラは、結果を使用して更新された合計金額を反映できる 配送オプションも確認しました

販売者がエラーを返す理由はいくつかあります。

  • このお支払い方法は利用できません。
  • 配送先住所がサポート対象地域外である。
  • 配送先住所に無効な情報が含まれています。
  • 指定された配送先住所または 理由があります。

エラー ステータスを反映するには、次のプロパティを使用します。

  • error: 人が読めるエラー文字列。表示する最適な文字列です お客様に提供しています。
  • shippingAddressErrors: AddressErrors address プロパティごとの詳細エラー文字列を含むオブジェクト。これは、 顧客が住所を編集できるフォームを開くのに便利です 無効なフィールドを直接指定する必要があります
  • paymentMethodErrors: お支払い方法固有のエラー オブジェクト。Google アシスタントに 販売者は構造化エラーを提示できますが、Web Payments の仕様の作成者は 単純な文字列のままにすることをおすすめします。

サンプルコード

このドキュメントでご覧いただいたサンプルコードのほとんどは、以下からの抜粋です。 動作中のサンプルアプリ:

https://paymenthandler-demo.glitch.me

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] Service Worker

<ph type="x-smartling-placeholder"></ph> [支払いハンドラ] フロントエンド

試してみるには:

  1. https://paymentrequest-demo.glitch.me/ にアクセスします。
  2. ページの一番下に移動します。
  3. [支払いを追加] ボタンを押します。
  4. [Payment Method Identifier] フィールドに「https://paymenthandler-demo.glitch.me」と入力します。
  5. 項目の横にある [Pay] ボタンを押します。