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

Google Pay cho web 201: Nâng cao

1. Giới thiệu

Lớp học lập trình này là phần tiếp theo của lớp học Kiến thức cơ bản về API Google Pay cho web 101 và dựa trên mã được viết trong lớp học lập trình đó. Để hoàn tất lớp học lập trình này, trước tiên, hãy nhớ hoàn tất lớp học lập trình đó.

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

Cách tuỳ chỉnh nút Google Pay
Cách bắt đầu quy trình thanh toán
Cách xác nhận trạng thái uỷ quyền thanh toán
Cách xử lý các thay đổi về địa chỉ giao hàng
Cách xử lý mã sử dụng

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. Tuỳ chỉnh nút

Đây là thông tin tổng quan ngắn gọn về ButtonOptions. Hãy tham khảo tài liệu để biết thêm thông tin giải thích chi tiết

Tuỳ chọn	Tính cần thiết	Giá trị
onClick	Bắt buộc	Tên của trình xử lý sự kiện JavaScript
allowedPaymentMethods	Không bắt buộc	`PaymentMethod[]`
buttonColor	Không bắt buộc	mặc định, đen, trắng
buttonLocale	Không bắt buộc	Mã ISO 639-1 gồm hai chữ cái. Các ngôn ngữ được hỗ trợ bao gồm en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk và zh.
buttonRadius	Không bắt buộc	0 đến 100
buttonRootNode	Không bắt buộc	HTMLDocument hoặc ShadowRoot
buttonSizeMode	Không bắt buộc	tĩnh, tô
buttonType	Không bắt buộc	đặt trước, mua, thanh toán, quyên góp, đặt hàng, thanh toán, đơn giản, đăng ký

Tìm phương thức renderGooglePayButton() trong tệp main.js rồi thay thế phương thức đó bằng mã được liệt kê tại đây.

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);
}

Giải thích mã

Phương thức thư viện createButton() sẽ lấy đối số cấu hình ButtonOptions để cho phép bạn xác định giao diện và hành vi của nút.

3. Lệnh gọi lại dữ liệu thanh toán

Ứng dụng thanh toán cung cấp một cơ chế để bạn đăng ký các hàm xử lý khi một số sự kiện nhất định xảy ra. Loại đầu tiên là uỷ quyền thanh toán và loại thứ hai là thay đổi dữ liệu thanh toán.

Tìm nhận xét // todo: paymentDataCallbacks trong main.js rồi thay thế bằng mã này.

paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},

Sau đó, hãy tìm phần Event Handlers của main.js rồi thêm mã sau vào cuối phần này.

function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}

Cuối cùng, hãy tìm nhận xét // todo: callbackIntents trong main.js và thay thế nhận xét đó bằng mã sau. Trong lớp học lập trình này, chúng ta sẽ triển khai cả 4 ý định.

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.'
    },
  ],
},

Giải thích mã

Thuộc tính PaymentDataCallbacks có hai thuộc tính phụ, một thuộc tính cho lệnh gọi lại uỷ quyền thanh toán và thuộc tính còn lại cho lệnh gọi lại thay đổi dữ liệu thanh toán.
Nếu triển khai lệnh gọi lại, bạn bắt buộc phải có onPaymentAuthorized. Lệnh gọi lại này được gọi khi danh sách callbackIntents chứa PAYMENT_AUTHORIZATION trong PaymentDataRequest.
onPaymentDataChanged là không bắt buộc. Lệnh gọi lại này được gọi khi danh sách callbackIntents chứa OFFER, SHIPPING_ADDRESS hoặc SHIPPING_OPTION trong PaymentDataRequest.
Thiết lập callbackIntents trong PaymentDataRequest để kích hoạt cả hai lệnh gọi lại cho lớp học lập trình này.

4. Uỷ quyền thanh toán

Authorize Payments (Uỷ quyền thanh toán) được dùng để bắt đầu quy trình thanh toán và xác nhận trạng thái uỷ quyền thanh toán.

Tìm hàm onPaymentAuthorized() trong main.js mà bạn đã thêm ở bước cuối cùng rồi thay thế hàm đó bằng mã sau.

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);
  });
}

Giải thích mã

Hàm gọi lại onPaymentAuthorized() được gọi bằng đối số PaymentData và phải trả về một lời hứa. Trong ví dụ này, hàm sẽ chọn ngẫu nhiên việc trả về kết quả thành công hay lỗi. Trong dự án, bạn sẽ sử dụng cơ hội này để xử lý giao dịch bằng cổng thanh toán bằng cách sử dụng mã thông báo có trong paymentData tại paymentData.paymentMethodData.tokenizationData.token.

5. Thay đổi về dữ liệu thanh toán

Tính năng Cập nhật giá động cho phép người bán linh động cập nhật các lựa chọn vận chuyển và thông tin giao dịch dựa trên địa chỉ giao hàng đã chọn. Ngoài ra, bạn có thể tự động cập nhật thông tin giao dịch dựa trên phương thức vận chuyển đã chọn.

Tìm hàm onPaymentDataChanged() trong main.js mà bạn đã thêm ở bước cuối cùng rồi thay thế hàm đó bằng mã sau.

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);
  });
}

Giải thích mã

Hàm onPaymentDataChanged() nhận IntermediatePaymentData làm đối số. Hàm này được gọi khi địa chỉ giao hàng hoặc phương thức giao hàng thay đổi trong trang tính thanh toán.
Hàm onPaymentDataChanged() phải trả về một lời hứa phân giải đối tượng PaymentDataRequestUpdate chỉ định thông tin giao dịch mới, lựa chọn vận chuyển và lỗi để cập nhật trang tính thanh toán.
redemptionCodes là một tập hợp các mã khuyến mãi được nhập vào trang tính thanh toán. Bao gồm cả các mã đã được phê duyệt.

6. 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 ...

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

Xem danh sách kiểm tra tích hợp

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