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。實作事件處理常式時,您可以在 this.getOpenParams().renderData.userParams.jwt 欄位下擷取原始 JWT 資料。
size 字串 N 要顯示的按鈕寬度。您可以將 size 設為 matchparent,讓寬度與父項元素的寬度相符。或者,保留 size 未定義,使寬度延伸至符合 text 設定的寬度。如要查看具有不同 size 設定的按鈕範例,請參閱 Google Wallet API 按鈕
text 字串 N 已淘汰
textsize 字串 N 指定 textsize=large 時,如果特殊 UI 需求,文字大小和按鈕大小會大幅增加。
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 字串 您的 OAuth 2.0 服務帳戶產生的電子郵件地址。
aud 字串 觀眾。Google Wallet API 物件的目標對像一律為 google
typ 字串 JWT 的類型。Google Wallet API 物件的目標對像一律為 savetoandroidpay
iat 整數 核發時間,以秒為單位 (自 Epoch 紀元時間起算)。
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 按鈕。在未定義來源欄位的情況下,您可能會在瀏覽器主控台中收到「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"
});
欄位 類型 必要 說明
dom-container 字串 用來放置 Google Wallet API 按鈕的容器 ID。
jwt 字串 使用 JWT 定義要儲存的內容。
onsuccess 字串 N 儲存成功回呼處理常式函式的字串名稱。
onfailure 字串 N 儲存失敗回呼處理常式函式的字串名稱。系統會傳遞包含 errorCode 和 errorMessage 的錯誤物件。
onprovidejwt 字串 N 提供 JWT 處理常式函式的字串名稱。在將物件新增至 Google 電子錢包之前,這項功能會先攔截並可能操控 JWT 資料。這個函式不接受任何參數,且必須以字串的形式傳回 JWT。實作事件處理常式時,您可以在 this.getOpenParams().renderData.userParams.jwt 欄位下擷取原始 JWT 資料。

Google Wallet API 錯誤代碼和訊息

下表會列出在使用 JavaScript 按鈕未成功儲存物件時,由錯誤物件傳遞至失敗回呼函式的錯誤代碼和預設錯誤訊息。

        {
          "errorCode": "errorCode",
          "errorMessage": "errorMessage"
        }
errorCode errorMessage
SERVICE_FAILURE Google 電子錢包伺服器發生錯誤。
CLASS_NOT_FOUND 找不到物件中參照的類別。
CLASS_MISMATCH 物件必須屬於相同類型的物件,且必須參照封閉類別。
ORIGIN_MISMATCH 按鈕來源與來源清單中指定的來源不符。
INVALID_NUM_TYPES 只能指定一個物件類型。
INVALID_SIGNATURE 無法驗證簽名。
INVALID_DUPLICATE_IDS 物件或類別不得重複。
INVALID_JWT JWT 無效。
INVALID_EXP_IAT JWT 已過期或日後核發。
INVALID_AUD AUD 欄位的值無效。
INVALID_TYP TYP 欄位的值無效。
INVALID_NUM_OBJECTS 會員卡、禮物卡和優惠只能指定一個物件和最多一個類別。
MALFORMED_ORIGIN_URL 來源網址的格式錯誤。網址必須包含通訊協定和網域。
MISSING_ORIGIN 必須指定來源。
MISSING_FIELDS 包含的物件或類別缺少必填欄位。

本地化

JavaScript 按鈕中的語言會根據以下標準而變更:

  1. 如果使用者已登入 Google,按鈕會以使用者 Google 帳戶設定檔中的偏好語言顯示。使用者可參閱變更語言一文,瞭解如何變更 Google 帳戶的偏好語言。
  2. 如果使用者未登入 Google,按鈕會使用 HTTP 標頭中的 ACCEPT-LANGUAGE 值。

如果您發現按鈕無法根據上述邏輯以正確的語言顯示,或者文字用字不自然,請與支援小組聯絡