この Codelab について
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 を使って確認する
2. HTML ページを作成する
プロジェクト ファイルを作成する
- パソコンに
gpay-web-101
という名前のフォルダを作成し、そのフォルダ内にindex.html
とmain.js
という名前の 2 つの空のテキスト ファイルを作成します。ディレクトリ構造は次のようになります。gpay-web-101/ index.html main.js
- 任意の 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>
コードの説明
- 空の DIV が ID
gpay-container
でページに追加されます。この DOM 要素は、Google Pay ボタンが追加される親要素になります。この要素は、必要に応じてウェブサイトのレイアウトに配置できます。 main.js
スクリプト タグは、gpay-container
要素の後に DOM に配置されます。これは、main.js
がコンテナ DIV をクエリする前に、コンテナ DIV が DOM に存在することを確認するために必要です。また、スクリプトは同期型であるため、読み込みが完了する前にonGooglePayLoaded()
メソッドが存在する必要があるため、pay.js
の読み込み前に読み込まれます。同じ効果を得る方法は他にもありますが、ここでは説明しません。- 最後に、
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);
コードの説明
- 定数変数
GPAY_BUTTON_CONTAINER_ID
を、HTML ページで Google Pay ボタンの親コンテナとして使用される DOM 要素の ID に設定します。 - アプリケーションに関連する設定を使用して、構成オブジェクト
baseGooglePayRequest
を作成します。各プロパティと値については、リファレンス ドキュメントをご覧ください。この例に示す値は、お客様のニーズに完全に一致しない場合がありますので、慎重に確認してください。 merchantId
プロパティとmerchantName
プロパティを独自の値で更新します。環境がTEST
の場合、これらのフィールドは省略可能です。
リソース
- ブログ投稿: Google Pay でスムーズにご購入手続きを完了するには、お支払いオプションを設定しましょう。
- API リファレンス: Google Pay API のリクエスト オブジェクトのドキュメント
- API リファレンス: 許可される認証方法、許可されるカード ネットワーク、適切なゲートウェイ値を含むトークン化仕様については、
PaymentMethod
をご覧ください。
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;
}
コードの説明
paymentsClient
変数は、作成されたインスタンスをクライアントに保持します。この変数にはコードから直接アクセスせず、常にgetGooglePaymentsClient()
メソッドからアクセスします。getGooglePaymentsClient()
メソッドは、クライアントがすでにインスタンス化されているかどうかを確認し、そのインスタンスを返します。インスタンス化されていない場合は、インスタンスが作成され、保存されて返されます。この方法では、このスクリプトの存続期間を通じて 1 つのインスタンスのみが作成され、使用されます。- クライアントをインスタンス化するには、
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);
}
コードの説明
deepCopy()
は、JSON のシリアル化と逆シリアル化を使用して、指定されたオブジェクトのディープコピーを作成するユーティリティです。共有参照を気にせずにオブジェクトのクローンを作成できる便利な方法です。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);
}
コードの説明
onGooglePayLoaded()
は、HTML ファイルで定義されているようにpay.js
スクリプトの読み込みが完了すると呼び出されます。isReadyToPay()
メソッドが呼び出され、Google Pay ボタンを表示するかどうかが判断されます。購入者がお支払い可能である場合(つまり、Google ウォレットにお支払い方法を追加している場合)、Google Pay ボタンが表示されます。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
のサイトにアクセスします。
次のステップ
参考情報
- Discord の #payments チャンネルで会話に参加する
- X で @GooglePayDevs をフォロー
- YouTube で Google Pay 関連動画を視聴する