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" />
Field 必須 説明
height String × 表示するボタンの高さ。指定できる値は small(30px)と standard(38px)です。height のデフォルトは small です。height の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。
jwt String Google Wallet API JWT。
onsuccess String × 保存成功のコールバックを処理する関数の文字列名。
onfailure String × 保存失敗のコールバック ハンドラ関数の文字列名。この関数には、errorCode と errorMessage を含むエラー オブジェクトが渡されます。
onprovidejwt String × 指定された JWT ハンドラ関数の文字列名。この関数の目的は、オブジェクトが Google ウォレットに追加される前に、JWT データをインターセプトし、そのデータを操作できるようにすることです。この関数はパラメータを取りません。また、JWT を文字列として返す必要があります。イベント ハンドラを実装する場合、元の JWT データはフィールド this.getOpenParams().renderData.userParams.jwt で取得できます。
size String × 表示するボタンの幅。sizematchparent に設定すると、親要素の幅と同じ幅にできます。または、size を未定義のままにして、text 設定の幅に合わせて拡張します。size の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。
text String × 非推奨
textsize String × textsize=large を指定すると、特別な UI 要件がある場合に、テキストサイズとボタンサイズが大幅に増加します。
theme String × 表示するボタンのテーマ。有効な値は darklight です。デフォルトのテーマは dark です。theme の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。

Google Wallet API の JWT

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

プロトコル

        {
  "iss": "example_service_account@developer.gserviceaccount.com",
  "aud": "google",
  "typ": "savetoandroidpay",
  "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"]
}

注: これらの JWT は RSA-SHA256 を使用して署名されます。署名鍵は、OAuth サービス アカウントによって生成された鍵です。

Field 必須 説明
iss String OAuth 2.0 サービス アカウントで生成されたメールアドレス。
aud String 対象ユーザー。Google Wallet API オブジェクトのオーディエンスは、常に google になります。
typ String JWT のタイプ。Google Wallet API オブジェクトのオーディエンスは、常に savetoandroidpay になります。
iat Integer エポックからの経過時間(秒)で発行されます。
payload オブジェクト ペイロード オブジェクト。
payload.eventTicketClasses 配列 × 保存するイベント チケット クラス。
payload.eventTicketObjects 配列 × 保存するイベント チケット オブジェクト。
payload.flightClasses 配列 × 保存するフライトクラス。
payload.flightObjects 配列 × 保存するフライト オブジェクト。
payload.giftCardClasses 配列 × 保存するギフトカードのクラス。
payload.giftCardObjects 配列 × 保存するギフトカード オブジェクト。
payload.loyaltyClasses 配列 × 保存するポイントクラス。
payload.loyaltyObjects 配列 × 保存するポイント オブジェクト。
payload.offerObjects 配列 × 保存する特典のオブジェクト。
payload.offerClasses 配列 × 保存するクーポンクラス。
payload.transitObjects 配列 × 保存する交通機関オブジェクト。
payload.transitClasses 配列 × 保存する交通機関クラス。
origins 配列 JWT 保存機能を承認するドメインの配列。origins フィールドが定義されていない場合、Google Wallet API ボタンはレンダリングされません。source フィールドが定義されていない場合、ブラウザ コンソールに「Load denied by X-Frame-Options」または「Refused to display」というメッセージが表示されることがあります。

エンコードされた 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"
});
Field 必須 説明
dom-container String Google Wallet API ボタンを配置するコンテナの ID。
jwt String 保存するコンテンツを定義する JWT。
onsuccess String × 保存成功のコールバックを処理する関数の文字列名。
onfailure String × 保存失敗のコールバック ハンドラ関数の文字列名。この関数には、errorCode と errorMessage を含むエラー オブジェクトが渡されます。
onprovidejwt String × 指定された 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 ボタンのオリジンがオリジン リストで指定されたものと一致しません。
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 つのオブジェクトと 1 つのクラスのみを指定できます。
MALFORMED_ORIGIN_URL オリジンの URL の形式が正しくありません。URL にはプロトコルとドメインを含める必要があります。
MISSING_ORIGIN オリジンを指定してください。
MISSING_FIELDS 囲まれたオブジェクトまたはクラスに必須項目がありませんでした。

ローカライズ

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

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

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