ปุ่มเว็บ JavaScript

Google Wallet API ช่วยให้ผู้ใช้ของคุณเพิ่มออบเจ็กต์จากเว็บลงใน Google Wallet ได้ ผู้ใช้จะเพิ่มบัตรจากเว็บไซต์ของคุณได้โดยตรง

การอ้างอิงนี้ให้รายละเอียดเกี่ยวกับองค์ประกอบ HTML g:savetoandroidpay ที่ แสดงปุ่ม Google Wallet API รวมถึงโทเค็นเว็บ JSON ที่อธิบายบริการบนเว็บของคุณแก่ Google

JavaScript ของ Google Wallet API

หากต้องการแยกวิเคราะห์แท็ก HTML g:savetoandroidpay โดยอัตโนมัติขณะโหลด ให้ใส่แท็กมาตรฐาน 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>

แท็ก HTML g:savetoandroidpay

แท็กเนมสเปซ g:savetoandroidpay จะกำหนด และแอตทริบิวต์ต่างๆ ของ ปุ่ม Google Wallet ใช้แท็กนี้ถ้าคุณกำลังแสดงผล HTML และ JWT ฝั่งเซิร์ฟเวอร์

<g:savetoandroidpay jwt="JWT" onsuccess="successHandler" onfailure="failureHandler" />
ช่อง ประเภท ต้องระบุ คำอธิบาย
height สตริง N ความสูงของปุ่มที่จะแสดง ค่าที่เป็นไปได้: small (สูง 30px) และ standard (สูง 38 พิกเซล) height จะมีค่าเริ่มต้นเป็น small โปรดดูที่ปุ่ม Google Wallet API เพื่อดูตัวอย่างปุ่มที่มีการตั้งค่า height แบบต่างๆ
jwt สตริง Y Google Wallet API JWT
onsuccess สตริง N ชื่อสตริงของฟังก์ชันตัวแฮนเดิล Callback บันทึกความสำเร็จ
onfailure สตริง N ชื่อสตริงของฟังก์ชันตัวแฮนเดิล Callback สำหรับบันทึกความล้มเหลว ฟังก์ชันนี้ผ่านการทดสอบ ที่มี errorCode และ errorMessage
onprovidejwt สตริง N ชื่อสตริงของฟังก์ชันเครื่องจัดการ JWT ที่ระบุ วัตถุประสงค์ของฟังก์ชันนี้คือ สกัดกั้นและอาจบิดเบือนข้อมูล JWT ก่อนที่จะเพิ่มออบเจ็กต์ดังกล่าวลงใน Google Wallet ฟังก์ชันนี้จะไม่ใช้พารามิเตอร์และต้องแสดงผล JWT เป็น String เมื่อใช้งานเครื่องจัดการเหตุการณ์ จะสามารถดึงข้อมูล JWT ต้นฉบับได้ ใต้ช่อง this.getOpenParams().renderData.userParams.jwt
size สตริง N ความกว้างของปุ่มที่จะแสดง คุณสามารถตั้ง size เป็น matchparent ได้ ให้ความกว้างตรงกับความกว้างขององค์ประกอบระดับบน หรือออกจาก size ไม่ได้กำหนด เพื่อให้ความกว้างขยายให้พอดีกับความกว้างของการตั้งค่า text โปรดดูที่ปุ่ม Google Wallet API เพื่อดูตัวอย่างปุ่มที่มีการตั้งค่า size แบบต่างๆ
text สตริง N เลิกใช้
textsize สตริง N เมื่อระบุ textsize=large แล้ว ขนาดข้อความเพิ่มขึ้นอย่างมาก ขนาดปุ่มสำหรับกรณีที่มีข้อกำหนด UI พิเศษ
theme สตริง N ธีมของปุ่มที่จะแสดง ค่าที่เป็นไปได้: dark และ light ธีมเริ่มต้นคือ dark โปรดดู ปุ่ม API ของ Google Wallet เพื่อดูตัวอย่างปุ่มที่มีการตั้งค่า theme แบบต่างๆ

Google Wallet API JWT

JWT ของ Google Wallet API จะกำหนดออบเจ็กต์และคลาสที่จะบันทึก

การแสดง 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 สตริง Y อีเมลที่สร้างโดยบัญชีบริการ Google Cloud
aud สตริง Y ผู้ชม กลุ่มเป้าหมายสำหรับออบเจ็กต์ API ของ Google Wallet จะเป็น google
typ สตริง Y ประเภทของ JWT กลุ่มเป้าหมายสำหรับออบเจ็กต์ API ของ Google Wallet จะเป็น savetowallet
iat จำนวนเต็ม Y แสดงเวลาในหน่วยวินาทีนับตั้งแต่ Epoch
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 API ของ Google Wallet จะไม่แสดงผลเมื่อไม่ได้กำหนดฟิลด์ 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 สตริง Y รหัสของคอนเทนเนอร์ที่จะวางปุ่ม Google Wallet API
jwt สตริง Y JWT กำหนดเนื้อหาที่จะบันทึก
onsuccess สตริง N ชื่อสตริงของฟังก์ชันตัวแฮนเดิล Callback บันทึกความสำเร็จ
onfailure สตริง N ชื่อสตริงของฟังก์ชันตัวแฮนเดิล Callback สำหรับบันทึกความล้มเหลว ฟังก์ชันนี้ผ่านการทดสอบ ที่มี errorCode และ errorMessage
onprovidejwt สตริง N ชื่อสตริงของฟังก์ชันเครื่องจัดการ JWT ที่ระบุ วัตถุประสงค์ของฟังก์ชันนี้คือ สกัดกั้นและอาจบิดเบือนข้อมูล JWT ก่อนที่จะเพิ่มออบเจ็กต์ดังกล่าวลงใน Google Wallet ฟังก์ชันนี้จะไม่ใช้พารามิเตอร์และต้องแสดงผล JWT เป็น String เมื่อใช้งานเครื่องจัดการเหตุการณ์ จะสามารถดึงข้อมูล JWT ต้นฉบับได้ ใต้ช่อง this.getOpenParams().renderData.userParams.jwt

รหัสและข้อความแสดงข้อผิดพลาดของ Google Wallet API

ตารางต่อไปนี้แสดงรายการรหัสข้อผิดพลาดและข้อความแสดงข้อผิดพลาดเริ่มต้นที่ส่งผ่านข้อผิดพลาด ลงในฟังก์ชัน Callback ที่ล้มเหลว เมื่อออบเจ็กต์ไม่บันทึกสำเร็จโดยใช้ปุ่ม JavaScript

        {
          "errorCode": "errorCode",
          "errorMessage": "errorMessage"
        }
errorCode errorMessage
SERVICE_FAILURE เกิดข้อผิดพลาดในเซิร์ฟเวอร์ Google Wallet
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 ปุ่มนี้จะใช้ค่า ACCEPT-LANGUAGE ในส่วนหัว HTTP

หากคุณสังเกตเห็นว่าปุ่มไม่แสดงในภาษาที่ถูกต้องตามตรรกะข้างต้น หรือหาก การใช้คำไม่เป็นธรรมชาติ ติดต่อทีมสนับสนุนของเรา