Kiến thức cơ bản về API Google Pay dành cho web: Kiến thức cơ bản

1. Giới thiệu

Sản phẩm bạn sẽ tạo ra

Khi hoàn tất lớp học lập trình này, bạn sẽ có một trang web tối thiểu có thể hoạt động với tính năng tích hợp Google Pay. Dự án này truy xuất một mã thông báo thanh toán có thể được gửi đến một nhà cung cấp dịch vụ thanh toán để xử lý.

Kiến thức bạn sẽ học được

Cách tải và định cấu hình API Google Pay
Cách hiển thị nút Google Pay và xử lý các lượt nhấp
Cách yêu cầu mã thông báo thanh toán từ Google Pay

Bạn cần có

Trình chỉnh sửa văn bản mà bạn chọn để chỉnh sửa tệp HTML và JavaScript.
Trình duyệt web Google Chrome hoặc một cách khác để kiểm thử trang web cục bộ.
Đối với bản phát hành công khai, bạn sẽ cần có một merchantId Google Pay. Bạn chỉ mất một phút để đăng ký tại Google Pay & Wallet Console, vậy nên bạn có thể thực hiện ngay bây giờ.

Làm theo hướng dẫn bằng Firebase Studio

2. Tạo trang HTML

Tạo tệp dự án

Tạo một thư mục trên máy tính có tên là gpay-web-101, rồi tạo 2 tệp văn bản trống có tên là index.html và main.js trong thư mục đó.Cấu trúc thư mục của bạn sẽ trông như sau:
```
gpay-web-101/
  index.html
  main.js
```

Mở index.html trong IDE mà bạn chọn và thêm mã sau:

<!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>

Giải thích mã

Một DIV trống được thêm vào trang có mã nhận dạng gpay-container. Phần tử DOM này sẽ là phần tử mẹ mà nút Google Pay được thêm vào. Bạn có thể đặt phần tử này vào bố cục trang web của mình khi thích hợp.
Thẻ tập lệnh main.js được đặt trong DOM sau phần tử gpay-container. Điều này là cần thiết để đảm bảo DIV vùng chứa có trong DOM trước khi main.js truy vấn vùng chứa đó. Ngoài ra, tập lệnh này là đồng bộ để đảm bảo tập lệnh được tải trước khi pay.js tải vì phương thức onGooglePayLoaded() phải tồn tại trước khi quá trình tải hoàn tất. Có những cách khác để đạt được hiệu ứng tương tự nhưng sẽ không được thảo luận ở đây.
Cuối cùng, pay.js được tải không đồng bộ và định cấu hình onGooglePayLoaded() làm trình xử lý onload. Phương thức này sẽ được xác định trong main.js.

3. Định cấu hình Google Pay

Yêu cầu thanh toán bằng Google Pay cần có một đối tượng yêu cầu. Đối tượng được xác định ở đây là baseGooglePayRequest chứa các chế độ cài đặt chung tối thiểu cho tất cả các yêu cầu. Các chế độ cài đặt bổ sung sẽ được thêm vào tuỳ thuộc vào yêu cầu được đưa ra mà chúng ta sẽ xem xét trong lớp học lập trình này.

Thêm các hằng số cấu hình Google Pay vào tệp main.js trống:

//=============================================================================
// 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);

Giải thích mã

Đặt biến hằng số GPAY_BUTTON_CONTAINER_ID thành mã nhận dạng của phần tử DOM được dùng trên trang HTML làm vùng chứa mẹ cho nút Google Pay.
Tạo đối tượng cấu hình baseGooglePayRequest có các chế độ cài đặt liên quan cho ứng dụng của bạn. Bạn có thể tìm thấy từng thuộc tính và giá trị trong tài liệu tham khảo. Các giá trị trong ví dụ này có thể hoàn toàn phù hợp hoặc không phù hợp với nhu cầu của bạn, vì vậy, hãy xem xét kỹ lưỡng.
Cập nhật các thuộc tính merchantId và merchantName bằng các giá trị của riêng bạn. Bạn không bắt buộc phải điền thông tin vào các trường này khi môi trường là TEST.

Tài nguyên

Bài đăng trên blog: Bạn muốn thanh toán nhanh hơn bằng Google Pay? Định cấu hình các lựa chọn thanh toán!
Tài liệu tham khảo API: Tài liệu về các đối tượng yêu cầu của Google Pay API
Tài liệu tham khảo về API: Tham khảo PaymentMethod để biết thêm thông tin về các phương thức uỷ quyền được phép, mạng thẻ được phép và quy cách mã hoá bao gồm cả giá trị cổng phù hợp.

4. Thêm ứng dụng thanh toán

Ứng dụng thanh toán được dùng để đưa ra yêu cầu thanh toán và đăng ký lệnh gọi lại. Trong lớp học lập trình này, chúng ta sẽ chỉ thực hiện các yêu cầu thanh toán. Ngoài ra, bạn có thể định cấu hình PaymentDataCallbacks để xử lý khi dữ liệu thanh toán hoặc uỷ quyền thay đổi. Tuy nhiên, lớp học lập trình này không đề cập đến các chủ đề nâng cao này.

Thêm mã ứng dụng này vào cuối 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;
}

Giải thích mã

Biến paymentsClient sẽ lưu giữ phiên bản cho ứng dụng sau khi phiên bản đó được tạo. Biến này không được mã của chúng ta truy cập trực tiếp mà luôn được truy cập bằng phương thức getGooglePaymentsClient().
Phương thức getGooglePaymentsClient() kiểm tra xem một ứng dụng đã được tạo thực thể hay chưa và trả về phiên bản đó. Nếu chưa được khởi tạo trước đó, thì một đối tượng sẽ được tạo, lưu và trả về. Phương thức này đảm bảo rằng chỉ có một thực thể được tạo và sử dụng trong suốt thời gian hoạt động của tập lệnh này.
Để tạo thực thể ứng dụng, phương thức PaymentsClient() sẽ được gọi. Trong ví dụ này, chúng ta đang cho biết rằng ứng dụng đang ở trong môi trường TEST. Lựa chọn thay thế là PRODUCTION. Tuy nhiên, TEST là giá trị mặc định và có thể được bỏ qua.

5. Thêm người trợ giúp

Các hàm trợ giúp sau đây được dùng sau trong tập lệnh và được thêm vào chỉ nhằm mục đích cải thiện khả năng đọc và duy trì mã.

Thêm các hàm trợ giúp vào cuối 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);
}

Giải thích mã

deepCopy() là một tiện ích sử dụng quá trình chuyển đổi tuần tự và chuyển đổi tuần tự ngược JSON để tạo bản sao sâu của đối tượng được cung cấp. Đây là một cách thuận tiện để sao chép các đối tượng mà không cần lo lắng về các tệp tham chiếu dùng chung.
renderGooglePayButton() là một tiện ích gọi phương thức thư viện createButton() để hiển thị nút Google Pay. Đối số được truyền là một tập hợp các lựa chọn xác định cách nút hoạt động, chẳng hạn như đăng ký hàm onGooglePaymentButtonClicked() để xử lý các lượt nhấp vào nút.

6. Thêm trình xử lý sự kiện

Trong tập lệnh này, chúng ta sẽ định cấu hình 2 trình xử lý sự kiện. Hàm đầu tiên được gọi khi thư viện pay.js hoàn tất quá trình tải và hàm còn lại được gọi khi người dùng nhấp vào nút Google Pay.

Nối trình xử lý sự kiện vào cuối 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);
}

Giải thích mã

onGooglePayLoaded() được gọi khi tập lệnh pay.js đã tải xong như được xác định trong tệp HTML. Phương thức isReadyToPay() được gọi để xác định xem có hiện nút Google Pay hay không. Nếu người tiêu dùng đã sẵn sàng thanh toán (tức là họ đã thêm một phương thức thanh toán vào Google Wallet), thì nút Google Pay sẽ được hiển thị.
onGooglePaymentButtonClicked() sẽ được gọi khi người dùng nhấp vào nút Google Pay. Phương thức này gọi phương thức thư viện loadPaymentData() dùng để truy xuất mã thông báo thanh toán. Sau khi có mã thông báo thanh toán, bạn sẽ gửi mã này đến cổng thanh toán để xử lý giao dịch. transactionInfo mô tả giao dịch cần được xử lý khi người dùng nhấp vào nút này.

7. Kết luận

Chúc mừng bạn đã hoàn thành Lớp học lập trình này! Bạn đã tìm hiểu cách tích hợp Google Pay API vào một trang web.

Chạy dự án

Kiểm thử bằng Google Chrome

Sử dụng trình duyệt web Google Chrome, mở index.html bằng cách chọn Tệp > Mở tệp... trong trình đơn chính của Chrome. Chrome sẽ thực thi main.js khi dự án được mở theo cách này. Các trình duyệt web khác có thể không cho phép thực thi JavaScript.

– hoặc –

Kiểm thử bằng máy chủ web cục bộ

Nếu bạn đã cài đặt Python, hãy chạy python3 -m http.server từ dấu nhắc của thiết bị đầu cuối trong thư mục gốc pay-web-101.

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

Sau đó, hãy truy cập vào trang web của bạn tại http://localhost:8000.

Nội dung tiếp theo nên tìm hiểu

Tài nguyên khác

Tham gia cuộc trò chuyện trong kênh#payments trên Discord
Theo dõi @GooglePayDevs trên X
Xem các video liên quan đến Google Pay trên YouTube