Google Pay のライブデモ

このページには、JavaScript や JSFiddle で編集できる Google Pay のライブデモが含まれています。

基本サンプル

以下は Google Pay ボタンの動作の基本的な例です。コードの作成方法の例については、隣接するコードを参照してください。

ボタンのサイズ変更の例

Google Pay ボタンのサイズを変更する方法は次のとおりです。buttonSizeMode プロパティを fill に設定して createButton を呼び出し、#container div でサイズを設定します。

お支払いの承認の例

以下は、お支払いを処理する前に承認する方法の例です。

お支払いを処理する前に承認する理由は、承認が失敗した場合に別のお支払い方法を選択できるようにするためです。

お支払い承認リクエストは次の手順で処理できます。

  1. PaymentOptions で onPaymentAuthorized() コールバックを登録します。
  2. PAYMENT_AUTHORIZATION コールバック インテントを指定して loadPaymentData() 関数を呼び出します。
  3. onPaymentAuthorized() コールバック ハンドラを実装します。

JSFiddle で編集リンクをクリックして、ご自分で編集して試してみてください。

動的料金設定の更新の例

動的料金設定の更新では、配送先住所と配送オプションの変更に合わせて合計金額を動的に調整できます。

動的料金設定の更新を設定するには、次の手順を行います。

  1. PaymentOptions で onPaymentAuthorized と onPaymentDataChanged の両方のコールバックを登録します。
  2. コールバック インテントを指定して loadPaymentData() 関数を呼び出します。詳しくは、対応するサンプルをご覧ください。
  3. onPaymentAuthorized と onPaymentDataChanged を実装します。

JSFiddle で編集リンクをクリックして、ご自分で編集して試してみてください。