Cảm ơn bạn đã theo dõi Google I/O! Xem nội dung theo yêu cầu.

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

Xử lý thông tin thanh toán không bắt buộc bằng một worker dịch vụ

Cách điều chỉnh ứng dụng thanh toán dựa trên web cho phù hợp với Web Payments và mang lại trải nghiệm người dùng tốt hơn cho khách hàng.

Eiji Kitamura

Sau khi một ứng dụng thanh toán dựa trên web nhận được yêu cầu thanh toán và bắt đầu giao dịch thanh toán, service worker sẽ đóng vai trò là trung tâm liên lạc giữa người bán và ứng dụng thanh toán. Bài đăng này giải thích cách ứng dụng thanh toán có thể truyền thông tin về phương thức thanh toán, địa chỉ giao hàng hoặc thông tin liên hệ cho người bán bằng cách sử dụng service worker.

Xử lý thông tin thanh toán không bắt buộc bằng một worker dịch vụ

Thông báo cho người bán

Bạn cần thông báo cho người bán về những thay đổi sau.

Thay đổi phương thức thanh toán

Các ứng dụng thanh toán có thể hỗ trợ nhiều công cụ thanh toán với các phương thức thanh toán khác nhau.

Khách hàng	Phương thức thanh toán	Phương thức thanh toán
A	Tổ chức phát hành thẻ tín dụng 1	`****1234`
	Tổ chức phát hành thẻ tín dụng 1	`****4242`
	Ngân hàng X	`******123`
B	Tổ chức phát hành thẻ tín dụng 2	`****5678`
B	Ngân hàng X	`******456`

Ví dụ: trong bảng trên, ví dựa trên web của Khách hàng A có 2 thẻ tín dụng và 1 tài khoản ngân hàng đã đăng ký. Trong trường hợp này, ứng dụng đang xử lý 3 công cụ thanh toán (****1234, ****4242, ******123) và 2 phương thức thanh toán (Tổ chức phát hành thẻ tín dụng 1 và Ngân hàng X). Trong một giao dịch thanh toán, ứng dụng thanh toán có thể cho phép khách hàng chọn một trong các công cụ thanh toán và sử dụng công cụ đó để thanh toán cho người bán.

Giao diện người dùng của bộ chọn phương thức thanh toán

Ứng dụng thanh toán có thể cho người bán biết khách hàng đã chọn phương thức thanh toán nào trước khi gửi phản hồi thanh toán đầy đủ. Điều này sẽ hữu ích khi người bán muốn chạy một chiến dịch chiết khấu cho một thương hiệu phương thức thanh toán cụ thể, chẳng hạn như.

Với Payment Handler API, ứng dụng thanh toán có thể gửi sự kiện "thay đổi phương thức thanh toán" cho người bán thông qua một worker dịch vụ để thông báo giá trị nhận dạng phương thức thanh toán mới. Service worker phải gọi PaymentRequestEvent.changePaymentMethod() bằng thông tin phương thức thanh toán mới.

Thông báo cho người bán về việc thay đổi phương thức thanh toán

Các ứng dụng thanh toán có thể truyền một đối tượng methodDetails làm đối số thứ hai không bắt buộc cho PaymentRequestEvent.changePaymentMethod(). Đối tượng này có thể chứa thông tin chi tiết tuỳ ý về phương thức thanh toán mà người bán cần để xử lý sự kiện thay đổi.

[payment handler] service-worker.js

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'PAYMENT_METHOD_CHANGED':
        const newMethod = e.data.paymentMethod;
        const newDetails = e.data.methodDetails;
        // Redact or check that no sensitive information is passed in
        // `newDetails`.
        // Notify the merchant of the payment method change
        details =
          await payment_request_event.changePaymentMethod(newMethod, newDetails);
      …

Khi nhận được sự kiện paymentmethodchange từ Payment Request API, người bán có thể cập nhật thông tin thanh toán và phản hồi bằng một đối tượng PaymentDetailsUpdate.

[người bán]

request.addEventListener('paymentmethodchange', e => {
  if (e.methodName === 'another-pay') {
    // Apply $10 discount for example.
    const discount = {
      label: 'special discount',
      amount: {
        currency: 'USD',
        // The value being string complies the spec
        value: '-10.00'
      }
    };
    let total = 0;
    details.displayItems.push(discount);
    for (let item of details.displayItems) {
     total += parseFloat(item.amount.value);
    }
    // Convert the number back to string
    details.total.amount.value = total.toString();
  }
  // Pass a promise to `updateWith()` and send updated payment details
  e.updateWith(details);
});

Khi người bán phản hồi, lời hứa mà PaymentRequestEvent.changePaymentMethod() trả về sẽ phân giải bằng một đối tượng PaymentRequestDetailsUpdate.

[payment handler] service-worker.js

…
        // Notify the merchant of the payment method change
        details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

Sử dụng đối tượng này để cập nhật giao diện người dùng trên giao diện người dùng. Xem phần Phản ánh thông tin thanh toán mới cập nhật.

Thay đổi địa chỉ giao hàng

Ứng dụng thanh toán có thể cung cấp địa chỉ giao hàng của khách hàng cho người bán trong quá trình giao dịch thanh toán.

Điều này hữu ích cho người bán vì họ có thể uỷ quyền việc thu thập địa chỉ cho các ứng dụng thanh toán. Ngoài ra, vì dữ liệu địa chỉ sẽ được cung cấp theo định dạng dữ liệu tiêu chuẩn, nên người bán có thể nhận được địa chỉ giao hàng theo cấu trúc nhất quán.

Ngoài ra, khách hàng có thể đăng ký thông tin địa chỉ bằng ứng dụng thanh toán mà họ muốn và sử dụng lại thông tin đó cho nhiều người bán.

Giao diện người dùng bộ chọn địa chỉ giao hàng — Giao diện người dùng của bộ chọn địa chỉ giao hàng

Các ứng dụng thanh toán có thể cung cấp giao diện người dùng để chỉnh sửa địa chỉ giao hàng hoặc chọn thông tin địa chỉ đã đăng ký trước cho khách hàng trong một giao dịch thanh toán. Khi xác định tạm thời một địa chỉ giao hàng, ứng dụng thanh toán có thể cho người bán biết thông tin địa chỉ đã được chỉnh sửa. Điều này mang lại cho người bán nhiều lợi ích:

Người bán có thể xác định xem khách hàng có đáp ứng quy định hạn chế theo khu vực để vận chuyển mặt hàng hay không (ví dụ: chỉ vận chuyển trong nước).
Người bán có thể thay đổi danh sách các lựa chọn vận chuyển dựa trên khu vực của địa chỉ giao hàng (Ví dụ: vận chuyển quốc tế thông thường hoặc vận chuyển nhanh).
Người bán có thể áp dụng phí vận chuyển mới dựa trên địa chỉ và cập nhật tổng giá.

Với Payment Handler API, ứng dụng thanh toán có thể gửi sự kiện "thay đổi địa chỉ giao hàng" cho người bán từ trình chạy dịch vụ để thông báo địa chỉ giao hàng mới. Trình chạy dịch vụ sẽ gọi PaymentRequestEvent.changeShippingAddress() bằng đối tượng địa chỉ mới.

Thông báo cho người bán về việc thay đổi địa chỉ giao hàng

[payment handler] service-worker.js

...
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'SHIPPING_ADDRESS_CHANGED':
        const newAddress = e.data.shippingAddress;
        details =
          await payment_request_event.changeShippingAddress(newAddress);
      …

Cụm từ khoá: Địa chỉ đã được che đi. Trong trường hợp này, bạn không cần phải thông báo địa chỉ giao hàng đầy đủ cho người bán và điều này có thể gây rủi ro cho quyền riêng tư của khách hàng. Người bán chỉ nhận được những phần địa chỉ mà họ cần để xác định phí vận chuyển. Cụ thể, trình duyệt sẽ xoá các trường organization, phone, recipient, addressLine khỏi địa chỉ do ứng dụng thanh toán cung cấp trước khi tăng sự kiện shippingaddresschange trong DOM của người bán.

Người bán sẽ nhận được sự kiện shippingaddresschange từ PaymentRequest API để họ có thể phản hồi bằng PaymentDetailsUpdate đã cập nhật.

[người bán]

request.addEventListener('shippingaddresschange', e => {
  // Read the updated shipping address and update the request.
  const addr = request.shippingAddress;
  const details = getPaymentDetailsFromShippingAddress(addr);
  // `updateWith()` sends back updated payment details
  e.updateWith(details);
});

Khi người bán phản hồi, promise PaymentRequestEvent.changeShippingAddress() được trả về sẽ phân giải bằng một đối tượng PaymentRequestDetailsUpdate.

[payment handler] service-worker.js

…
        // Notify the merchant of the shipping address change
        details = await payment_request_event.changeShippingAddress(newAddress);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

Sử dụng đối tượng này để cập nhật giao diện người dùng trên giao diện người dùng. Xem phần Phản ánh thông tin thanh toán mới cập nhật.

Thông báo cho người bán về việc thay đổi lựa chọn vận chuyển

Lựa chọn vận chuyển là phương thức giao hàng mà người bán sử dụng để vận chuyển các mặt hàng đã mua cho khách hàng. Các lựa chọn vận chuyển thường gặp bao gồm:

Giao hàng miễn phí
Dịch vụ vận chuyển nhanh
Vận chuyển quốc tế
Dịch vụ vận chuyển quốc tế cao cấp

Mỗi lựa chọn đều có chi phí riêng. Thông thường, các phương thức và lựa chọn nhanh hơn sẽ đắt hơn.

Những người bán sử dụng Payment Request API có thể uỷ quyền lựa chọn này cho một ứng dụng thanh toán. Ứng dụng thanh toán có thể sử dụng thông tin này để tạo một giao diện người dùng và cho phép khách hàng chọn một lựa chọn vận chuyển.

Giao diện người dùng của bộ chọn lựa chọn vận chuyển

Danh sách các lựa chọn vận chuyển được chỉ định trong Payment Request API của người bán sẽ được truyền đến trình chạy dịch vụ của ứng dụng thanh toán dưới dạng một thuộc tính của PaymentRequestEvent.

[người bán]

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: { transactionId: '****' }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  shippingOptions: [{
    id: 'standard',
    label: 'Standard',
    amount: { value: '0.00', currency: 'USD' },
    selected: true
  }, {
    id: 'express',
    label: 'Express',
    amount: { value: '5.00', currency: 'USD' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {  requestShipping: true });

Ứng dụng thanh toán có thể cho người bán biết khách hàng đã chọn hình thức vận chuyển nào. Điều này rất quan trọng đối với cả người bán và khách hàng vì việc thay đổi lựa chọn vận chuyển cũng sẽ thay đổi tổng giá. Người bán cần được thông báo về giá mới nhất để xác minh khoản thanh toán sau này và khách hàng cũng cần biết về sự thay đổi này.

Với Payment Handler API, ứng dụng thanh toán có thể gửi sự kiện "thay đổi lựa chọn vận chuyển" cho người bán từ trình chạy dịch vụ. Service worker phải gọi PaymentRequestEvent.changeShippingOption() bằng mã lựa chọn vận chuyển mới.

Thông báo cho người bán về việc thay đổi lựa chọn vận chuyển

[payment handler] service-worker.js

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'SHIPPING_OPTION_CHANGED':
        const newOption = e.data.shippingOptionId;
        details =
          await payment_request_event.changeShippingOption(newOption);
      …

Người bán sẽ nhận được sự kiện shippingoptionchange từ Payment Request API. Người bán phải sử dụng thông tin này để cập nhật tổng giá, sau đó phản hồi bằng PaymentDetailsUpdate đã cập nhật.

[người bán]

request.addEventListener('shippingoptionchange', e => {
  // selected shipping option
  const shippingOption = request.shippingOption;
  const newTotal = {
    currency: 'USD',
    label: 'Total due',
    value: calculateNewTotal(shippingOption),
  };
  // `updateWith()` sends back updated payment details
  e.updateWith({ total: newTotal });
});

Khi người bán phản hồi, lời hứa mà PaymentRequestEvent.changeShippingOption() trả về sẽ phân giải bằng một đối tượng PaymentRequestDetailsUpdate.

[payment handler] service-worker.js

…
        // Notify the merchant of the shipping option change
        details = await payment_request_event.changeShippingOption(newOption);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

Sử dụng đối tượng này để cập nhật giao diện người dùng trên giao diện người dùng. Xem phần Phản ánh thông tin thanh toán mới cập nhật.

Phản ánh thông tin thanh toán mới cập nhật

Sau khi người bán cập nhật xong thông tin thanh toán, các lời hứa được trả về từ .changePaymentMethod(), .changeShippingAddress() và .changeShippingOption() sẽ phân giải bằng một đối tượng PaymentRequestDetailsUpdate chung. Trình xử lý thanh toán có thể sử dụng kết quả này để phản ánh tổng giá và các lựa chọn vận chuyển mới nhất cho giao diện người dùng.

Người bán có thể trả về lỗi vì một số lý do:

Phương thức thanh toán không được chấp nhận.
Địa chỉ giao hàng nằm ngoài các khu vực được hỗ trợ.
Địa chỉ giao hàng chứa thông tin không hợp lệ.
Bạn không thể chọn phương thức vận chuyển cho địa chỉ giao hàng đã cung cấp hoặc vì một số lý do khác.

Hãy sử dụng các thuộc tính sau để phản ánh trạng thái lỗi:

error: Chuỗi lỗi mà con người có thể đọc được. Đây là chuỗi phù hợp nhất để hiển thị cho khách hàng.
shippingAddressErrors: AddressErrors đối tượng chứa chuỗi lỗi chi tiết cho mỗi thuộc tính địa chỉ. Điều này rất hữu ích nếu bạn muốn mở một biểu mẫu cho phép khách hàng chỉnh sửa địa chỉ và bạn cần chuyển họ trực tiếp đến các trường không hợp lệ.
paymentMethodErrors: Đối tượng lỗi dành riêng cho phương thức thanh toán. Bạn có thể yêu cầu người bán cung cấp một lỗi có cấu trúc, nhưng các tác giả của thông số kỹ thuật Web Payments khuyên bạn nên giữ lỗi này ở dạng một chuỗi đơn giản.

Mã mẫu

Hầu hết mã mẫu mà bạn thấy trong tài liệu này đều là đoạn trích từ một ứng dụng mẫu.

Cách dùng thử:

Truy cập vào https://paymentrequest-demo.glitch.me/.
Chuyển tới cuối trang.
Nhấn vào Thêm nút thanh toán.
Nhập https://paymenthandler-demo.glitch.me vào trường Giá trị nhận dạng phương thức thanh toán.
Nhấn nút Thanh toán bên cạnh trường này.

Xử lý thông tin thanh toán không bắt buộc bằng một worker dịch vụ Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Thông báo cho người bán

Thay đổi phương thức thanh toán

Thay đổi địa chỉ giao hàng

Thông báo cho người bán về việc thay đổi lựa chọn vận chuyển

Phản ánh thông tin thanh toán mới cập nhật

Mã mẫu

Xử lý thông tin thanh toán không bắt buộc bằng một worker dịch vụ