JavaScript ウェブボタン

Google Wallet API を使用すると、ユーザーがウェブから Google ウォレットにオブジェクトを追加できます。 ユーザーはウェブサイトから直接カードを追加できます。

このリファレンスでは、HTML 要素 g:savetoandroidpay の詳細について、 Google Wallet API のボタンを表示する JSON Web Token も指定できます。 記述して Google に伝えることができます。

Google Wallet API JavaScript

読み込み時に g:savetoandroidpay HTML タグを自動的に解析するには、標準の JavaScript

<script src="https://apis.google.com/js/platform.js" type="text/javascript"></script>

AJAX アプリケーションで Google Wallet API ボタンを明示的にレンダリングする場合は、"parsetags": "explicit" パラメータを追加します。

<script src="https://apis.google.com/js/platform.js" type="text/javascript">
  {"parsetags": "explicit"}
</script>

g:savetoandroidpay HTML タグ

g:savetoandroidpay 名前空間タグは、 追加先の各要素の属性を Google ウォレット ボタン。このタグは HTML と JWT をレンダリングする場合に使用します あります。

<g:savetoandroidpay jwt="JWT" onsuccess="successHandler" onfailure="failureHandler" />
フィールド 型 必須 / 省略可 説明
height 文字列 N 表示するボタンの高さ。指定できる値は small（高さ 30 ピクセル）と standard（高さ 38 ピクセル）。height のデフォルトは small です。 Google Wallet API のボタンを参照 height の設定が異なるボタンのサンプルをご覧ください。
jwt 文字列 Y Google Wallet API JWT。
onsuccess 文字列 N 保存成功のコールバックを処理する関数の文字列名。
onfailure 文字列 N 保存失敗のコールバックを処理する関数の文字列名。この関数には errorCode と errorMessage を含むエラー オブジェクト。
onprovidejwt 文字列 N 指定した JWT ハンドラ関数の文字列名。この関数の目的は オブジェクトが Google ウォレットに追加される前に、JWT データをインターセプトし、場合によっては操作する。 この関数はパラメータを取りません。また、JWT を文字列として返す必要があります。 イベント ハンドラを実装すると、元の JWT データを取得できます。 フィールド this.getOpenParams().renderData.userParams.jwt の下。
size 文字列 N 表示するボタンの幅。size を matchparent に設定できます。 親要素の幅と同じ幅になるように変更します。または、size から退出 未定義の場合は、text 設定の幅に合わせて幅が拡張されます。 Google Wallet API のボタンを参照 size の設定が異なるボタンのサンプルをご覧ください。
text 文字列 N サポート終了
textsize 文字列 N textsize=large を指定すると、 テキストサイズが大幅に増加し、 ボタンのサイズ（特別な UI 要件がある場合）
theme 文字列 N 表示するボタンのテーマ。有効な値は dark と light。デフォルトのテーマは dark です。詳しくは、 Google Wallet API のボタン theme の設定が異なるボタンのサンプルをご覧ください。

Google Wallet API JWT

Google Wallet API JWT は、保存するオブジェクトとクラスを定義します。

JSON 表現

{
  "iss": "example_service_account@developer.gserviceaccount.com",
  "aud": "google",
  "typ": "savetowallet",
  "iat": 1368029586,
  "payload": {
    "eventTicketClasses": [{
      ... //Event ticket Class JSON
    }],
    "eventTicketObjects": [{
      // Event ticket Object JSON
    }],
    "flightClasses": [{
      // Flight Class JSON
    }],
    "flightObjects": [{
      // Flight Object JSON
    }],
    "giftCardClasses": [{
      // Gift card Class JSON
    }],
    "giftCardObjects": [{
      // Gift card Object JSON
    }],
    "loyaltyClasses": [{
      // Loyalty Class JSON
    }],
    "loyaltyObjects": [{
      // Loyalty Object JSON
    }],
    "offerClasses": [{
      // Offer Class JSON
    }],
    "offerObjects": [{
      // Offer Object JSON
    }],
    "transitClasses": [{
      // Transit Class JSON
    }],
    "transitObjects": [{
      // Transit Object JSON
    }]
  },
  "origins": ["http://baconrista.com", "https://baconrista.com"]
}

フィールド

フィールド 型 必須 / 省略可 説明
iss 文字列 Y Google Cloud サービス アカウントに生成されたメールアドレス。
aud 文字列 Y オーディエンス。Google Wallet API オブジェクトのオーディエンスは常に google。
typ 文字列 Y JWT のタイプ。Google Wallet API オブジェクトのオーディエンスは常に savetowallet。
iat Integer Y 発行される時刻（エポックからの秒数）。
payload オブジェクト Y ペイロード オブジェクト。
payload.eventTicketClasses 配列 N 保存するイベント チケット クラス。
payload.eventTicketObjects 配列 N 保存するイベント チケット オブジェクト。
payload.flightClasses 配列 N 保存するフライトクラス。
payload.flightObjects 配列 N 保存するフライト オブジェクト。
payload.giftCardClasses 配列 N 保存するギフトカード クラス。
payload.giftCardObjects 配列 N 保存するギフトカード オブジェクト。
payload.loyaltyClasses 配列 N 保存するポイントクラス。
payload.loyaltyObjects 配列 N 保存するポイント オブジェクト。
payload.offerObjects 配列 N 保存するクーポン オブジェクト。
payload.offerClasses 配列 N 保存するクーポンクラス。
payload.transitObjects 配列 N 保存する交通機関オブジェクト。
payload.transitClasses 配列 N 保存する交通機関クラス。
origins 配列 Y JWT 保存機能を承認するドメインの配列。Google Wallet API origins フィールドが定義されていない場合、ボタンはレンダリングされません。方法 「X-Frame-Options により読み込みが拒否されました」というメッセージがまたは「表示を拒否」メッセージ オリジン フィールドが定義されていない場合、ブラウザ コンソールに表示されます。

エンコードされた JWT は次のようになります。

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJnb29nbGUiLCJvcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MCIsImh0dHA6Ly93d3cuZ29vZ2xlLmNvbSJdLCJpc3MiOiJzMmFwLXRvb2wuZ29vZ2xlLmNvbUBhcHBzcG90LmdzZXJ2aWNlYWNjb3VudC5jb20iLCJpYXQiOjE1NTE5ODcxNTEsInR5cCI6InNhdmV0b3dhbGxldCIsInBheWxvYWQiOnsib2ZmZXJPYmplY3RzIjpbeyJpZCI6IjMyMDI0MTMyNDE4NDM2OTk0MDEuMDFfT2ZmZXJPYmplY3RJZCJ9XX19.maHX40WWT29TC_kEb90EKQBH9AiTYAZR3153K8UI7fznVnfjVdlwsH_GKTECV3PGXdNnKCcmatUbKsONC0bxrnAHYG02kuvA1D3hSctz_amU66ntsvGIDe13mpxTzhI8fPvt9KMP1iaO7uOJuLQIHwipu4uRFAjyFaHGVaSFaP9c53qQyb_Zgyyk50M-MhH2n4kDpstNCqUJKWaadQkOWjrtMjwGzQ_ME04lbR4wb_mfK1A7Rc1UieWkxM9aMl5TOPubBKxKRRk_CqillN8XoTl9MI5RRGPuElVO28zGpYlFS6BarzDaaUfmbRZGvfF8ZiKrHZKxVrJjfZIJ2TCcDw

gapi.savetoandroidpay.render 関数

この関数を使用すると、Google Wallet API ボタンを明示的にレンダリングできます。

gapi.savetoandroidpay.render("dom-container",{
  "jwt": "JWT",
  "onsuccess": "successHandler",
  "onfailure": "failureHandler"
});
フィールド 型 必須 / 省略可 説明
dom-container 文字列 Y Google Wallet API のボタンを配置するコンテナの ID。
jwt 文字列 Y 保存するコンテンツを定義する JWT。
onsuccess 文字列 N 保存成功のコールバックを処理する関数の文字列名。
onfailure 文字列 N 保存失敗のコールバックを処理する関数の文字列名。この関数には errorCode と errorMessage を含むエラー オブジェクト。
onprovidejwt 文字列 N 指定した JWT ハンドラ関数の文字列名。この関数の目的は オブジェクトが Google ウォレットに追加される前に、JWT データをインターセプトし、場合によっては操作する。 この関数はパラメータを取りません。また、JWT を文字列として返す必要があります。 イベント ハンドラを実装すると、元の JWT データを取得できます。 フィールド this.getOpenParams().renderData.userParams.jwt の下。

Google Wallet API のエラーコードとメッセージ

次の表に、エラーで渡されるエラーコードとデフォルトのエラー メッセージを示します。 オブジェクトが JavaScript ボタンを使用して正常に保存されなかった場合に、失敗コールバック関数にそのオブジェクトを渡す必要があります。

        {
          "errorCode": "errorCode",
          "errorMessage": "errorMessage"
        }
errorCode errorMessage
SERVICE_FAILURE Google ウォレット サーバーでエラーが発生しました。
CLASS_NOT_FOUND オブジェクトで参照されているクラスが見つかりませんでした。
CLASS_MISMATCH オブジェクトが存在し、同じ型で、囲まれたクラスを参照している必要があります。
ORIGIN_MISMATCH Origin of button does not match of the origins list.（ボタンのオリジンがオリジンリストの指定と一致しません。）
INVALID_NUM_TYPES 1 つのオブジェクトの種類のみを指定できます。
INVALID_SIGNATURE 署名を確認できませんでした。
INVALID_DUPLICATE_IDS 重複するオブジェクトやクラスは許可されません。
INVALID_JWT JWT が無効です。
INVALID_EXP_IAT JWT の有効期限が切れているか、JWT が将来の日付で発行されています。
INVALID_AUD AUD フィールドの値が無効です。
INVALID_TYP TYP フィールドの値が無効です。
INVALID_NUM_OBJECTS ポイントカード、ギフトカード、クーポンには、1 つのオブジェクトと最大 1 つのクラスを指定できます。
MALFORMED_ORIGIN_URL オリジン URL の形式が正しくありません。URL にはプロトコルとドメインが必要です。
MISSING_ORIGIN Origin must be specified.（オリジンを指定する必要があります。）
MISSING_FIELDS Enclosed object or class was missing required fields.（囲まれたオブジェクトまたはクラスに必須項目がありませんでした。）

ローカライズ

JavaScript ボタンの言語は、次の基準に基づいて変わります。

  1. ユーザーが Google にログインしている場合、ボタンは ユーザーの Google アカウントのプロフィール。 ユーザーは 言語を変更 をご覧ください。
  2. ユーザーが Google にログインしていない場合、このボタンには ACCEPT-LANGUAGE 値が使用されます。 使用できます。

上記のロジックに基づいてボタンが正しい言語でレンダリングされない場合、または 言葉遣いが不自然で、 サポートチームにお問い合わせください。