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

Vòng đời của một giao dịch thanh toán

Tìm hiểu cách người bán tích hợp ứng dụng thanh toán và cách hoạt động của giao dịch thanh toán bằng API yêu cầu thanh toán.

Eiji Kitamura

Milica Mihajlija

API thanh toán trên web là các tính năng thanh toán chuyên biệt được tích hợp vào trình duyệt lần đầu tiên. Với Thanh toán trên web, người bán tích hợp với các ứng dụng thanh toán trở nên đơn giản hơn trong khi trải nghiệm khách hàng được sắp xếp hợp lý và an toàn hơn.

Để tìm hiểu thêm về lợi ích khi sử dụng dịch vụ Thanh toán trên web, hãy xem bài viết Trao quyền ứng dụng thanh toán bằng phương thức Thanh toán trên web.

Bài viết này hướng dẫn bạn thực hiện một giao dịch thanh toán trên trang web của người bán và giúp bạn hiểu cách hoạt động của tính năng tích hợp ứng dụng thanh toán.

Quy trình này bao gồm 6 bước:

Người bán bắt đầu một giao dịch thanh toán.
Người bán sẽ hiện một nút thanh toán.
Khách hàng nhấn vào nút thanh toán.
Trình duyệt chạy ứng dụng thanh toán.
Nếu khách hàng thay đổi bất kỳ thông tin nào (chẳng hạn như cách tính phí vận chuyển hoặc địa chỉ), người bán sẽ cập nhật chi tiết giao dịch phản ánh sự thay đổi.
Sau khi khách hàng xác nhận giao dịch mua hàng, người bán sẽ xác thực khoản thanh toán và hoàn tất giao dịch.

Bước 1: Người bán bắt đầu một giao dịch thanh toán

Khi khách hàng quyết định mua hàng, người bán sẽ thực hiện thanh toán bằng cách tạo một PaymentRequest . Đối tượng này bao gồm thông tin quan trọng về giao dịch:

Các phương thức thanh toán được chấp nhận và dữ liệu của những phương thức đó để xử lý giao dịch.
Thông tin chi tiết, chẳng hạn như tổng giá (bắt buộc) và thông tin về các mặt hàng.
Những lựa chọn mà người bán có thể yêu cầu thông tin vận chuyển, chẳng hạn như phí vận chuyển địa chỉ và phương thức giao hàng.
Người bán cũng có thể yêu cầu địa chỉ thanh toán, tên, email và số điện thoại của họ.
Người bán cũng có thể thêm phí vận chuyển không bắt buộc loại (shipping, delivery hoặc pickup) trong PaymentRequest. Ứng dụng thanh toán có thể sử dụng gợi ý đó để hiển thị đúng nhãn trong giao diện người dùng.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

Bao gồm mã giao dịch

Một số trình xử lý thanh toán có thể yêu cầu người bán cung cấp mã giao dịch mà họ đã cấp trước trong thông tin giao dịch. Đáp Tích hợp thông thường bao gồm giao tiếp giữa máy chủ của trình xử lý thanh toán để đặt trước tổng giá. Việc này giúp ngăn chặn độc hại khách hàng thao túng giá và gian lận người bán bằng vào cuối giao dịch.

Người bán có thể chuyển mã giao dịch như một phần của PaymentMethodData thuộc tính data của đối tượng.

Được cung cấp thông tin giao dịch, trình duyệt sẽ trải qua một khám phá quy trình ứng dụng thanh toán được chỉ định trong PaymentRequest dựa trên khoản thanh toán mã nhận dạng phương thức. Bằng cách này, trình duyệt có thể xác định ứng dụng thanh toán ngay khi người bán sẵn sàng tiếp tục giao dịch.

Để tìm hiểu chi tiết cách hoạt động của quá trình khám phá, hãy xem bài viết Thiết lập thanh toán .

Bước 2: Người bán cho thấy nút thanh toán

Người bán có thể hỗ trợ nhiều phương thức thanh toán, nhưng chỉ được trình bày khoản thanh toán cho những nút mà khách hàng có thể thực sự sử dụng. Hiển thị nút thanh toán không sử dụng được là trải nghiệm người dùng kém. Nếu người bán có thể dự đoán rằng phương thức thanh toán được chỉ định trong đối tượng PaymentRequest sẽ không hoạt động đối với khách hàng, họ có thể cung cấp giải pháp dự phòng hoặc hoàn toàn không hiển thị nút đó.

Khi sử dụng thực thể PaymentRequest, người bán có thể truy vấn xem khách hàng đã ứng dụng thanh toán hiện có.

Khách hàng có dùng được ứng dụng thanh toán không?

Chiến lược phát hành đĩa đơn canMakePayment() của PaymentRequest sẽ trả về true nếu ứng dụng thanh toán có trên thiết bị của khách hàng. "Có sẵn" có nghĩa là một ứng dụng thanh toán hỗ trợ phát hiện phương thức thanh toán và ứng dụng thanh toán dành riêng cho nền tảng đã được cài đặt, hoặc ứng dụng thanh toán dựa trên nền tảng web đã sẵn sàng đã đăng ký.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

Bước 3: Khách hàng nhấn vào nút thanh toán

Khi khách hàng nhấn nút thanh toán, người bán sẽ gọi đến số show() của thực thể PaymentRequest. Phương thức này ngay lập tức kích hoạt việc khởi chạy giao diện người dùng thanh toán.

Trong trường hợp tổng giá cuối cùng được đặt linh động (ví dụ: lấy từ một máy chủ), người bán có thể hoãn việc khởi chạy giao diện người dùng thanh toán cho đến khi tổng số đã biết.

Hoãn khởi chạy giao diện người dùng thanh toán

Xem bản minh hoạ về cách trì hoãn thanh toán Giao diện người dùng cho đến khi tổng giá cuối cùng là xác định.

Để hoãn giao diện người dùng thanh toán, người bán chuyển lời hứa đến phương thức show(). Trình duyệt sẽ hiển thị chỉ báo tải cho đến khi lời hứa được giải quyết và giao dịch đã sẵn sàng để bắt đầu.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

Nếu không có lời hứa nào được chỉ định làm đối số cho show(), trình duyệt sẽ khởi chạy giao diện người dùng thanh toán ngay lập tức.

Bước 4: Trình duyệt chạy ứng dụng thanh toán

Trình duyệt có thể chạy một ứng dụng thanh toán dựa trên nền tảng web hoặc một nền tảng cụ thể. (Bạn có thể tìm hiểu thêm về cách Chrome xác định ứng dụng thanh toán nào cần .)

Phần lớn nhà phát triển sẽ quyết định cách xây dựng ứng dụng thanh toán, nhưng các sự kiện được phát ra từ và được gửi đến người bán, cũng như cấu trúc của dữ liệu cùng với những sự kiện đó, được chuẩn hoá.

Khi được khởi chạy, ứng dụng thanh toán sẽ nhận được giao dịch của bạn truyền đến đối tượng PaymentRequest ở Bước 1, bao gồm những nội dung sau:

Dữ liệu về phương thức thanh toán
Tổng giá
Các cách thanh toán

Ứng dụng thanh toán sử dụng thông tin giao dịch để gắn nhãn cho giao diện người dùng.

Bước 5: Cách người bán cập nhật thông tin giao dịch tuỳ thuộc vào hành động của khách hàng

Khách hàng có thể thay đổi thông tin giao dịch, chẳng hạn như thanh toán phương thức và cách tính phí vận chuyển trong ứng dụng thanh toán. Trong khi khách hàng chỉnh sửa, người bán nhận được sự kiện thay đổi và cập nhật chi tiết giao dịch.

Có 4 loại sự kiện mà người bán có thể nhận được:

Sự kiện thay đổi phương thức thanh toán
Sự kiện thay đổi địa chỉ giao hàng
Sự kiện thay đổi cách tính phí vận chuyển
Sự kiện xác thực người bán

Sự kiện thay đổi phương thức thanh toán

Ứng dụng thanh toán có thể hỗ trợ nhiều phương thức thanh toán và người bán có thể cung cấp chiết khấu đặc biệt tuỳ theo lựa chọn của khách hàng. Để áp dụng cho trường hợp sử dụng này, sự kiện thay đổi phương thức thanh toán có thể thông báo cho người bán về khoản thanh toán mới để họ có thể cập nhật tổng giá đã giảm giá và trả lại nó quay lại ứng dụng thanh toán.

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

Sự kiện 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 (không bắt buộc). Đây là thuận tiện cho khách hàng vì họ không phải nhập thủ công bất kỳ thông tin nào vào một biểu mẫu và họ có thể lưu trữ địa chỉ giao hàng trong phương thức thanh toán họ muốn chứ không phải trên nhiều trang web của người bán.

Nếu khách hàng cập nhật địa chỉ giao hàng trong ứng dụng thanh toán sau ngày đã bắt đầu giao dịch, sự kiện 'shippingaddresschange' sẽ được gửi cho người bán. Sự kiện này giúp người bán xác định dựa trên phí vận chuyển trên địa chỉ mới, hãy cập nhật tổng giá rồi gửi trả lại cho ứng dụng thanh toán.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

Nếu không thể giao hàng đến địa chỉ mới, người bán có thể đưa ra thông báo lỗi bằng cách thêm thông số lỗi vào chi tiết giao dịch được trả về ứng dụng thanh toán.

Sự kiện thay đổi cách tính phí vận chuyển

Người bán có thể cung cấp nhiều hình thức vận chuyển cho khách hàng và có thể uỷ quyền lựa chọn đó cho ứng dụng thanh toán. Tùy chọn vận chuyển được hiển thị dưới dạng danh sách giá và tên dịch vụ mà khách hàng có thể chọn. Ví dụ:

Giao hàng chuẩn - Miễn phí
Vận chuyển nhanh - 5 USD

Khi khách hàng cập nhật cách tính phí vận chuyển trong một ứng dụng thanh toán, 'shippingoptionchange' sự kiện sẽ được gửi đến người bán. Người bán có thể sau đó xác định phí vận chuyển, cập nhật tổng giá rồi trả lại ứng dụng thanh toán.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

Người bán có thể linh động sửa đổi cách tính phí vận chuyển dựa trên lựa chọn của khách hàng địa chỉ giao hàng. Điều này rất hữu ích khi người bán muốn cung cấp các tập hợp hình thức vận chuyển khác nhau cho khách hàng trong nước và quốc tế.

Sự kiện xác thực người bán

Để tăng cường khả năng bảo mật, ứng dụng thanh toán có thể xác thực người bán trước chuyển sang quy trình thanh toán. Thiết kế của cơ chế xác thực tuỳ thuộc vào ứng dụng thanh toán, nhưng sự kiện xác thực người bán là thông báo cho người bán của URL mà họ có thể sử dụng để tự xác thực.

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

Bước 6: Người bán xác thực khoản thanh toán và hoàn tất giao dịch

Khi khách hàng cho phép thanh toán thành công, phương thức show() trả về một lời hứa giải quyết PaymentResponse. Đối tượng PaymentResponse bao gồm các thông tin sau:

Chi tiết về kết quả thanh toán
Ðịa chỉ giao hàng
Cách tính phí vận chuyển
Thông tin liên hệ

Tại thời điểm này, giao diện người dùng của trình duyệt có thể vẫn hiển thị chỉ báo đang tải, tức là giao dịch chưa hoàn tất.

Nếu ứng dụng thanh toán bị chấm dứt do lỗi hoặc lỗi thanh toán, lời hứa được trả về từ show() bị từ chối và trình duyệt chấm dứt khoản thanh toán giao dịch.

Xử lý và xác thực khoản thanh toán

details trong PaymentResponse là đối tượng thông tin xác thực thanh toán được trả về thông qua ứng dụng thanh toán. Người bán có thể sử dụng thông tin đăng nhập để xử lý hoặc xác thực khoản thanh toán đó. Cách hoạt động của quy trình quan trọng này sẽ tuỳ thuộc vào trình xử lý thanh toán.

Hoàn tất hoặc thử lại giao dịch

Sau khi người bán xác định xem giao dịch thành công hay không thành công, họ có thể:

Gọi phương thức .complete() để hoàn tất giao dịch và đóng chỉ báo đang tải.
Cho phép khách hàng thử lại bằng cách gọi phương thức retry().

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

Các bước tiếp theo

Tìm hiểu chi tiết cách khai báo mã nhận dạng phương thức thanh toán trong bài viết Thiết lập phương thức thanh toán.
Tìm hiểu cách tạo ứng dụng thanh toán dành riêng cho nền tảng trong Hướng dẫn dành cho nhà phát triển ứng dụng thanh toán trên Android.
Tìm hiểu cách tạo ứng dụng thanh toán dựa trên nền tảng web trong hướng dẫn.