Google Pay API for 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 lập trình Google Pay API cho web 101: Kiến thức cơ bản 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, hãy nhớ hoàn tất lớp học lập trình đó trước.

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 ưu đãi

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

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

Lựa 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 tiếng Anh, tiếng Ả Rập, tiếng Bulgaria, tiếng Catalan, tiếng Séc, tiếng Đan Mạch, tiếng Đức, tiếng Hy Lạp, tiếng Tây Ban Nha, tiếng Estonia, tiếng Phần Lan, tiếng Pháp, tiếng Croatia, tiếng Indonesia, tiếng Ý, tiếng Nhật, tiếng Hàn, tiếng Mã Lai, tiếng Hà Lan, tiếng Na Uy, tiếng Ba Lan, tiếng Bồ Đào Nha, tiếng Nga, tiếng Slovak, tiếng Slovenia, tiếng Serbia, tiếng Thuỵ Điển, tiếng Thái, tiếng Thổ Nhĩ Kỳ, tiếng Ukraina và tiếng Trung.
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, mua, thanh toán, quyên góp, đặt hàng, trả tiền, trơn, đăng ký

Tìm phương thức renderGooglePayButton() trong tệp main.js rồi thay thế 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ã

1. Phương thức thư viện createButton() lấy đối số cấu hình ButtonOptions cho phép bạn xác định cách bạn muốn nút xuất hiện và hoạt động.

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. Thứ nhất là uỷ quyền thanh toán và thứ hai là thay đổi dữ liệu thanh toán.

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

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

2. 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
   }
   
   

3. Cuối cùng, hãy tìm dòng nhận xét // todo: callbackIntents trong main.js rồi thay thế dòng nhận xét đó bằng đoạn mã này. 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ã

1. Thuộc tính PaymentDataCallbacks có hai thuộc tính phụ, một cho lệnh gọi lại uỷ quyền thanh toán và thuộc tính thứ hai cho lệnh gọi lại thay đổi dữ liệu thanh toán.
2. Nếu triển khai lệnh gọi lại, bạn bắt buộc phải triển khai onPaymentAuthorized. Lệnh gọi lại này được gọi khi danh sách callbackIntents chứa PAYMENT_AUTHORIZATION trong PaymentDataRequest.
3. 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.
4. Đặt 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ế 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ã

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

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

Tính năng Cập nhật giá linh động cho phép người bán cập nhật linh động thông tin giao dịch và lựa chọn vận chuyển dựa trên địa chỉ giao hàng đã chọn. Ngoài ra, bạn có thể cập nhật thông tin giao dịch một cách linh động dựa trên lựa chọn 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ế 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);
  });
}

Lệnh gọi lại INITIALIZE có thể được kích hoạt nhiều lần trong một lệnh gọi duy nhất đến loadPaymentData(), vì vậy, bạn phải đảm bảo có thể xử lý nhiều lệnh gọi đến lệnh gọi lại này. Ví dụ: khi người dùng thay đổi tài khoản, onPaymentDataChanged() sẽ được gọi lại bằng INITIALIZE cùng với dữ liệu từ tài khoản mới.

Giải thích mã

1. 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 các lựa chọn giao hàng thay đổi trong trang thanh toán.
2. Hàm onPaymentDataChanged() phải trả về một promise phân giải đối tượng PaymentDataRequestUpdate chỉ định thông tin giao dịch mới, các lựa chọn vận chuyển và lỗi để cập nhật trang thanh toán.
3. redemptionCodes là một nhóm mã khuyến mãi được nhập vào trang thanh toán. Bao gồm cả những 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, 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

• 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 liên quan đến Google Pay trên YouTube