JavaScript ウェブボタン

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

このリファレンスでは、Google Wallet API ボタンを表示する HTML 要素 g:savetoandroidpay と、ウェブサービスを Google に送信する JSON Web Token について詳しく説明します。

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 です。height の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。
jwt 文字列 ○ 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 に設定すると、親要素の幅と同じ幅にできます。または、text 設定の幅に合わせて拡張する場合は、size を未定義のままにします。size の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。
text 文字列 N 非推奨
textsize 文字列 N textsize=large を指定すると、特別な UI が必要な場合のために、テキストサイズとボタンのサイズが大幅に大きくなります。
theme 文字列 N 表示するボタンのテーマ。有効な値は dark と light です。デフォルトのテーマは dark です。theme の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。

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 文字列 ○ Google Cloud サービス アカウントで生成されたメールアドレス。
aud 文字列 ○ オーディエンスGoogle Wallet API オブジェクトのオーディエンスは常に google になります。
typ 文字列 ○ JWT のタイプ。Google Wallet API オブジェクトのオーディエンスは常に savetowallet になります。
iat Integer ○ 発行時刻（エポックからの秒数）。
payload オブジェクト ○ ペイロード オブジェクト。
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 配列 ○ JWT 保存機能を承認するドメインの配列。origins フィールドが定義されていない場合、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 文字列 ○ Google Wallet API ボタンを配置するコンテナの ID。
jwt 文字列 ○ 保存するコンテンツを定義する 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 one specified in the origins list.（ボタンのオリジンがオリジンリストの指定と一致しません。）
INVALID_NUM_TYPES 指定できるオブジェクト タイプは 1 つだけです。
INVALID_SIGNATURE 署名を確認できませんでした。
INVALID_DUPLICATE_IDS 重複するオブジェクトやクラスは使用できません。
INVALID_JWT JWT が無効です。
INVALID_EXP_IAT JWT の期限が切れているか、または発行日が将来の日付です。
INVALID_AUD AUD フィールドの値が無効です。
INVALID_TYP TYP フィールドの値が無効です。
INVALID_NUM_OBJECTS ポイントカード、ギフトカード、クーポンに指定できるオブジェクトとクラスは 1 つまでです。
MALFORMED_ORIGIN_URL オリジン URL の形式が正しくありません。URL にはプロトコルとドメインを含める必要があります。
MISSING_ORIGIN オリジンを指定する必要があります。
MISSING_FIELDS Enclosed object or class was missing required fields.（囲まれたオブジェクトまたはクラスに必須項目がありませんでした。）

ローカライズ

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

  1. ユーザーが Google にログインしている場合、ユーザーの Google アカウントのプロフィールに指定されている優先言語でボタンが表示されます。Google アカウントの優先言語を変更する方法については、言語の変更をご覧ください。
  2. ユーザーが Google にログインしていない場合、ボタンには HTTP ヘッダーの ACCEPT-LANGUAGE 値が使用されます。

上記の基準に基づいてボタンが正しい言語で表示されない場合や、表現が不自然な場合は、サポートチームまでお問い合わせください。