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(30px)と standard(38px)です。height のデフォルトは small です。height の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。
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 表示するボタンの幅。sizematchparent に設定すると、親要素の幅と同じ幅にできます。text 設定の幅に合わせて拡張する場合は、size を未定義のままにします。size の設定が異なるボタンの例については、Google Wallet API のボタンをご覧ください。
text 文字列 N 非推奨
textsize 文字列 N 特別な UI が必要な場合、textsize=large を指定すると文字とボタンのサイズが大幅に増大します。
theme 文字列 N 表示するボタンのテーマ。有効な値は 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 サービス アカウントに生成された鍵です。

項目 必須 / 省略可 説明
iss 文字列 Y OAuth 2.0 サービス アカウントに生成されたメールアドレス。
aud 文字列 Y オーディエンス。Google Wallet API オブジェクトのオーディエンスは、常に google になります。
typ 文字列 Y JWT のタイプ。Google Wallet API オブジェクトのオーディエンスは、常に savetoandroidpay になります。
iat 整数 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 保存機能を承認するドメインの配列。origins フィールドが定義されていない場合、Google Wallet API ボタンはレンダリングされません。originins 項目が定義されていない場合、ブラウザのコンソールに「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 An error occurred on the Google Wallet server.(Google ウォレット サーバーでエラーが発生しました。)
CLASS_NOT_FOUND Class referenced in object was not found.(オブジェクトで参照されているクラスが見つかりませんでした。)
CLASS_MISMATCH Object must be present, of the same type, and must reference the enclosed class.(同じ型のオブジェクトが存在し、囲まれたクラスを参照していることが必要です。)
ORIGIN_MISMATCH Origin of button does not match those specified in the origins list.(ボタンのオリジンがオリジンリストの指定と一致しません。)
INVALID_NUM_TYPES Exactly one type of object can be specified.(1 つの型のオブジェクトのみ指定できます。)
INVALID_SIGNATURE Signature could not be verified.(署名を検証できませんでした。)
INVALID_DUPLICATE_IDS Duplicates objects or classes are not allowed.(重複するオブジェクトやクラスは許可されません。)
INVALID_JWT Invalid JWT.(JWT が無効です。)
INVALID_EXP_IAT JWT expired or was issued in the future.(JWT の期限が切れているか、または発行日が将来の日付です。)
INVALID_AUD Invalid value for AUD field.(AUD フィールドの値が無効です。)
INVALID_TYP Invalid value for TYP field.(TYP フィールドの値が無効です。)
INVALID_NUM_OBJECTS Exactly one object and at most one class can be specified for loyalty cards, gift cards, and offers.(ポイントカード、ギフトカード、クーポンには、1 つのオブジェクトと最大で 1 つのクラスのみ指定できます。)
MALFORMED_ORIGIN_URL Malformed origin url. Url must contain a protocol and domain.(オリジン URL の形式が正しくありません。URL にはプロトコルとドメインが必要です。)
MISSING_ORIGIN Origin must be specified.(オリジンを指定する必要があります。)
MISSING_FIELDS Enclosed object or class was missing required fields.(囲まれたオブジェクトまたはクラスに必須項目がありませんでした。)

ローカライズ

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

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

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