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

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

ตารางต่อไปนี้แสดงรหัสข้อผิดพลาดและข้อความแสดงข้อผิดพลาดเริ่มต้นที่ส่งผ่านออบเจ็กต์ข้อผิดพลาดไปยังฟังก์ชันการเรียกกลับล้มเหลว เมื่อออบเจ็กต์บันทึกโดยใช้ปุ่ม 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

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