Google Pay API for Web 101: 基本

Google Pay API for Web 101:
基本

この Codelab について

subject最終更新: 11月 13, 2024
account_circle作成者: James O’Reilly

1. はじめに

この Codelab を完了すると、Google Pay が統合された最小限のウェブサイトが完成します。このプロジェクトは、処理のために支払いサービス プロバイダに送信される可能性のある支払いトークンを取得します。

  • Google Pay API を読み込んで構成する方法
  • Google Pay ボタンを表示してクリックを処理する方法
  • Google Pay から支払いトークンをリクエストする方法

必要なもの

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

Project IDX を使って確認する

この Codelab を IDX で開く

2. HTML ページを作成する

プロジェクト ファイルを作成する

  1. パソコンに gpay-web-101 という名前のフォルダを作成し、そのフォルダ内に index.htmlmain.js という名前の 2 つの空のテキスト ファイルを作成します。ディレクトリ構造は次のようになります。
    gpay-web-101/
      index.html
      main.js
    
  2. 任意の IDE で index.html を開き、次のコードを追加します。
    <!doctype html>
    <html lang="en">

    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Google Pay API for Web 101</title>
    </head>

    <body>
      <div id="gpay-container"></div>
      <p>Transaction info and errors will be logged to the console.</p>
      <script type="text/javascript" src="main.js"></script>
      <script
        async src="https://pay.google.com/gp/p/js/pay.js"
        onload="onGooglePayLoaded()">
      </script>
    </body>

    </html>

コードの説明

  1. 空の DIV が ID gpay-container でページに追加されます。この DOM 要素は、Google Pay ボタンが追加される親要素になります。この要素は、必要に応じてウェブサイトのレイアウトに配置できます。
  2. main.js スクリプト タグは、gpay-container 要素の後に DOM に配置されます。これは、main.js がコンテナ DIV をクエリする前に、コンテナ DIV が DOM に存在することを確認するために必要です。また、スクリプトは同期型であるため、読み込みが完了する前に onGooglePayLoaded() メソッドが存在する必要があるため、pay.js の読み込み前に読み込まれます。同じ効果を得る方法は他にもありますが、ここでは説明しません。
  3. 最後に、pay.js が非同期で読み込まれ、onGooglePayLoaded()onload ハンドラとして構成されます。このメソッドは main.js で定義されます。

3. Google Pay を設定する

Google Pay の支払いリクエストには、リクエスト オブジェクトが必要です。ここで baseGooglePayRequest として定義されているオブジェクトには、すべてのリクエストに共通する最小設定が含まれています。リクエストに応じて追加の設定が追加されます。この Codelab では、その設定について説明します。

Google Pay の構成定数を空の main.js ファイルに追加します。

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

コードの説明

  1. 定数変数 GPAY_BUTTON_CONTAINER_ID を、HTML ページで Google Pay ボタンの親コンテナとして使用される DOM 要素の ID に設定します。
  2. アプリケーションに関連する設定を使用して、構成オブジェクト baseGooglePayRequest を作成します。各プロパティと値については、リファレンス ドキュメントをご覧ください。この例に示す値は、お客様のニーズに完全に一致しない場合がありますので、慎重に確認してください。
  3. merchantId プロパティと merchantName プロパティを独自の値で更新します。環境が TEST の場合、これらのフィールドは省略可能です。

リソース

4. お支払いクライアントを追加する

支払いクライアントは、支払いリクエストの送信とコールバックの登録に使用されます。この Codelab では、支払いリクエストのみを行います。また、支払いデータや承認が変更されたときに処理するように PaymentDataCallbacks を設定することもできます。ただし、これらの高度なトピックについては、この Codelab では説明しません。

次のクライアント コードを main.js の一番下に追加します。

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

コードの説明

  1. paymentsClient 変数は、作成されたインスタンスをクライアントに保持します。この変数にはコードから直接アクセスせず、常に getGooglePaymentsClient() メソッドからアクセスします。
  2. getGooglePaymentsClient() メソッドは、クライアントがすでにインスタンス化されているかどうかを確認し、そのインスタンスを返します。インスタンス化されていない場合は、インスタンスが作成され、保存されて返されます。この方法では、このスクリプトの存続期間を通じて 1 つのインスタンスのみが作成され、使用されます。
  3. クライアントをインスタンス化するには、PaymentsClient() メソッドを呼び出します。この例では、TEST 環境にいることをクライアントに伝えています。代替手段は PRODUCTION です。ただし、TEST はデフォルトであり、省略可能です。

5. ヘルパーを追加する

次のヘルパー関数はスクリプトの後半で使用されます。これらの関数は、コードの読みやすさとメンテナンス性を高める目的でのみ追加されています。

ヘルパー関数を main.js の末尾に追加します。

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

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

コードの説明

  1. deepCopy() は、JSON のシリアル化と逆シリアル化を使用して、指定されたオブジェクトのディープコピーを作成するユーティリティです。共有参照を気にせずにオブジェクトのクローンを作成できる便利な方法です。
  2. renderGooglePayButton() は、createButton() ライブラリ メソッドを呼び出して Google Pay ボタンを表示するユーティリティです。渡される引数は、ボタンの動作を定義する一連のオプションです。たとえば、ボタンのクリックを処理する onGooglePaymentButtonClicked() 関数を登録します。

6. イベント ハンドラを追加する

このスクリプトでは、2 つのイベント ハンドラを構成します。1 つ目は pay.js ライブラリの読み込みが完了したときに呼び出され、もう 1 つは Google Pay ボタンがクリックされたときに呼び出されます。

イベント ハンドラを main.js の末尾に追加します。

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

コードの説明

  1. onGooglePayLoaded() は、HTML ファイルで定義されているように pay.js スクリプトの読み込みが完了すると呼び出されます。isReadyToPay() メソッドが呼び出され、Google Pay ボタンを表示するかどうかが判断されます。購入者がお支払い可能である場合(つまり、Google ウォレットにお支払い方法を追加している場合)、Google Pay ボタンが表示されます。
  2. onGooglePaymentButtonClicked() は、Google Pay ボタンがクリックされたときに呼び出されます。このメソッドは、支払いトークンの取得に使用される loadPaymentData() ライブラリ メソッドを呼び出します。支払いトークンを取得したら、決済ゲートウェイに送信して取引を処理します。transactionInfo は、このボタンのクリックで処理する必要があるトランザクションを表します。

7. まとめ

これでこの Codelab は終了です。Google Pay APi をウェブサイトに統合する方法について学習しました。

プロジェクトを実行する

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 のサイトにアクセスします。

次のステップ

参考情報