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>

如果是 True 應用程式,而且要明確呈現 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 字串 否 按鈕的顯示高度。可能的值包括:small (高 30 像素) 和 standard (高 38 像素)。height 預設為 small。 請參閱 Google Wallet API 按鈕 查看採用不同 height 設定的按鈕範例。
jwt 字串 是 Google Wallet API JWT。
onsuccess 字串 否 儲存成功回呼處理常式函式的字串名稱。
onfailure 字串 否 儲存失敗回呼處理常式函式的字串名稱。系統會將 包含 errorCode 和 errorMessage 的錯誤物件。
onprovidejwt 字串 否 提供 JWT 處理常式函式的字串名稱。這個函式的用途是 將物件新增至 Google 錢包前,可以攔截或視情況操控 JWT 資料。 此函式不使用任何參數,且必須傳回 JWT 做為字串。 導入事件處理常式時,可擷取原始 JWT 資料 欄位 this.getOpenParams().renderData.userParams.jwt。
size 字串 否 按鈕的顯示寬度。您可以將「size」設為「matchparent」 讓寬度符合父項元素的寬度。您也可以離開「size」 未定義,這樣寬度會延展至 text 設定的寬度。 請參閱 Google Wallet API 按鈕 查看採用不同 size 設定的按鈕範例。
text 字串 否 已淘汰
textsize 字串 否 指定 textsize=large 時,會顯示 文字大小大幅增加 按鈕大小,適用於有特殊 UI 要求的情況。
theme 字串 否 按鈕的顯示主題。可能的值包括: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 字串 是 Google Cloud 服務帳戶產生的電子郵件地址。
aud 字串 是 目標對象。Google Wallet API 物件的目標對像一律是 google。
typ 字串 是 JWT 類型。Google Wallet API 物件的目標對像一律是 savetowallet。
iat 整數 是 核發時間,以秒為單位,自 Epoch 紀元時間起算。
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 儲存功能的網域陣列。Google Wallet API 如未定義 origins 欄位,就不會顯示按鈕。您可以 系統可能會顯示「Load denied by 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 字串 否 儲存成功回呼處理常式函式的字串名稱。
onfailure 字串 否 儲存失敗回呼處理常式函式的字串名稱。系統會將 包含 errorCode 和 errorMessage 的錯誤物件。
onprovidejwt 字串 否 提供 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 您只能指定一種物件類型。
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,按鈕會使用 ACCEPT-LANGUAGE 值 。

如果您發現按鈕未根據上述邏輯以正確的語言顯示,或 遣詞用字不自然 聯絡支援團隊。