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

Google Pay for Web 201: 上級者向け

1. はじめに

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

学習内容

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

必要なもの

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

Project IDX を使って確認する

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

ButtonOptions の概要は次のとおりです。詳細な説明については、ドキュメントをご覧ください

オプション	必要性	値
_trackEvent()	必須	JavaScript イベントハンドラの名前
allowedPaymentMethods	任意	`PaymentMethod[]`
buttonColor	任意	デフォルト、黒、白
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	任意	静的、塗りつぶし
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);
}

コードの説明

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

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

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

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

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

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

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

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

最後に、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.'
    },
  ],
},

コードの説明

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

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);
  });
}

コードの説明

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

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);
  });
}

コードの説明

onPaymentDataChanged() 関数は IntermediatePaymentData を引数として受け取ります。この関数は、支払いシートで配送先住所または配送オプションが変更されたときに呼び出されます。
onPaymentDataChanged() 関数は、支払いシートを更新する新しい取引情報、配送オプション、エラーを指定する PaymentDataRequestUpdate オブジェクトを解決するプロミスを返す必要があります。
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 関連動画を視聴する

Google Pay for Web 201: 上級者向け

1. はじめに

学習内容

必要なもの

Project IDX を使って確認する

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

コードの説明

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

コードの説明

4. お支払いの承認

コードの説明

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

コードの説明

6. まとめ

プロジェクトを実行する

Google Chrome でテストする

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

次のステップ

参考情報

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