Một giao dịch thanh toán bằng Thanh toán trên web bắt đầu bằng việc khám phá ra ứng dụng thanh toán. Tìm hiểu cách thiết lập phương thức thanh toán và tải ứng dụng thanh toán sẵn sàng để người bán và khách hàng thanh toán.
Để dùng với API yêu cầu thanh toán, ứng dụng thanh toán phải được liên kết với mã nhận dạng phương thức thanh toán. Người bán muốn tích hợp với ứng dụng thanh toán sẽ sử dụng mã nhận dạng phương thức thanh toán để cho trình duyệt biết. Chiến dịch này thảo luận về cách hoạt động của tính năng khám phá ứng dụng thanh toán cũng như cách định cấu hình ứng dụng thanh toán được trình duyệt phát hiện và gọi ra đúng cách.
Nếu bạn chưa quen với khái niệm Thanh toán trên web hoặc cách hoạt động của giao dịch thanh toán thông qua các ứng dụng thanh toán, hãy đọc trước các bài viết sau:
- Hỗ trợ các ứng dụng thanh toán bằng phương thức Thanh toán trên web
- Vòng đời của một giao dịch thanh toán
Hỗ trợ trình duyệt
Thanh toán trên web bao gồm một số phần công nghệ và hỗ trợ trạng thái phụ thuộc vào trình duyệt.
Cách trình duyệt phát hiện ứng dụng thanh toán
Mọi ứng dụng thanh toán đều cần cung cấp các thông tin sau:
- Mã nhận dạng phương thức thanh toán dựa trên URL
- Tệp kê khai phương thức thanh toán (trừ phi mã nhận dạng phương thức thanh toán là do bên thứ ba cung cấp)
- Tệp kê khai ứng dụng web
![Sơ đồ: Cách trình duyệt phát hiện ứng dụng thanh toán qua giá trị nhận dạng phương thức thanh toán dựa trên URL](https://web.dev/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=19&hl=vi)
Quá trình khám phá bắt đầu khi người bán bắt đầu một giao dịch:
- Trình duyệt gửi yêu cầu đến phương thức thanh toán nhận dạng và tìm nạp phương thức thanh toán tệp kê khai.
- Trình duyệt xác định ứng dụng web tệp kê khai URL của tệp kê khai phương thức thanh toán và tìm nạp tệp kê khai ứng dụng web.
- Trình duyệt xác định xem sẽ chạy ứng dụng thanh toán trên hệ điều hành hay ứng dụng thanh toán dựa trên nền tảng web từ tệp kê khai ứng dụng web.
Các phần tiếp theo sẽ giải thích chi tiết cách thiết lập phương thức thanh toán của riêng bạn để mà các trình duyệt có thể phát hiện ra.
Bước 1: Cung cấp giá trị nhận dạng phương thức thanh toán
Phương thức thanh toán
giá trị nhận dạng
là một chuỗi dựa trên URL. Ví dụ: giá trị nhận dạng của Google Pay là
https://google.com/pay
. Nhà phát triển ứng dụng thanh toán có thể chọn bất kỳ URL nào làm khoản thanh toán
giá trị nhận dạng phương thức miễn là chúng có quyền kiểm soát và có thể phân phát tuỳ ý
nội dung. Trong bài viết này, chúng tôi sẽ sử dụng
https://bobbucks.dev/pay
làm phương thức thanh toán
giá trị nhận dạng.
Cách người bán sử dụng mã nhận dạng phương thức thanh toán
Đối tượng PaymentRequest
được tạo bằng danh sách phương thức thanh toán
mã nhận dạng xác định khoản thanh toán
những ứng dụng mà người bán quyết định chấp nhận. Giá trị nhận dạng phương thức thanh toán được đặt làm giá trị
cho thuộc tính supportedMethods
. Ví dụ:
[người bán] yêu cầu thanh toán:
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
Bước 2: Phân phát tệp kê khai phương thức thanh toán
Tệp kê khai phương thức thanh toán là một Tệp JSON xác định ứng dụng thanh toán nào có thể dùng phương thức thanh toán này.
Cung cấp tệp kê khai phương thức thanh toán
Khi người bán thực hiện một giao dịch thanh toán, trình duyệt sẽ gửi một HTTP
Yêu cầu GET
đối với URL của mã nhận dạng phương thức thanh toán.
Máy chủ phản hồi bằng phương thức thanh toán
nội dung tệp kê khai.
Tệp kê khai phương thức thanh toán có hai trường, default_applications
và
supported_origins
Tên tài sản | Mô tả |
---|---|
default_applications (bắt buộc) |
Một mảng URL trỏ đến tệp kê khai ứng dụng web nơi thanh toán ứng dụng được lưu trữ. (URL có thể là một URL tương đối). Mảng này được dự kiến để tham chiếu tệp kê khai phát triển, tệp kê khai chính thức, v.v. |
supported_origins |
Một mảng URL trỏ đến những nguồn có thể lưu trữ máy chủ của bên thứ ba ứng dụng thanh toán triển khai cùng một phương thức thanh toán. Xin lưu ý rằng việc thanh toán có thể được nhiều ứng dụng thanh toán triển khai. |
Tệp kê khai phương thức thanh toán sẽ có dạng như sau:
[trình xử lý thanh toán] /payment-manifest.json:
{
"default_applications": ["https://bobbucks.dev/manifest.json"],
"supported_origins": [
"https://alicepay.friendsofalice.example"
]
}
Khi đọc trường default_applications
, trình duyệt sẽ tìm thấy danh sách
đường liên kết đến tệp kê khai ứng dụng web của
ứng dụng thanh toán.
Tùy chọn định tuyến trình duyệt để tìm tệp kê khai phương thức thanh toán ở một vị trí khác
URL của mã nhận dạng phương thức thanh toán có thể phản hồi bằng một tiêu đề Link
(không bắt buộc)
trỏ đến một URL khác mà trình duyệt có thể tìm nạp phương thức thanh toán
tệp kê khai. Điều này rất hữu ích khi tệp kê khai phương thức thanh toán được lưu trữ tại
hoặc khi ứng dụng thanh toán được phân phát bởi một bên thứ ba.
Định cấu hình máy chủ phương thức thanh toán để phản hồi bằng một tiêu đề HTTP Link
chứa
thuộc tính rel="payment-method-manifest"
và phương thức thanh toán
tệp kê khai.
Ví dụ: nếu tệp kê khai nằm tại https://bobbucks.dev/payment-manifest.json
,
tiêu đề phản hồi sẽ bao gồm:
Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"
URL đó có thể là một tên miền đủ điều kiện hoặc một đường dẫn tương đối. Kiểm tra
https://bobbucks.dev/pay/
cho lưu lượng truy cập mạng để xem ví dụ. Bạn có thể sử dụng
Lệnh curl
:
curl --include https://bobbucks.dev/pay
Bước 3: Phân phát tệp kê khai ứng dụng web
Tệp kê khai ứng dụng web là dùng để xác định một ứng dụng web đúng như tên gợi ý. Đây là một tệp kê khai được sử dụng rộng rãi để xác định Ứng dụng web tiến bộ (PWA).
Tệp kê khai ứng dụng web thông thường sẽ có dạng như sau:
[trình xử lý thanh toán] /manifest.json:
{
"name": "Pay with Bobpay",
"short_name": "Bobpay",
"description": "This is an example of the Payment Handler API.",
"icons": [
{
"src": "images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"serviceworker": {
"src": "service-worker.js",
"scope": "/",
"use_cache": false
},
"start_url": "/",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"related_applications": [
{
"platform": "play",
"id": "com.example.android.samplepay",
"min_version": "1",
"fingerprints": [
{
"type": "sha256_cert",
"value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
}
]
}
]
}
Thông tin được mô tả trong tệp kê khai ứng dụng web cũng được dùng để xác định cách ứng dụng thanh toán sẽ xuất hiện trong giao diện người dùng Yêu cầu thanh toán.
Tên tài sản | Mô tả |
---|---|
name (bắt buộc)
|
Được dùng làm tên ứng dụng thanh toán. |
icons (bắt buộc)
|
Được dùng làm biểu tượng ứng dụng thanh toán. Chỉ Chrome sử dụng các biểu tượng này; hạng mục khác các trình duyệt có thể sử dụng chúng làm biểu tượng dự phòng nếu bạn không chỉ định chúng của phương thức thanh toán. |
serviceworker
|
Dùng để phát hiện trình chạy dịch vụ chạy dưới dạng khoản thanh toán dựa trên nền tảng web . |
serviceworker.src |
URL để tải tập lệnh trình chạy dịch vụ xuống. |
serviceworker.scope |
Chuỗi đại diện cho một URL xác định URL của trình chạy dịch vụ phạm vi đăng ký. |
serviceworker.use_cache |
URL để tải tập lệnh trình chạy dịch vụ xuống. |
related_applications
|
Dùng để phát hiện ứng dụng hoạt động như ứng dụng thanh toán do hệ điều hành cung cấp. Tìm hiểu thêm chi tiết tại Android hướng dẫn cho nhà phát triển ứng dụng thanh toán. |
prefer_related_applications
|
Dùng để xác định ứng dụng thanh toán nào cần khởi chạy khi có cả ứng dụng thanh toán do hệ điều hành cung cấp và ứng dụng thanh toán dựa trên nền tảng web. |
![Ứng dụng thanh toán có biểu tượng.](https://web.dev/static/articles/setting-up-a-payment-method/image/payment-app-an-icon-3150130974ec9.png?authuser=19&hl=vi)
Thuộc tính name
của tệp kê khai ứng dụng web được dùng làm tên ứng dụng thanh toán, icons
tài sản được dùng làm biểu tượng ứng dụng thanh toán.
Cách Chrome xác định ứng dụng thanh toán cần khởi chạy
Ra mắt ứng dụng thanh toán dành riêng cho nền tảng
Để chạy ứng dụng thanh toán dành riêng cho nền tảng, bạn phải đáp ứng các điều kiện sau:
- Trường
related_applications
được chỉ định trong tệp kê khai ứng dụng web và:- Mã gói và chữ ký của ứng dụng đã cài đặt trùng khớp với nhau, trong khi
phiên bản (
min_version
) trong tệp kê khai ứng dụng web nhỏ hơn hoặc bằng phiên bản của ứng dụng đã cài đặt.
- Mã gói và chữ ký của ứng dụng đã cài đặt trùng khớp với nhau, trong khi
phiên bản (
- Trường
prefer_related_applications
làtrue
. - Ứng dụng thanh toán dành riêng cho nền tảng đã được cài đặt và có:
- Bộ lọc ý định
org.chromium.action.PAY
. - Mã nhận dạng phương thức thanh toán được chỉ định làm giá trị cho tài sản
org.chromium.default_payment_method_name
.
- Bộ lọc ý định
Xem Ứng dụng thanh toán trên Android: hướng dẫn dành cho nhà phát triển để biết thêm chi tiết về cách thiết lập các báo cáo này.
[trình xử lý thanh toán] /manifest.json
"prefer_related_applications": true,
"related_applications": [{
"platform": "play",
"id": "xyz.bobpay.app",
"min_version": "1",
"fingerprints": [{
"type": "sha256_cert",
"value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
}]
}]
Nếu trình duyệt đã xác định rằng có ứng dụng thanh toán dành riêng cho nền tảng, thì luồng khám phá bị chấm dứt tại đây. Nếu không, thao tác này sẽ tiếp tục sang bước tiếp theo -- khởi chạy ứng dụng thanh toán dựa trên nền tảng web.
Ra mắt ứng dụng thanh toán dựa trên nền tảng web
Bạn phải chỉ định ứng dụng thanh toán dựa trên nền tảng web trong trường serviceworker
của tệp kê khai ứng dụng web.
[trình xử lý thanh toán] /manifest.json:
"serviceworker": {
"src": "payment-handler.js"
}
Trình duyệt chạy ứng dụng thanh toán dựa trên nền tảng web bằng cách gửi một paymentrequest
sự kiện cho trình chạy dịch vụ. Service worker không cần phải được đăng ký trong
nâng cao. Có thể đăng ký ngay.
Hiểu rõ các tối ưu hoá đặc biệt
Cách trình duyệt có thể bỏ qua giao diện người dùng Yêu cầu thanh toán và chạy ứng dụng thanh toán trực tiếp
Trong Chrome, khi phương thức show()
của PaymentRequest
được gọi, phương thức Thanh toán
API yêu cầu hiển thị giao diện người dùng do trình duyệt cung cấp được gọi là "Giao diện người dùng yêu cầu thanh toán". Chiến dịch này
Giao diện người dùng cho phép người dùng chọn ứng dụng thanh toán. Sau khi nhấn nút Tiếp tục
trong giao diện người dùng Yêu cầu thanh toán, ứng dụng thanh toán đã chọn sẽ được khởi chạy.
Việc hiển thị giao diện người dùng Yêu cầu thanh toán trước khi khởi chạy ứng dụng thanh toán sẽ làm tăng
số bước cần thiết để người dùng hoàn tất một khoản thanh toán. Để tối ưu hoá quy trình,
trình duyệt có thể ủy quyền thực hiện thông tin đó cho các ứng dụng thanh toán và
trực tiếp chạy ứng dụng thanh toán mà không cần hiển thị giao diện người dùng Yêu cầu thanh toán khi
show()
sẽ được gọi.
Để trực tiếp chạy ứng dụng thanh toán, bạn phải đáp ứng các điều kiện sau:
show()
được kích hoạt bằng một cử chỉ của người dùng (ví dụ: nhấp chuột).- Chỉ có một ứng dụng thanh toán duy nhất:
- Hỗ trợ giá trị nhận dạng phương thức thanh toán được yêu cầu.
Khi nào thì một ứng dụng thanh toán dựa trên nền tảng web được đăng ký đúng thời điểm (JIT)?
Ứng dụng thanh toán dựa trên nền tảng web có thể chạy được mà không cần người dùng phải truy cập rõ ràng trước đó truy cập vào trang web của ứng dụng thanh toán và đăng ký trình chạy dịch vụ. Dịch vụ worker có thể được đăng ký ngay khi người dùng chọn thanh toán bằng ứng dụng thanh toán dựa trên nền tảng web. Có hai biến thể về thời gian đăng ký:
- Nếu người dùng nhìn thấy giao diện người dùng Yêu cầu thanh toán thì ứng dụng đã được đăng ký và khởi chạy khi người dùng nhấp vào Tiếp tục.
- Nếu giao diện người dùng Yêu cầu thanh toán bị bỏ qua, tức là ứng dụng thanh toán đã được đăng ký kịp thời và được phát hành trực tiếp. Bỏ qua giao diện người dùng Yêu cầu thanh toán để khởi chạy ứng dụng đăng ký đúng thời điểm cần có cử chỉ của người dùng, điều này ngăn đăng ký bất ngờ trình chạy dịch vụ trên nhiều nguồn gốc.
Các bước tiếp theo
Giờ bạn đã có thể tìm thấy ứng dụng thanh toán của mình, hãy tìm hiểu cách phát triển một ứng dụng dành riêng cho từng nền tảng ứng dụng thanh toán và ứng dụng thanh toán dựa trên nền tảng web.