Giao dịch thanh toán bằng Thanh toán trên web bắt đầu bằng việc phát hiện ứng dụng thanh toán của bạn. Hãy tìm hiểu cách thiết lập phương thức thanh toán và chuẩn bị sẵn sàng cho ứng dụng thanh toán của bạn để người bán và khách hàng thanh toán.
Để sử dụng được với Payment Request API (API Yêu cầu thanh toán), ứng dụng thanh toán phải được liên kết với một giá trị nhận dạng phương thức thanh toán. Người bán muốn tích hợp với một ứng dụng thanh toán sẽ sử dụng giá trị nhận dạng phương thức thanh toán để cho trình duyệt biết thông tin đó. Bài viết 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 để trình duyệt khám phá và gọi ứng dụng thanh toán đú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 những bài viết sau trước tiên:
- Nâng cao hiệu quả cho ứng dụng thanh toán bằng dịch vụ 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ố công nghệ và trạng thái hỗ trợ 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 những 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ừ khi mã nhận dạng phương thức thanh toán do bên thứ ba cung cấp)
- Tệp kê khai ứng dụng web
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 một yêu cầu đến URL mã nhận dạng phương thức thanh toán và tìm nạp tệp kê khai phương thức thanh toán.
- Trình duyệt xác định URL tệp kê khai ứng dụng web từ 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 sẽ 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 để các trình duyệt có thể khám phá phương thức đó.
Bước 1: Cung cấp mã nhận dạng phương thức thanh toán
Giá trị nhận dạng phương thức thanh toán 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 giá trị nhận dạng phương thức thanh toán, miễn là họ có quyền kiểm soát URL đó và có thể phân phát nội dung tuỳ ý. Trong bài viết này, chúng tôi sẽ sử dụng https://bobbucks.dev/pay làm giá trị nhận dạng phương thức thanh toán.
Cách người bán sử dụng mã nhận dạng phương thức thanh toán
Tạo đối tượng PaymentRequest bằng một danh sách giá trị nhận dạng phương thức thanh toán giúp xác định các ứng dụng thanh toán 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 tài sản 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 yêu cầu HTTP GET tới URL của mã nhận dạng phương thức thanh toán.
Máy chủ sẽ phản hồi bằng nội dung tệp kê khai phương thức thanh toán.
Tệp kê khai phương thức thanh toán có hai trường là default_applications và supported_origins.
| Tên tài sản | Nội dung mô tả |
|---|---|
default_applications (bắt buộc) |
Một loạt URL trỏ đến tệp kê khai ứng dụng web nơi lưu trữ ứng dụng thanh toán. (URL có thể là URL tương đối). Mảng này dự kiến sẽ tham chiếu đến tệp kê khai phát triển, tệp kê khai sản xuất, v.v. |
supported_origins |
Một mảng URL trỏ đến những nguồn gốc có thể lưu trữ các ứng dụng thanh toán của bên thứ ba triển khai cùng một phương thức thanh toán. Xin lưu ý rằng nhiều ứng dụng thanh toán có thể triển khai phương thức thanh toán. |
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 các ứng dụng thanh toán được hỗ trợ.
Định tuyến trình duyệt (không bắt buộc) để 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 cách sử dụng tiêu đề Link trỏ đến một URL khác nơi trình duyệt có thể tìm nạp tệp kê khai phương thức thanh toán. Việc 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 một máy chủ khác hoặc khi ứng dụng thanh toán do một bên thứ ba phân phát.
Định cấu hình máy chủ phương thức thanh toán để phản hồi bằng tiêu đề HTTP Link có thuộc tính rel="payment-method-manifest" và URL tệp kê khai phương thức thanh toán.
Ví dụ: nếu tệp kê khai nằm tại https://bobbucks.dev/payment-manifest.json, thì 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. Hãy kiểm tra https://bobbucks.dev/pay/ để biết lưu lượng truy cập mạng để xem ví dụ. Bạn cũng 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 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 một Ứ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 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 xuất hiện trong giao diện người dùng của Yêu cầu thanh toán.
| Tên tài sản | Nội dung 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 mới dùng các biểu tượng này; các trình duyệt khác có thể dùng chúng làm biểu tượng dự phòng nếu bạn không chỉ định các biểu tượng đó trong 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 ứng dụng thanh toán dựa trên web. |
serviceworker.src |
URL để tải tập lệnh trình chạy dịch vụ xuống. |
serviceworker.scope |
Một chuỗi đại diện cho URL xác định phạm vi đăng ký của một trình chạy dịch vụ. |
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 dưới dạng ứng dụng thanh toán do hệ điều hành cung cấp. Tìm hiểu thêm thông tin chi tiết tại Hướng dẫn cho nhà phát triển ứng dụng thanh toán trên Android. |
prefer_related_applications
|
Dùng để xác định ứng dụng thanh toán nào sẽ 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 web. |
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, thuộc tính icons đượ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 sẽ 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, còn phiên bản tối thiểu (
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, còn phiên bản tối thiểu (
- Trường
prefer_related_applicationslà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 của
org.chromium.action.PAY. - Giá trị 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 của
Hãy xem hướng dẫn dành cho nhà phát triển về Ứng dụng thanh toán trên Android để biết thêm thông tin về cách thiết lập những ứng dụng 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 ứng dụng thanh toán dành riêng cho nền tảng đang hoạt động, thì quy trình khám phá sẽ kết thúc tại đây. Nếu không, ứng dụng 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 web.
Ra mắt ứng dụng thanh toán dựa trên 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 sự kiện paymentrequest đến trình chạy dịch vụ. Trình chạy dịch vụ không cần phải được đăng ký trước. Tài sản này có thể được đăng ký kịp thời.
Tìm hiểu các chế độ 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à khởi chạy trực tiếp ứng dụng thanh toán
Trong Chrome, khi phương thức show() của PaymentRequest được gọi, API Yêu cầu thanh toán sẽ hiển thị một giao diện người dùng do trình duyệt cung cấp có tên là "Giao diện người dùng yêu cầu thanh toán". Giao diện người dùng này cho phép người dùng chọn một ứng dụng thanh toán. Sau khi nhấn nút Continue (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 chạy ứng dụng thanh toán sẽ làm tăng số bước cần thiết để người dùng thực hiện thanh toán. Để tối ưu hoá quy trình, trình duyệt có thể uỷ quyền thực hiện thông tin đó cho các ứng dụng thanh toán và chạy trực tiếp một ứ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() được gọi.
Để khởi chạy trực tiếp ứ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 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ợ mã nhận dạng phương thức thanh toán được yêu cầu.
Khi nào 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ười dùng có thể chạy ứng dụng thanh toán dựa trên nền tảng web mà không cần phải truy cập rõ ràng trước đó vào trang web của ứng dụng thanh toán và đăng ký trình chạy dịch vụ. Có thể đăng ký trình chạy dịch vụ ngay khi người dùng chọn thanh toán bằng ứng dụng thanh toán dựa trên web. Thời gian đăng ký có hai biến thể:
- Nếu người dùng thấy giao diện người dùng Yêu cầu thanh toán, thì ứng dụng sẽ được đăng ký đúng lúc và chạy khi người dùng nhấp vào Continue (Tiếp tục).
- Nếu giao diện người dùng Yêu cầu thanh toán bị bỏ qua, thì ứng dụng thanh toán sẽ được đăng ký đúng lúc và khởi chạy trực tiếp. Việc bỏ qua giao diện người dùng Yêu cầu thanh toán để khởi chạy một ứng dụng được đăng ký đúng thời điểm sẽ yêu cầu cử chỉ của người dùng, giúp ngăn chặn việc đăng ký ngoài dự kiến của trình thực thi dịch vụ trên nhiều nguồn gốc.
Các bước tiếp theo
Giờ đây, khi 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 thanh toán dành riêng cho nền tảng và ứng dụng thanh toán dựa trên nền tảng web.