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

1. บทนำ

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

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

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

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

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

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

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

เปิดใน Firebase Studio

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

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

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

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