Google Pay API for Web 201: 上級

1. はじめに

この Codelab は、ウェブ用 Google Pay API 101: 基本の続きであり、その Codelab で作成されたコードを使用します。この Codelab を完了するには、まずそちらを完了してください。

学習内容

• Google Pay ボタンをカスタマイズする方法
• お支払い手続きを開始する方法
• 支払い承認ステータスを確認する方法
• 配送先住所の変更に対応する方法
• 利用コードの処理方法

必要なもの

• HTML ファイルと JavaScript ファイルを編集するための任意のテキスト エディタ。
• Google Chrome ウェブブラウザ、またはローカル ウェブサイトをテストする別の方法。
• 本番環境では、Google Pay の merchantId が必要になります。Google Pay & Wallet Console での登録は 1 分で完了します。今すぐ登録しましょう。

Firebase Studio を使用して手順を確認する

2. ボタンのカスタマイズ

これは、ButtonOptions の簡単な概要です。詳細についてはドキュメントを参照してください

オプション	必要性	値
_trackEvent()	必須	JavaScript イベント ハンドラの名前
allowedPaymentMethods	任意	PaymentMethod[]
buttonColor	任意	default、black、white
buttonLocale	任意	2 文字の ISO 639-1 コード。 サポートされている言語 / 地域は、en、ar、bg、ca、cs、da、de、el、es、et、fi、fr、hr、id、it、ja、ko、ms、nl、no、pl、pt、ru、sk、sl、sr、sv、th、tr、uk、zh です。
buttonRadius	任意	0～100
buttonRootNode	任意	HTMLDocument または ShadowRoot
buttonSizeMode	任意	static、fill
buttonType	任意	予約、購入、お支払い、寄付、注文、支払い、プレーン、定期購入

main.js ファイルで renderGooglePayButton() メソッドを探し、ここに記載されているコードに置き換えます。

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

コードの説明

1. createButton() ライブラリ メソッドは、ボタンの見た目と動作を定義できる ButtonOptions 構成引数を取ります。

3. 支払いデータのコールバック

お支払いクライアントには、特定のイベントが発生したときに処理する関数を登録するメカニズムが用意されています。1 つ目は支払いの承認、2 つ目は支払いデータの変更です。

1. main.js で // todo: paymentDataCallbacks のコメントを見つけて、次のコードに置き換えます。

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. 次に、main.js の Event Handlers セクションを見つけて、セクションの末尾に次のコードを追加します。

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. 最後に、main.js 内の // todo: callbackIntents コメントを見つけて、次のコードに置き換えます。この Codelab では、4 つのインテントすべてを実装します。

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

コードの説明

1. PaymentDataCallbacks プロパティには、支払い承認コールバックと支払いデータ変更コールバックの 2 つのサブプロパティがあります。
2. コールバックを実装する場合、onPaymentAuthorized は必須です。このコールバックは、callbackIntents リストの PaymentDataRequest に PAYMENT_AUTHORIZATION が含まれている場合に呼び出されます。
3. onPaymentDataChanged は省略可能です。このコールバックは、callbackIntents リストの PaymentDataRequest に OFFER、SHIPPING_ADDRESS、または SHIPPING_OPTION が含まれている場合に呼び出されます。
4. PaymentDataRequest の callbackIntents を設定して、この Codelab の両方のコールバックをトリガーします。

4. お支払いの承認

支払い承認は、支払いプロセスを開始し、支払い承認ステータスを確認するために使用されます。

前の手順で追加した main.js の onPaymentAuthorized() 関数を見つけて、次のコードに置き換えます。

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

コードの説明

1. onPaymentAuthorized() コールバック関数は PaymentData 引数で呼び出され、Promise を返す必要があります。この例では、関数は成功またはエラーを返すかどうかをランダムに選択しています。プロジェクトでは、この機会を利用して、paymentData.paymentMethodData.tokenizationData.token の paymentData で見つかったトークンを使用して、ゲートウェイでトランザクションを処理します。

5. お支払いデータの変更

動的料金設定の更新では、選択した配送先住所に基づいて配送オプションや取引情報を動的に更新できます。また、選択した配送オプションに基づいて取引情報を動的に更新することもできます。

前の手順で追加した main.js の onPaymentDataChanged() 関数を見つけて、次のコードに置き換えます。

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

1 回の loadPaymentData() の呼び出しで INITIALIZE コールバックが複数回トリガーされる場合があります。したがって、このコールバックが複数回呼び出されても、それを処理できるようにする必要があります。たとえば、ユーザーがアカウントを変更すると、onPaymentDataChanged() が設定された INITIALIZE が再度呼び出され、新しいアカウントのデータが通知されます。

コードの説明

1. onPaymentDataChanged() 関数は IntermediatePaymentData を引数として受け取ります。この関数は、支払いシートで配送先住所または配送オプションが変更されたときに呼び出されます。
2. onPaymentDataChanged() 関数は、新しい取引情報、配送オプション、エラーを指定して支払いシートを更新する PaymentDataRequestUpdate オブジェクトを解決する Promise を返す必要があります。
3. redemptionCodes は、お支払いシートに入力されたプロモーション コードのセットです。すでに承認されているコードが含まれます。

6. まとめ

これでこの Codelab は終了です。ここでは、次の方法を学習しました。

プロジェクトの実行

Google Chrome でテストする

Google Chrome ウェブブラウザを使用して、Chrome のメインメニューから [ファイル] > [ファイルを開く...] を選択して index.html を開きます。このようにプロジェクトを開くと、Chrome は main.js を実行します。他のウェブブラウザでは JavaScript の実行が許可されない場合があります。

– または –

ローカル ウェブサーバーでテストする

Python がインストールされている場合は、ルート pay-web-101 フォルダのターミナル プロンプトから python3 -m http.server を実行します。

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

その後、http://localhost:8000 でサイトにアクセスします。

次のステップ

• 統合チェックリストを確認する

参考情報

• Discord の #payments チャンネルで会話に参加する
• X で @GooglePayDevs をフォローする
• YouTube で Google Pay 関連の動画を視聴する