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 hệ thống Thanh toán trên web và cung cấp trải nghiệm tốt hơn cho khách hàng.
Sau khi một ứng dụng thanh toán dựa trên nền tảng web nhận được yêu cầu thanh toán và tiến hành thanh toán giao dịch, thì trình chạy dịch vụ sẽ hành động làm 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 một ứng dụng thanh toán có thể chuyể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ệ của mình cho người bán bằng cách sử dụng một nhân viên 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 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 |
| 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ó hai khoản tín dụng
thẻ và một tài khoản ngân hàng đã đăng ký. Trong trường hợp này, ứng dụng đang xử lý 3
phương thức thanh toán (****1234, ****4242, ******123) và hai khoản 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, khoản thanh toán
ứng dụng có thể cho phép khách hàng chọn một trong các phương thức thanh toán và sử 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 khách hàng sử dụng phương thức thanh toán nào được chọn trước khi gửi toàn bộ phản hồi thanh toán. Điều này rất hữu ích khi người bán muốn chạy một chiến dịch giảm giá cho một thương hiệu có phương thức thanh toán cụ thể, ví dụ:
Với Payment Handler API (API Trình xử lý thanh toán), ứng dụng thanh toán có thể gửi một "thay đổi về phương thức thanh toán"
sự kiện đến người bán thông qua một trình chạy dịch vụ để thông báo về phương thức thanh toán mới
giá trị nhận dạng. Service worker sẽ gọi
PaymentRequestEvent.changePaymentMethod() bằng phương thức thanh toán mới
của bạn.
Ứng dụng thanh toán có thể chuyển đối tượng methodDetails dưới dạng đối số thứ hai (không bắt buộc)
trong 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ỳ ý bắt buộc để người bán xử lý thay đổi
sự kiện.
[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 người bán nhận được một sự kiện paymentmethodchange từ mục Thanh toán
Yêu cầu API, họ có thể cập nhật thông tin thanh toán và phản hồi bằ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 trả lời, lời hứa rằng
PaymentRequestEvent.changePaymentMethod()
sẽ được trả về.
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 để 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 chi tiết thanh toán.
Thông báo cho người bán về việc 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 như một phần của một giao dịch thanh toán.
Điều này sẽ hữu ích cho người bán vì họ có thể uỷ quyền việc thu thập địa chỉ cho ứng dụng thanh toán. Và bởi vì dữ liệu địa chỉ sẽ được cung cấp trong tiêu chuẩn định dạng dữ liệu, 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ỉ với ứng dụng thanh toán ưa thích và sử dụng lại ứng dụng đó cho các người bán khác nhau.
Ứ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 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 phép người bán biết thông tin địa chỉ đã bị che khuất. Nhờ đó, người bán sẽ 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 hay không để vận chuyển mặt hàng (ví dụ: chỉ vận chuyển trong nước).
- Người bán có thể thay đổi danh sách cách tính phí vận chuyển dựa trên khu vực của địa chỉ giao hàng (Ví dụ: địa chỉ thường xuyên hoặc chuyển phát nhanh quốc tế).
- 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 "địa chỉ giao hàng
thay đổi" sự kiện gửi cho người bán từ nhân viên dịch vụ để thông báo về việc vận chuyển mới
của bạn. Service worker sẽ gọi
PaymentRequestEvent.changeShippingAddress()
với địa chỉ mới
đối tượng.
[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 một sự kiện shippingaddresschange từ trang Thanh toán
Yêu cầu 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 trả lời, lời hứa
PaymentRequestEvent.changeShippingAddress()
sẽ được trả về.
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 để 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 chi tiết thanh toán.
Thông báo cho người bán về việc thay đổi cách tính phí 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 đến khách hàng. Các hình thức 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ế cao cấp
Mỗi chiến dịch có chi phí riêng. Thông thường, các phương thức/tuỳ chọn nhanh hơn sẽ tốn kém hơn.
Người bán sử dụng API yêu cầu thanh toán có thể uỷ quyền lựa chọn này cho một khoản thanh toán . Ứng dụng thanh toán có thể 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 tùy chọn vận chuyển.
Danh sách các tùy chọn giao hàng được chỉ định trong API yêu cầu thanh toán của người bán là
đã truyền đến trình chạy dịch vụ của ứng dụng thanh toán dưới dạng 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 sử dụng cách tính phí vận chuyển nào đã 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 cho quá trình xác minh thanh toán sau này và khách hàng cũng cần nhận thức được sự thay đổi này.
Với Payment Handler API (API Trình xử lý thanh toán), ứng dụng thanh toán có thể gửi "tuỳ chọn vận chuyển"
thay đổi" sự kiện cho người bán từ trình chạy dịch vụ. Trình chạy dịch vụ phải
gọi
PaymentRequestEvent.changeShippingOption()
bằng mã cách tính phí 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 một sự kiện shippingoptionchange từ trang Thanh toán
API yêu cầu. Người bán phải sử dụng thông tin này để cập nhật tổng giá
rồi sau đó phản hồi bằng
PaymentDetailsUpdate.
[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 trả lời, lời hứa rằng
PaymentRequestEvent.changeShippingOption()
sẽ được trả về.
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 để 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 chi tiết thanh toán.
Phản ánh thông tin thanh toán mới
Sau khi người bán cập nhật xong thông tin thanh toán, người bán sẽ nhận được hàng đã hứa hẹn
từ .changePaymentMethod(), .changeShippingAddress() và
.changeShippingOption() sẽ phân giải bằng một lỗi chung
PaymentRequestDetailsUpdate
. Trình xử lý thanh toán có thể sử dụng kết quả này để phản ánh tổng giá đã cập nhật
và cách tính phí vận chuyển lên giao diện người dùng.
Có thể người bán sẽ trả về 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 các khu vực được hỗ trợ.
- Địa chỉ giao hàng chứa thông tin không hợp lệ.
- Không thể chọn cách tính phí vận chuyển cho địa chỉ giao hàng bạn cung cấp hoặc 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 tốt nhất để hiển thị với khách hàng.shippingAddressErrors:AddressErrorschứa chuỗi lỗi chi tiết cho mỗi thuộc tính địa chỉ. Đây là 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ỏ trực tiếp họ đến các trường không hợp lệ.paymentMethodErrors: Đối tượng lỗi theo phương thức thanh toán cụ thể. Bạn có thể yêu cầu người bán đưa ra lỗi có cấu trúc, nhưng tác giả thông số kỹ thuật của Thanh toán trên web bạn 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 từ những phần sau ứng dụng mẫu hoạt động:
https://paymenthandler-demo.glitch.me
[trình xử lý thanh toán] nhân viên dịch vụ
[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 nút Thêm 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.