Cách điều chỉnh ứng dụng thanh toán dựa trên nền tảng web cho phù hợp với tính năng Thanh toán trên web và cung cấp trải nghiệm tốt hơn cho khách hàng.
Khi ứ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, dịch vụ sẽ đóng vai trò là trung tâm giao tiếp 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 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 trình chạy dịch vụ.
Thông báo cho người bán về việc 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ới nhiều phương thức thanh toán.
| Khách hàng | Phương thức thanh toán | Phương thức thanh toán |
|---|---|---|
| A | Công ty phát hành thẻ tín dụng 1 | ****1234 |
| Công ty phát hành thẻ tín dụng 1 | ****4242 |
|
| Ngân hàng X | ******123 |
|
| B | Công ty phát hành thẻ tín dụng 2 | ****5678 |
| 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à một tài khoản ngân hàng đã được đăng ký. Trong trường hợp này, ứng dụng sẽ xử lý 3 phương thức thanh toán (****1234, ****4242, ******123) và 2 phương thức thanh toán (Công ty phát hành thẻ tín dụng 1 và Ngân hàng X). Trên 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 phương thức thanh toán và dùng phương thức đó để thanh toán cho người bán.
Ứng dụng thanh toán có thể cho người bán biết phương thức thanh toán mà khách hàng đã chọn trước khi gửi phản hồi thanh toán đầy đủ. Điều này rất hữu ích khi người bán muốn chạy chiến dịch giảm giá cho một thương hiệu phương thức thanh toán cụ thể, chẳng hạn như.
Với API Trình xử lý thanh toán, ứ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 trình chạy dịch vụ để thông báo cho giá trị nhận dạng phương thức thanh toán mới. Trình chạy dịch vụ sẽ gọi PaymentRequestEvent.changePaymentMethod() kèm theo thông tin về phương thức thanh toán mới.
Các ứng dụng thanh toán có thể truyền đố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 về phương thức thanh toán tuỳ ý cần thiết để người bán xử lý sự kiện thay đổi.
[trình xử lý thanh toán] 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 một sự kiện paymentmethodchange từ API Yêu cầu thanh toán, người bán có thể cập nhật thông tin thanh toán và phản hồi bằng đố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 rằng PaymentRequestEvent.changePaymentMethod() được trả về sẽ được giải quyết bằng đối tượng PaymentRequestDetailsUpdate.
[trình xử lý thanh toán] 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 đã cập nhật.
Thông báo cho người bán về việc thay đổi địa chỉ giao hàng
Các ứ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 ở đị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 ưu tiên và sử dụng lại ứng dụng đó cho nhiều người bán.
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 địa chỉ giao hàng được xác định tạm thời, ứng dụng thanh toán có thể cho người bán biết về thông tin địa chỉ đã bị loại bỏ. Đ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 tuỳ chọn vận chuyển dựa trên khu vực của địa chỉ giao hàng (Ví dụ: quốc tế thông thường hoặc chuyển phát 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 API Trình xử lý thanh toán, ứ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.
[trình xử lý thanh toán] 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);
…
Người bán sẽ nhận được sự kiện shippingaddresschange từ API Yêu cầu thanh toán để 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, lời hứa PaymentRequestEvent.changeShippingAddress() được trả về sẽ được giải quyết bằng đối tượng PaymentRequestDetailsUpdate.
[trình xử lý thanh toán] 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 đã cập nhật.
Thông báo cho người bán về việc thay đổi cách tính phí vận chuyển
Tùy 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 đến khách hàng. Cách tính phí vận chuyển thông thường bao gồm:
- Giao hàng miễn phí
- Vận chuyển nhanh
- Vận chuyển quốc tế
- Vận chuyển quốc tế đặc biệt
Mỗi phương pháp đều có chi phí riêng. Thông thường, phương thức/tuỳ chọn nhanh hơn sẽ đắt hơn.
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 giao diện người dùng và cho phép khách hàng chọn một tuỳ chọn vận chuyển.
Danh sách các cách tính phí vận chuyển đã chỉ định trong Payment Request API (API Yêu cầu thanh toán) 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 tuỳ chọn giao hàng mà khách hàng đã chọn. Điều này quan trọng đối với cả người bán và khách hàng vì việc thay đổi cách tính phí vận chuyển cũng sẽ làm 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 nắm được sự thay đổi này.
Với API Trình xử lý thanh toán, ứng dụng thanh toán có thể gửi sự kiện "thay đổi tuỳ chọn vận chuyển" cho người bán từ trình chạy dịch vụ. Trình chạy dịch vụ sẽ gọi PaymentRequestEvent.changeShippingOption() bằng mã tuỳ chọn vận chuyển mới.
[trình xử lý thanh toán] 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ừ API Yêu cầu thanh toán. Người bán nên sử dụng thông tin này để cập nhật tổng giá rồi 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 rằng PaymentRequestEvent.changeShippingOption() được trả về sẽ được giải quyết bằng đối tượng PaymentRequestDetailsUpdate.
[trình xử lý thanh toán] 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 đã 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 trả về từ .changePaymentMethod(), .changeShippingAddress() và .changeShippingOption() sẽ được giải quyết 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 tuỳ chọn vận chuyển đã cập nhật cho giao diện người dùng.
Người bán có thể báo lỗi vì một số lý do:
- Phương thức thanh toán này không được chấp nhận.
- Địa chỉ giao hàng nằm ngoài 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 tùy chọn vận chuyển cho địa chỉ giao hàng đã cung cấp hoặc một số lý do khác.
Hãy 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 tốt nhất để hiển thị cho khách hàng.shippingAddressErrors: Đối tượngAddressErrorschứa chuỗi lỗi chi tiết cho mỗi thuộc tính địa chỉ. Việc 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ỉ của họ và bạn cần trực tiếp đưa họ đến các trường không hợp lệ.paymentMethodErrors: Đối tượng lỗi của từng phương thức thanh toán. Bạn có thể yêu cầu người bán cung cấp lỗi có cấu trúc, nhưng tác giả thông số kỹ thuật của dịch vụ Thanh toán trên web khuyên bạn chỉ nên dùng một chuỗi đơn giản.
Mã mẫu
Hầu hết các mã mẫu bạn thấy trong tài liệu này đều được trích dẫn từ ứng dụng mẫu hoạt động sau đây:
https://paymenthandler-demo.glitch.me
trình chạy dịch vụ [trình xử lý thanh toán]
[trình xử lý thanh toán] giao diện người dùng
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.mevào trường Mã nhận dạng phương thức thanh toán. - Nhấn vào nút Thanh toán bên cạnh trường này.