Google Pay API สำหรับเว็บ 201: ขั้นสูง

1. บทนำ

Codelab นี้เป็นส่วนต่อจาก Google Pay API สำหรับเว็บ 101: ข้อมูลพื้นฐาน และใช้โค้ดที่เขียนใน Codelab นั้น โปรดทำ Codelab นั้นให้เสร็จก่อนจึงจะทำ Codelab นี้ได้

สิ่งที่คุณจะได้เรียนรู้

• วิธีปรับแต่งปุ่ม Google Pay
• วิธีเริ่มกระบวนการชำระเงิน
• วิธีรับทราบสถานะการให้สิทธิ์การชำระเงิน
• วิธีจัดการการเปลี่ยนแปลงที่อยู่สำหรับจัดส่ง
• วิธีจัดการรหัสแลกรับข้อเสนอ

สิ่งที่คุณต้องมี

• โปรแกรมแก้ไขข้อความที่คุณเลือกเพื่อแก้ไขไฟล์ HTML และ JavaScript
• เว็บเบราว์เซอร์ Google Chrome หรือวิธีอื่นในการทดสอบเว็บไซต์ในเครื่อง
• สำหรับเวอร์ชันที่ใช้งานจริง คุณจะต้องมี Google Pay merchantId การลงทะเบียนใน Google Pay และ Wallet Console ใช้เวลาเพียง 1 นาที ดังนั้นคุณควรดำเนินการให้เรียบร้อยในตอนนี้

ทำตามโดยใช้ Firebase Studio

2. การปรับแต่งปุ่ม

นี่คือภาพรวมโดยย่อของ ButtonOptions ดูคำอธิบายโดยละเอียดเพิ่มเติมได้ในเอกสารประกอบ

ตัวเลือก	ความจำเป็น	ค่า
onClick	ต้องระบุ	ชื่อของตัวแฮนเดิลเหตุการณ์ JavaScript
allowedPaymentMethods	ไม่บังคับ	PaymentMethod[]
buttonColor	ไม่บังคับ	ค่าเริ่มต้น ดำ ขาว
buttonLocale	ไม่บังคับ	รหัส ISO 639-1 แบบ 2 ตัวอักษร ภาษาที่รองรับ ได้แก่ en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk และ zh
buttonRadius	ไม่บังคับ	0 ถึง 100
buttonRootNode	ไม่บังคับ	HTMLDocument หรือ ShadowRoot
buttonSizeMode	ไม่บังคับ	คงที่ เติม
buttonType	ไม่บังคับ	จอง ซื้อ ชำระเงิน บริจาค สั่งซื้อ ชำระเงิน ธรรมดา สมัครใช้บริการ

มองหาวิธี renderGooglePayButton() ในไฟล์ main.js แล้วแทนที่ด้วยโค้ดที่แสดงที่นี่

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

คำอธิบายโค้ด

1. createButton()เมธอดไลบรารีใช้ButtonOptionsอาร์กิวเมนต์การกำหนดค่าที่ช่วยให้คุณกำหนดลักษณะและการทำงานของปุ่มได้

3. การเรียกกลับของข้อมูลการชำระเงิน

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

1. ค้นหา// todo: paymentDataCallbacksความคิดเห็นใน main.js แล้วแทนที่ด้วยโค้ดนี้

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. จากนั้นค้นหาส่วน Event Handlers ของ main.js แล้วต่อท้ายโค้ดต่อไปนี้ที่ส่วนท้ายของส่วน

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. สุดท้าย ให้ค้นหา// todo: callbackIntentsความคิดเห็นภายใน main.js แล้วแทนที่ความคิดเห็นด้วยโค้ดนี้ ในโค้ดแล็บนี้ เราจะใช้ Intent ทั้ง 4 รายการ

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

คำอธิบายโค้ด

1. พร็อพเพอร์ตี้ PaymentDataCallbacks มีพร็อพเพอร์ตี้ย่อย 2 รายการ รายการหนึ่งสําหรับการเรียกกลับการให้สิทธิ์การชําระเงิน และอีกรายการสําหรับการเรียกกลับการเปลี่ยนแปลงข้อมูลการชําระเงิน
2. หากใช้ Callback onPaymentAuthorized จะต้องระบุ ระบบจะเรียกใช้ Callback นี้เมื่อcallbackIntentsมีPAYMENT_AUTHORIZATIONในPaymentDataRequest
3. onPaymentDataChanged เป็นตัวเลือก ระบบจะเรียกใช้การเรียกกลับนี้เมื่อรายการ callbackIntents มี OFFER, SHIPPING_ADDRESS หรือ SHIPPING_OPTION ใน PaymentDataRequest
4. ตั้งค่า callbackIntents ใน PaymentDataRequest เพื่อทริกเกอร์ทั้ง 2 การเรียกกลับสำหรับ Codelab นี้

4. การอนุมัติการชำระเงิน

Authorize Payments ใช้เพื่อเริ่มกระบวนการชำระเงินและรับทราบสถานะการให้สิทธิ์การชำระเงิน

ค้นหาฟังก์ชัน onPaymentAuthorized() ใน main.js ที่คุณเพิ่มในขั้นตอนสุดท้าย แล้วแทนที่ด้วยโค้ดต่อไปนี้

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

คำอธิบายโค้ด

1. ระบบจะเรียกใช้ฟังก์ชันเรียกกลับ onPaymentAuthorized() ด้วยอาร์กิวเมนต์ PaymentData และต้องแสดงผล Promise ในตัวอย่างนี้ ฟังก์ชันจะเลือกแบบสุ่มว่าจะแสดงผลสำเร็จหรือข้อผิดพลาด ในโปรเจ็กต์ คุณจะใช้โอกาสนี้ในการประมวลผลธุรกรรมกับเกตเวย์โดยใช้โทเค็นที่พบใน paymentData ที่ paymentData.paymentMethodData.tokenizationData.token

5. การเปลี่ยนแปลงข้อมูลการชำระเงิน

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

ค้นหาฟังก์ชัน onPaymentDataChanged() ใน main.js ที่คุณเพิ่มในขั้นตอนสุดท้าย แล้วแทนที่ด้วยโค้ดต่อไปนี้

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

ระบบอาจเรียกใช้INITIALIZEการเรียกกลับหลายครั้งในการโทรครั้งเดียวไปยัง loadPaymentData() ดังนั้นคุณต้องตรวจสอบว่าสามารถจัดการการโทรหลายครั้งไปยัง loadPaymentData() ได้ เช่น เมื่อผู้ใช้เปลี่ยนบัญชี ระบบจะเรียกใช้ onPaymentDataChanged() อีกครั้งพร้อมกับ INITIALIZE โดยใช้ข้อมูลจากบัญชีใหม่

คำอธิบายโค้ด

1. ฟังก์ชัน onPaymentDataChanged() รับ IntermediatePaymentData เป็นอาร์กิวเมนต์ ระบบจะเรียกใช้ฟังก์ชันนี้เมื่อมีการเปลี่ยนแปลงที่อยู่จัดส่งหรือตัวเลือกการจัดส่งในชีตการชำระเงิน
2. ฟังก์ชัน onPaymentDataChanged() ต้องคืนค่า Promise ที่แก้ไขออบเจ็กต์ PaymentDataRequestUpdate ซึ่งระบุข้อมูลธุรกรรมใหม่ ตัวเลือกการจัดส่ง และข้อผิดพลาดเพื่ออัปเดตชีตการชำระเงิน
3. redemptionCodes คือชุดรหัสโปรโมชันที่ป้อนในชีตการชำระเงิน รวมถึงรหัสที่ได้รับอนุมัติแล้ว

6. บทสรุป

ขอแสดงความยินดีที่ทำ Codelab นี้เสร็จสมบูรณ์ คุณได้เรียนรู้วิธีการ ...

เรียกใช้โปรเจ็กต์

ทดสอบด้วย Google Chrome

ใช้เว็บเบราว์เซอร์ Google Chrome แล้วเปิด index.html โดยใช้ไฟล์ > เปิดไฟล์... จากเมนูหลักของ Chrome Chrome จะเรียกใช้ main.js เมื่อเปิดโปรเจ็กต์ด้วยวิธีนี้ เว็บเบราว์เซอร์อื่นๆ อาจไม่อนุญาตให้เรียกใช้ JavaScript

– หรือ –

ทดสอบด้วยเว็บเซิร์ฟเวอร์ในเครื่อง

หากติดตั้ง Python ไว้ ให้เรียกใช้ python3 -m http.server จากพรอมต์เทอร์มินัลในโฟลเดอร์ pay-web-101 รูท

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

จากนั้นไปที่เว็บไซต์ของคุณที่ http://localhost:8000

ขั้นตอนถัดไป

• ตรวจสอบรายการตรวจสอบการผสานรวม

แหล่งข้อมูลเพิ่มเติม

• เข้าร่วมการสนทนาในแชแนล#payments บน Discord
• ติดตาม @GooglePayDevs บน X
• ดูวิดีโอที่เกี่ยวข้องกับ Google Pay บน YouTube