Trang này được dịch bởi Cloud Translation API.

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 thành lớp học lập trình này, bạn sẽ có một trang web tối thiểu có khả năng hoạt động tích hợp với Google Pay. Dự án này truy xuất mã thông báo thanh toán có thể được gửi đến 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ý 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ó

Một trình soạn thảo 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 tra trang web cục bộ.
Đối với bản phát hành công khai, bạn cần có merchantId Google Pay. Bạn chỉ mất một phút để đăng ký tại Google Pay & Wallet Console, vì vậy, bạn nên thực hiện việc này ngay.

Làm theo hướng dẫn bằng Project IDX

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 gpay-web-101 và bên trong thư mục đó, hãy tạo hai tệp văn bản trống có tên index.html và main.js.Cấu trúc thư mục của bạn sẽ có dạ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ẹ để thêm nút Google Pay. Bạn có thể đặt phần tử này trong bố cục của trang web 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 hoàn tất quá trình tải. Có những cách khác để đạt được hiệu quả tương tự nhưng chú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 yêu cầu 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 GPAY_BUTTON_CONTAINER_ID thành mã nhận dạng của phần tử DOM được sử 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 phù hợp 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ể phù hợp hoặc không phù hợp hoàn toàn với nhu cầu của bạn, vì vậy, hãy xem xét kỹ.
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. Các trường này là không bắt buộc 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 chóng hơn bằng Google Pay? Hãy thiết lập các phương thức thanh toán!
Tài liệu tham khảo API: Tài liệu về đối tượng yêu cầu của API Google Pay
Tài liệu tham khảo 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à thông số kỹ thuật về mã thông báo, bao gồm cả giá trị cổng thích hợp.

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

Ứng dụng thanh toán được dùng để tạo 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ỉ tạo 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 trạng thái uỷ quyền thay đổi. Tuy nhiên, các chủ đề nâng cao này không được đề cập trong lớp học lập trình này.

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

5. Thêm trình trợ giúp

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

Nối 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 tính năng chuyển đổi tuần tự và huỷ chuyển đổi tuần tự 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 để nhân bản đối tượng mà không 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 tuỳ chọn xác định cách hoạt động của nút, 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 hai trình xử lý sự kiện. Phương thức đầu tiên được gọi khi thư viện pay.js tải xong và phương thức 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 thị nút Google Pay hay không. Nếu người tiêu dùng đã sẵn sàng thanh toán (nghĩa là họ đã thêm một phương thức thanh toán vào Google Wallet), thì nút Google Pay sẽ hiển thị.
onGooglePaymentButtonClicked() đượ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 cổng thanh toán để xử lý giao dịch. transactionInfo mô tả giao dịch cần được xử lý bằng lượt 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, hãy mở index.html bằng cách sử dụng File (Tệp) > Open File... (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ừ lời nhắc dòng lệnh 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 có liên quan đến Google Pay trên YouTube