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

1. บทนำ

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

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

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

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

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

ติดตามโดยใช้ Project IDX

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

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

ตัวเลือก	ความจำเป็น	ค่า
onClick	ต้องระบุ	ชื่อตัวแฮนเดิลเหตุการณ์ JavaScript
allowedPaymentMethods	ไม่บังคับ	PaymentMethod[]
buttonColor	ไม่บังคับ	เริ่มต้น สีดํา สีขาว
buttonLocale	ไม่บังคับ	รหัส ISO 639-1 แบบ 2 อักขระ ภาษาที่รองรับ ได้แก่ อังกฤษ อาหรับ บัลแกเรีย แคนาดา เช็ก เดนมาร์ก เยอรมัน กรีก สเปน เอสโตเนีย ฟินแลนด์ ฝรั่งเศส โครเอเชีย อินโดนีเซีย อิตาลี ญี่ปุ่น เกาหลี มลายู ดัตช์ นอร์เวย์ โปแลนด์ โปรตุเกส รัสเซีย สโลวาเกีย สโลวีเนีย เซอร์เบีย สวีเดน ไทย ตุรกี ยูเครน และจีน
buttonRadius	ไม่บังคับ	0 ถึง 100
buttonRootNode	ไม่บังคับ	HTMLDocument หรือ ShadowRoot
buttonSizeMode	ไม่บังคับ	คงที่, เติม
buttonType	ไม่บังคับ	book, buy, checkout, donate, order, pay, plain, subscribe

มองหาเมธอด 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 สำหรับแบ็กคอลการเปลี่ยนแปลงข้อมูลการชำระเงิน
2. หากใช้การเรียกกลับ onPaymentAuthorized ต้องระบุ ระบบจะเรียกใช้การเรียกกลับนี้เมื่อรายการ 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. ระบบจะเรียกใช้ฟังก์ชัน Callback ของ onPaymentAuthorized() ด้วยอาร์กิวเมนต์ PaymentData และต้องแสดงผลพรอมต์ ในตัวอย่างนี้ ฟังก์ชันจะสุ่มเลือกว่าจะแสดงผลสำเร็จหรือข้อผิดพลาด ในโปรเจ็กต์ คุณจะใช้โอกาสนี้เพื่อประมวลผลธุรกรรมกับเกตเวย์โดยใช้โทเค็นที่พบใน 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() ครั้งเดียว ดังนั้นคุณต้องตรวจสอบว่าสามารถจัดการการเรียกกลับหลายครั้งได้ เช่น เมื่อผู้ใช้เปลี่ยนบัญชี ระบบจะเรียก onPaymentDataChanged() ด้วย INITIALIZE อีกครั้งพร้อมข้อมูลจากบัญชีใหม่

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

1. ฟังก์ชัน onPaymentDataChanged() ใช้ IntermediatePaymentData เป็นอาร์กิวเมนต์ ระบบจะเรียกใช้ฟังก์ชันนี้เมื่อมีการเปลี่ยนแปลงที่อยู่สำหรับจัดส่งหรือตัวเลือกการจัดส่งในชีตการชำระเงิน
2. ฟังก์ชัน onPaymentDataChanged() ต้องแสดงผลพรอมต์ที่แก้ไขออบเจ็กต์ 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