Google Pay API สำหรับเว็บ 101: ข้อมูลเบื้องต้น

1. บทนำ

สิ่งที่คุณจะสร้าง

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

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

  • วิธีโหลดและกําหนดค่า Google Pay API
  • วิธีแสดงปุ่ม Google Pay และจัดการการคลิก
  • วิธีขอโทเค็นการชำระเงินจาก Google Pay

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

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

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

เปิด Codelab นี้ใน IDX

2. สร้างหน้า HTML

สร้างไฟล์โปรเจ็กต์

  1. สร้างโฟลเดอร์ในคอมพิวเตอร์ชื่อ gpay-web-101 และสร้างไฟล์ข้อความเปล่า 2 ไฟล์ในโฟลเดอร์นั้นชื่อ index.html และ main.js โครงสร้างไดเรกทอรีควรมีลักษณะดังนี้
    gpay-web-101/
  index.html
  main.js
  2. เปิด index.html ใน IDE ที่ต้องการ แล้วเพิ่มโค้ดต่อไปนี้
    <!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

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

  1. ระบบจะเพิ่ม DIV ว่างลงในหน้าที่มีรหัส gpay-container องค์ประกอบ DOM นี้จะเป็นส่วนประกอบหลักที่เพิ่มปุ่ม Google Pay คุณสามารถวางองค์ประกอบนี้ในเลย์เอาต์ของเว็บไซต์ตามความเหมาะสม
  2. แท็กสคริปต์ main.js จะอยู่ใน DOM หลังองค์ประกอบ gpay-container ขั้นตอนนี้จําเป็นเพื่อให้ DIV ของคอนเทนเนอร์แสดงอยู่ใน DOM ก่อนที่ main.js จะค้นหา นอกจากนี้ สคริปต์เป็นแบบซิงค์เพื่อให้แน่ใจว่าสคริปต์จะโหลดก่อน pay.js จะโหลด เนื่องจากต้องมีเมธอด onGooglePayLoaded() อยู่ก่อนจึงจะโหลดได้ แต่ก็มีวิธีอื่นๆ ที่ให้ผลลัพธ์เหมือนกัน ซึ่งเราจะไม่กล่าวถึงในบทความนี้
  3. สุดท้าย ระบบจะโหลด pay.js แบบไม่พร้อมกันและกำหนดค่า onGooglePayLoaded() ให้เป็นตัวแฮนเดิล onload วิธีการนี้จะกำหนดไว้ใน main.js

3. กำหนดค่า Google Pay

คำขอการชำระเงินด้วย Google Pay ต้องใช้ออบเจ็กต์คำขอ ออบเจ็กต์ที่กําหนดที่นี่เป็น baseGooglePayRequest มีการตั้งค่าทั่วไปขั้นต่ำสําหรับคําขอทั้งหมด ระบบจะเพิ่มการตั้งค่าเพิ่มเติมโดยขึ้นอยู่กับคำขอที่เราจะได้รับ ซึ่งเราจะตรวจสอบใน Codelab นี้

เพิ่มค่าคงที่การกําหนดค่า Google Pay ลงในไฟล์ main.js ที่ว่างเปล่า

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

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

  1. ตั้งค่าตัวแปรคงที่ GPAY_BUTTON_CONTAINER_ID เป็นรหัสขององค์ประกอบ DOM ที่ใช้ในหน้า HTML เป็นคอนเทนเนอร์หลักสำหรับปุ่ม Google Pay
  2. สร้างออบเจ็กต์การกําหนดค่า baseGooglePayRequest ที่มีการตั้งค่าที่เกี่ยวข้องสําหรับแอปพลิเคชัน ดูพร็อพเพอร์ตี้และค่าแต่ละรายการได้ในเอกสารอ้างอิง ค่าที่แสดงในตัวอย่างนี้อาจตรงกับความต้องการของคุณหรือไม่ก็ได้ ดังนั้นโปรดตรวจสอบอย่างละเอียด
  3. อัปเดตพร็อพเพอร์ตี้ merchantId และ merchantName ด้วยค่าของคุณเอง ช่องเหล่านี้เป็นช่องที่ไม่บังคับเมื่อสภาพแวดล้อมเป็น TEST

แหล่งข้อมูล

4. เพิ่มลูกค้าที่ใช้การชำระเงิน

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

เพิ่มรหัสไคลเอ็นต์นี้ต่อท้าย main.js

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

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

  1. ตัวแปร paymentsClient จะเก็บอินสแตนซ์ไว้กับไคลเอ็นต์เมื่อสร้างแล้ว โค้ดของเราไม่ได้เข้าถึงตัวแปรโดยตรง แต่จะใช้เมธอด getGooglePaymentsClient() เสมอ
  2. เมธอด getGooglePaymentsClient() จะตรวจสอบว่ามีการสร้างอินสแตนซ์ของไคลเอ็นต์แล้วหรือยัง และแสดงผลอินสแตนซ์นั้น หากก่อนหน้านี้ไม่ได้สร้างอินสแตนซ์ ระบบจะสร้าง บันทึก และแสดงอินสแตนซ์นั้น วิธีนี้ช่วยให้มั่นใจว่าจะมีการสร้างและใช้งานอินสแตนซ์เพียงรายการเดียวตลอดอายุการใช้งานของสคริปต์นี้
  3. ระบบจะเรียกใช้เมธอด PaymentsClient() เพื่อสร้างอินสแตนซ์ไคลเอ็นต์ ในตัวอย่างนี้ เรากําลังบอกลูกค้าว่าเราอยู่ในสภาพแวดล้อม TEST ทางเลือกคือ PRODUCTION อย่างไรก็ตาม TEST เป็นค่าเริ่มต้นและอาจละเว้นได้

5. เพิ่มผู้ช่วย

ฟังก์ชันตัวช่วยต่อไปนี้จะใช้ในภายหลังในสคริปต์ และเพิ่มเข้ามาเพื่อวัตถุประสงค์เดียวในการปรับปรุงความสามารถในการอ่านและดูแลรักษาโค้ด

เพิ่มฟังก์ชันตัวช่วยต่อท้าย main.js

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

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

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

  1. deepCopy() เป็นยูทิลิตีที่ใช้การแปลงเป็น JSON และการแปลงกลับเป็น JSON เพื่อสร้างสำเนาที่สมบูรณ์ของออบเจ็กต์ที่ระบุ ซึ่งเป็นวิธีที่สะดวกในการโคลนออบเจ็กต์โดยไม่ต้องกังวลเกี่ยวกับข้อมูลอ้างอิงที่แชร์
  2. renderGooglePayButton() เป็นยูทิลิตีที่เรียกใช้เมธอดไลบรารี createButton() เพื่อแสดงปุ่ม Google Pay โดยอาร์กิวเมนต์ที่ส่งผ่านคือชุดตัวเลือกที่กําหนดลักษณะการทํางานของปุ่ม เช่น การลงทะเบียนฟังก์ชัน onGooglePaymentButtonClicked() เพื่อจัดการการคลิกปุ่ม

6. เพิ่มเครื่องจัดการเหตุการณ์

ในสคริปต์นี้ เราจะกําหนดค่าตัวแฮนเดิลเหตุการณ์ 2 รายการ รายการแรกจะเรียกใช้เมื่อไลบรารี pay.js โหลดเสร็จแล้ว และอีกรายการจะเรียกใช้เมื่อมีการคลิกปุ่ม Google Pay

ต่อเครื่องจัดการเหตุการณ์ต่อท้าย main.js

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

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

  1. onGooglePayLoaded() จะเรียกใช้เมื่อสคริปต์ pay.js โหลดเสร็จแล้วตามที่ระบุไว้ในไฟล์ HTML ระบบจะเรียกใช้เมธอด isReadyToPay() เพื่อพิจารณาว่าจะแสดงปุ่ม Google Pay หรือไม่ หากผู้บริโภคพร้อมชำระเงิน (หมายความว่าได้เพิ่มรูปแบบการชำระเงินลงใน Google Wallet แล้ว) ระบบจะแสดงปุ่ม Google Pay
  2. onGooglePaymentButtonClicked() จะเรียกใช้เมื่อมีการคลิกปุ่ม Google Pay วิธีการนี้จะเรียกใช้เมธอดไลบรารี loadPaymentData() ซึ่งใช้ดึงข้อมูลโทเค็นการชำระเงิน เมื่อได้รับโทเค็นการชำระเงินแล้ว คุณจะต้องส่งโทเค็นดังกล่าวไปยังเกตเวย์การชำระเงินเพื่อประมวลผลธุรกรรม transactionInfo อธิบายธุรกรรมที่ควรประมวลผลด้วยการคลิกปุ่มนี้

7. บทสรุป

ยินดีด้วยที่ผ่าน Codelab นี้ คุณได้เรียนรู้วิธีผสานรวม Google Pay API เข้ากับเว็บไซต์แล้ว

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

ทดสอบด้วย 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

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

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