Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

Tạo trải nghiệm thanh toán nhanh trên web bằng Google Pay

API Google Pay cho phép người dùng thanh toán ở mọi nơi bằng cách sử dụng thông tin thanh toán đã lưu trong Tài khoản Google của họ. Trong phòng thí nghiệm này, bạn sử dụng thư viện ứng dụng của Google Pay cho web để cải thiện trải nghiệm thanh toán của một cửa hàng trực tuyến mẫu đơn giản, bằng cách tạo ra trải nghiệm nhanh hơn, thuận tiện hơn và an toàn hơn, từ đó dẫn đến nhiều lượt chuyển đổi hơn và khách hàng hài lòng hơn.

Cửa hàng áo phông ô tô là một cửa hàng tiên tiến, tận dụng những tiến bộ mới nhất trong trí tuệ nhân tạo và sử dụng những thông tin như lựa chọn ưu tiên về phong cách, thời tiết, thời gian trong năm và xu hướng thời trang để đề xuất mặt hàng thích hợp nhất cho bạn.

Chỉ số về mức độ tương tác cho cửa hàng này là thông qua mái nhà. Rất tiếc, các chỉ số này cũng phản ánh một số lượng lớn lượt bỏ qua trong quá trình thanh toán. Quyết định giải quyết vấn đề này, một trong những chủ sở hữu của dự án đã nhớ lại một video cho thấy kết quả đầy hứa hẹn mà Google Pay mang lại cho các trang web tương tự, vì vậy, họ quyết định dùng thử và tin tưởng bạn sẽ đảm nhận việc tích hợp.

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

Lớp học mã này hướng dẫn bạn cách tích hợp Google Pay vào một trang web hiện có, bao gồm việc xác định xem người dùng có thể thanh toán bằng phương thức thanh toán mà Google Pay hỗ trợ hay không, vị trí và thiết kế của nút thanh toán, cũng như việc thực hiện giao dịch.

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

Cách tích hợp Google Pay vào trang thanh toán hiện tại
Cách chọn trong số các phương thức thanh toán ưa thích của bạn
Cách xác định xem người dùng đã sẵn sàng thanh toán bằng Google Pay hay chưa

Bạn cần có

Một máy tính có kết nối Internet
Kiến thức cơ bản về JavaScript

Chạy trang web mẫu trên glching.com

Để thiết lập và chạy quảng cáo nhanh nhất có thể, lớp học lập trình này đã được cung cấp trên glchy.com. Glail là một môi trường dựa trên web miễn phí cung cấp một trình chỉnh sửa mã, cũng như các tính năng lưu trữ và triển khai mà bạn có thể sử dụng để tạo và phân phát các ứng dụng web.

Để bắt đầu, hãy sử dụng nút bên dưới để cung cấp môi trường phát triển mới cho Glrick đã thiết lập với một bản sao của lớp học lập trình này.

Bắt đầu phát triển môi trường trên Glcab.com

Từ đây trở đi, bạn có thể sử dụng trình soạn thảo mã trên Glrick để sửa đổi tệp của bạn. Bắt đầu phân phát ứng dụng của bạn bằng cách sử dụng trình đơn Hiển thị ở trên cùng và chọn Trong cửa sổ mới.

Lướt qua trang web mẫu

Như bạn có thể thấy, kho lưu trữ có cấu trúc tệp không phức tạp. Mục tiêu chính của lớp học lập trình này là cho phép bạn điều chỉnh việc tích hợp này với các ứng dụng hiện có và trong tương lai của mình, độc lập với khung, thư viện hoặc công cụ mà bạn chọn làm việc cùng.

Khám phá trang web

Thị trường minh họa này được xây dựng theo cách trông giống như hiện tại của ứng dụng hiện có hoặc ứng dụng tiềm năng của bạn, trước khi bạn thêm phương thức mua hàng. Trên thực tế, mặc dù bạn nên sử dụng ứng dụng minh họa này, nhưng bạn vẫn có thể thoải mái sử dụng lớp học lập trình này để tích hợp Google Pay vào các ứng dụng hiện có.

Bây giờ, nếu bạn chưa làm như vậy, hãy mở trang web minh họa như hiện tại. Để làm việc đó, hãy nhấp vào nút Hiển thị nếu bạn đang dùng tính năng Tìm kiếm nhanh hoặc mở URL mà máy chủ web cục bộ đang chạy.

Trang web minh họa không có gì đáng ngạc nhiên phải không? Trang chi tiết sản phẩm, có hình ảnh, giá bán, thông tin mô tả, một số bộ chọn và nút để chuyển bạn đến một phương thức thanh toán ảo và thông thường.

Mục tiêu của phòng thí nghiệm này là thay thế quy trình này bằng một trải nghiệm hai nhấp chuột do Google Pay cung cấp.

Hãy lập kế hoạch này!

Để hiểu rõ hơn về cách tích hợp này, quy trình này được chia thành các bước cơ bản sau đây:

Tải thư viện
Xác định khả năng thanh toán bằng Google Pay
Hiện nút để thanh toán bằng Google Pay
Tạo và gửi yêu cầu thanh toán
Thu thập kết quả

Thêm thẻ `script`

Điều đầu tiên bạn cần làm để bắt đầu sử dụng API Google Pay là tải thư viện JavaScript. Để làm việc đó, hãy đưa một thẻ script vào tệp HTML mà bạn định gọi API, bao gồm cả thuộc tính src trỏ đến thư viện JavaScript bên ngoài.

Đối với lớp học lập trình này, hãy mở tệp index.html. Bạn sẽ thấy rằng thẻ tập lệnh đã được bao gồm cho bạn:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

Ngoài src, bạn cũng đã thêm hai thuộc tính khác.

async cho phép tập lệnh của bạn được tải và thực thi không đồng bộ cùng với phần còn lại của trang, do đó, thời gian tải đầu tiên của tài liệu không bị ảnh hưởng.
onload giúp bạn trì hoãn việc thực thi mã tùy thuộc vào thư viện này cho đến khi tập lệnh của bạn đã được tải. Sau khi hoàn tất, hàm bạn chỉ định trong thuộc tính này sẽ được chạy. Trong trường hợp này, hàm là onGooglePayLoaded.

Khởi tạo ứng dụng API

Sau khi tập lệnh đã tải, bạn có thể bắt đầu sử dụng thư viện này. Hãy bắt đầu bằng cách tạo đối tượng máy khách. Bạn sẽ sử dụng đối tượng này để gọi đến API Google Pay sau này.

Chỉnh sửa tệp index.js vì tệp này đã thuộc cấu trúc tệp của dự án này. Thay thế hàm onGooglePayLoaded bằng mã sau.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

Ứng dụng thanh toán được khởi tạo với đối tượng PaymentOptions. Việc đặt environment thành TEST cho phép bạn thử nghiệm thông tin thanh toán giả trên toàn bộ quá trình tích hợp. Khi đã sẵn sàng tạo các thao tác để hỗ trợ giao dịch thực tế, bạn có thể cập nhật thuộc tính environment thành PRODUCTION.

Tổng quan

Hiện chúng tôi đã tải Thư viện ứng dụng JavaScript của Google Pay API. Bây giờ, hãy định cấu hình mã này để thực hiện các lệnh gọi API cho chúng ta.

Tất cả các thay đổi mã sau đây cho phần còn lại của lớp học lập trình, sẽ được thực hiện đối với tệp index.js.

Bộ xương

Mỗi lần bạn giao tiếp với API Google Pay, bạn sẽ cần phải đưa vào một số thông số cấu hình trong yêu cầu, chẳng hạn như phiên bản API mà bạn đang nhắm mục tiêu. Để phục vụ cho mục đích của lớp học lập trình này, đối tượng này cũng chứa thông tin về các phương thức thanh toán được chấp nhận trong đơn đăng ký của bạn. Cấu trúc cuối cùng có dạng như sau:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

Tài sản allowedPaymentMethods cung cấp danh sách các phương thức thanh toán. Đối với mọi phương thức thanh toán, bạn phải thêm các thuộc tính sau:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

Chỉ các thuộc tính type và parameters mới được yêu cầu để xác định xem người dùng liên quan có thể thanh toán bằng Google Pay không.

Cấu hình phương thức thanh toán

Trong ví dụ này, bạn sẽ chỉ chấp nhận một cấu hình, cho phép thanh toán bằng thẻ cho Mastercard và Visa, ở cả biểu mẫu mã thông báo và số tài khoản chính (PAN).

Dưới đây là cách thiết lập cấu hình của bạn trong index.js:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

Giới thiệu về cơ chế xác thực thẻ: Khi thanh toán, bạn có thể chọn thẻ dựa trên cách thông tin giao dịch được xác thực với bộ xử lý hoặc cổng:

Khi sử dụng chế độ xác thực số tài khoản chính (PAN), số tài khoản thẻ và tháng hết hạn cùng năm hết sẽ được gửi đến đơn vị xử lý thanh toán. Điều này cho phép khách hàng của bạn sử dụng bất kỳ thẻ nào được bảo mật trước đó liên kết với Tài khoản Google của họ.
Tính năng xác thực dựa trên mật mã hoạt động kết hợp với phương thức mã thông báo của thẻ, một cơ chế thay thế thông tin thẻ của khách hàng bằng một giá trị ngẫu nhiên mà không ai khác có thể phát hành thẻ của bạn có thể hiểu được. Điều này, kết hợp với các phương thức mã hóa động, đảm bảo rằng mã thông báo được gửi đến bộ xử lý luôn khác nhau đối với mọi giao dịch, từ đó giúp tăng đáng kể khả năng bảo mật trong các hoạt động này.

Tổng kết

Tóm tắt.

Bạn đã xác định một phương thức thanh toán để được chấp nhận trong trang web của mình và bạn sẽ làm việc với phiên bản 2.0 của API. Đây là giao diện của cấu hình thu được:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

Bây giờ, bạn đã sẵn sàng định cấu hình cơ sở của mình, hãy cùng chuyển sang phần thú vị.

Một trong những mục tiêu chính của Google Pay là mang đến trải nghiệm thanh toán nhanh hơn và thuận tiện hơn cho người dùng. Điều này không chỉ áp dụng cho những tình huống mà một người có thể sử dụng Google Pay, mà còn trong những trường hợp họ không thể làm như vậy. Việc sử dụng yêu cầu isReadyToPay cho phép bạn xác định việc sẵn sàng thanh toán bằng Google Pay và cơ hội để bạn sửa đổi trải nghiệm trên trang web của mình cho phù hợp.

Người dùng của bạn có thể thanh toán bằng Google Pay không?

Điều đầu tiên bạn cần làm là kiểm tra xem một người dùng cụ thể sắp thanh toán trên trang web của bạn có thể sử dụng Google Pay hay không. Yêu cầu này yêu cầu bạn phải chỉ định phiên bản API của Google Pay và các phương thức thanh toán được phép cho trang web. Đây chính xác là đối tượng cấu hình cơ sở được xác định ở bước trước.

Trong index.js bên trong hàm onGooglePayLoaded(), hãy dán nội dung sau đây:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

Nếu cuộc gọi không thành công hoặc trả về nhưng phản hồi không thành công, thì bạn không cần làm gì thêm trong bối cảnh Google Pay. Trong trường hợp này, bước tiếp theo thích hợp nhất là hiển thị giao diện người dùng bổ sung hỗ trợ các phương thức thanh toán khác.

Mặt khác, nếu phản hồi thành công, bạn hiện đã sẵn sàng để cho phép người dùng hưởng lợi từ việc sử dụng Google Pay. Từ đó, bạn có thể tiếp tục và thêm một nút để bắt đầu quá trình thanh toán khi kích hoạt người dùng (ví dụ: nhấp vào nút).

Thêm một nút để thanh toán bằng Google Pay

Mặc dù bạn có thể sử dụng bất kỳ nút nào tuân theo nguyên tắc thương hiệu của Google Pay để bắt đầu quy trình thanh toán, nhưng bạn nên tạo nút bằng cách sử dụng API Google Pay. Bằng cách này, bạn không chỉ đảm bảo sử dụng chính xác các nguyên tắc thương hiệu mà còn được hưởng lợi từ các cải tiến khác được tích hợp trực tiếp vào nút, chẳng hạn như bản địa hóa.

Để tạo một nút, hãy dùng phương thức createButton trong đối tượng PaymentsClient, bao gồm cả ButtonOptions để định cấu hình nút.

Trong index.js bên trong hàm createAndAddButton(), hãy dán nội dung sau đây:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

Thuộc tính bắt buộc duy nhất khi sử dụng createButton là onClick. Thuộc tính này cần thiết để xác định đối tượng hoặc hàm gọi lại để kích hoạt mỗi khi người dùng của bạn kích hoạt nút này. buttonColor và buttonType cho phép bạn tùy chỉnh giao diện của nút. Điều chỉnh các thông số này cho phù hợp dựa trên các yêu cầu về giao diện và giao diện người dùng trong ứng dụng của bạn.

Sau khi nút được tạo, bạn chỉ cần thêm nút này vào một nút thích hợp trong DOM. Trong ví dụ này, một nút div được xác định bằng buy-now sẽ được dùng cho mục đích này.

Xem rằng bạn cũng đã xác định một hàm để xử lý các sự kiện nhấp vào nút. Trong phần tiếp theo, bạn sử dụng hàm này để yêu cầu phương thức thanh toán.

Chuẩn bị yêu cầu thanh toán

Tại thời điểm này, bạn đã tải API Google Pay và xác định rằng người dùng trang web của bạn có thể sử dụng Google Pay để thanh toán. Nhờ đó, bạn đã hiển thị nút thanh toán của Google Pay trên giao diện người dùng và giờ người dùng đã sẵn sàng bắt đầu giao dịch. Giờ là lúc tải bảng thanh toán cuối cùng chứa các phương thức thanh toán cho những người dùng đã đăng nhập khác nhau.

Giống như bạn đã làm trước đó, trong khi định nghĩa yêu cầu isReadyToPay, lệnh gọi này cũng yêu cầu các thuộc tính trong đối tượng cấu hình cơ sở được xác định trước đó (apiVersion, apiVersionMinor và allowedPaymentMethods) ngoài một số thuộc tính mới. Lần này, có một thuộc tính mới, tokenizationSpecification và parameters khác trong phương thức thanh toán của bạn có liên quan đến mục đích của yêu cầu này. Ngoài ra, bạn cần thêm transactionInfo và merchantInfo.

Cung cấp thêm thông tin bắt buộc trong các phương thức thanh toán

Hãy bắt đầu bằng cách tạo bản sao của phương thức thanh toán bằng thẻ cơ sở mà bạn đã sử dụng trước đây. Giờ đây, phương thức thanh toán bằng thẻ này yêu cầu tài sản tokenizationSpecification để xác định cách xử lý dữ liệu liên quan đến phương thức thanh toán đã chọn, cũng như các yêu cầu khác về dữ liệu cần thiết cho giao dịch thực tế: trong ví dụ này là một địa chỉ thanh toán đầy đủ và số điện thoại.

Tài sản `tokenizationSpecification`

Thông số kỹ thuật mã hóa xác định cách xử lý và sử dụng phương thức thanh toán mà khách hàng của bạn chọn để hoàn tất giao dịch.

Có hai loại chiến lược xử lý khác nhau. Nếu bạn đang xử lý giao dịch thanh toán từ trong máy chủ tuân thủ tiêu chuẩn PCI DSS của bạn, hãy sử dụng loại đặc tả DIRECT. Trong ví dụ này, bạn sử dụng cổng thanh toán để xử lý khoản thanh toán, do đó bạn đặt loại thông số kỹ thuật của PAYMENT_GATEWAY.