Thiết lập phương thức thanh toán

Giao dịch thanh toán bằng Web Payments bắt đầu bằng việc khám phá ứng dụng thanh toán của bạn. Tìm hiểu cách thiết lập phương thức thanh toán và chuẩn bị ứng dụng thanh toán cho người bán và khách hàng thực hiện thanh toán.

Eiji Kitamura

Xuất bản: Ngày 27 tháng 9 năm 2017, Lần cập nhật gần đây nhất: Ngày 16 tháng 10 năm 2026

Để sử dụng với Payment Request API, ứ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 điều đó. 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 và cách định cấu hình ứng dụng thanh toán để trình duyệt khám phá và gọi đúng cách.

Nếu bạn mới sử dụng tính năng Thanh toán trên web, hãy đọc trước bài viết Tổng quan về tính năng Thanh toán trên web.

Các loại ứng dụng thanh toán

Một phương thức thanh toán có thể được hỗ trợ bởi một ứng dụng thanh toán Android, một ứng dụng thanh toán chạy trên nền tảng web hoặc cả hai:

• Ứng dụng thanh toán Android: Một ứng dụng cần cài đặt mà Chrome khởi chạy bằng một ý định Android. Chrome xác minh tên gói và chứng chỉ ký của ứng dụng.
• Ứng dụng thanh toán chạy trên nền tảng web: Một trình chạy dịch vụ mà Chrome khởi chạy trong cửa sổ phụ. Người dùng không cần cài đặt gì cả.

Ứng dụng thanh toán Android có trong Chrome trên Android và trong WebView. Ứng dụng thanh toán chạy trên nền tảng web có trong Chrome trên tất cả các nền tảng, nhưng không có trong WebView.

Nếu cả hai loại ứng dụng đều có sẵn cho một phương thức thanh toán và tệp kê khai ứng dụng web của bạn đặt prefer_related_applications thành true, thì Chrome sẽ ẩn ứng dụng thanh toán dựa trên nền tảng web của bạn. Nếu không, người dùng có thể thấy cả hai trong giao diện người dùng của Yêu cầu thanh toán và chọn giữa hai ứng dụng này.

Hỗ trợ trình duyệt

Web Payments bao gồm một số công nghệ khác nhau và trạng thái hỗ trợ phụ thuộc vào trình duyệt.

Cách trình duyệt khám phá ứng dụng thanh toán

Mỗi ứng dụng thanh toán cần cung cấp những thông tin sau:

• Giá trị 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 (ngoại trừ trường hợp giá trị 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:

1. Trình duyệt gửi 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.
2. 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.
3. Trình duyệt xác định xem có nên chạy ứng dụng thanh toán của hệ điều hành hay ứng dụng thanh toán chạy trên nền tảng web từ tệp kê khai ứng dụng web hay không.

Các phần tiếp theo 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 để trình duyệt có thể khám phá phương thức đó.

Bước 1: Cung cấp giá trị 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ỳ ý cũng như tiêu đề HTTP. Trong bài viết này, chúng ta 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 giá trị nhận dạng phương thức thanh toán

Đối tượng PaymentRequest được tạo bằng danh sách mã 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 thuộc tính supportedMethods. Ví dụ:

[merchant] 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ể sử 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 bắt đầu một giao dịch thanh toán, trình duyệt sẽ gửi một yêu cầu HTTP HEAD đến URL giá trị nhận dạng phương thức thanh toán. URL giá trị nhận dạng phương thức thanh toán phản hồi bằng tiêu đề HTTP Link trỏ đến URL nơi trình duyệt có thể tìm nạp tệp kê khai phương thức thanh toán.

Đị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 ở https://bobbucks.dev/pay/payment-manifest.json, thì tiêu đề phản hồi sẽ bao gồm:

Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"

URL có thể là tên miền đủ điều kiện hoặc đường dẫn tương đối. Hãy kiểm tra https://bobbucks.dev/pay để xem ví dụ về lưu lượng truy cập mạng. Bạn cũng có thể sử dụng lệnh curl:

curl --include https://bobbucks.dev/pay

Tiếp theo, trình duyệt sẽ gửi một yêu cầu HTTP GET đến URL tệp kê khai phương thức thanh toán. Máy chủ 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: default_applications và supported_origins.

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 các đườ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ợ.

Bước 3: Phân phát tệp kê khai ứng dụng web

Tệp kê khai ứng dụng web được dùng để xác định một ứng dụng web như tên gọi của tệp này. Đây là 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:

[payment handler] /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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

Chrome đọc các trường khác nhau tuỳ thuộc vào loại ứng dụng thanh toán. Đối với ứng dụng thanh toán Android, Chrome chỉ đọc related_applications. Đối với ứng dụng thanh toán dựa trên nền tảng web, Chrome sẽ đọc name, icons, serviceworker, payment và prefer_related_applications.

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 cần chạy

Chạy ứ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ần cài đặt khớp nhau, trong khi 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ần cài đặt.
• Ứ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.intent.action.PAY.
  • Giá trị nhận dạng phương thức thanh toán được chỉ định làm giá trị cho thuộc tính org.chromium.default_payment_method_name.

Hãy xem Ứng dụng thanh toán Android: hướng dẫn dành cho nhà phát triển để biết thêm thông tin chi tiết về cách thiết lập các ứng dụng này.

[payment handler] /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 prefer_related_applications là true và ứng dụng thanh toán dành riêng cho nền tảng có sẵn, thì Chrome sẽ ẩn ứng dụng thanh toán dựa trên nền tảng web. Nếu không, Chrome cũng sẽ tìm ứng dụng thanh toán dựa trên nền tảng web.

Chạy ứng dụng thanh toán trên nền tảng web

Ứng dụng thanh toán chạy trên nền tảng web phải được chỉ định trong trường serviceworker của tệp kê khai ứng dụng web.

[payment handler] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

Trình duyệt sẽ 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ụ. Bạn không cần phải đăng ký trước trình chạy dịch vụ. Bạn có thể đăng ký ngay khi cần.

Tìm hiểu về các tính năng tối ưu hoá đặc biệt

Cách trình duyệt có thể bỏ qua giao diện người dùng của Yêu cầu thanh toán và trực tiếp chạy ứ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 gọi 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 Tiếp tục trong giao diện người dùng của 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 của Payment Request 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 việc thực hiện thông tin đó cho các ứng dụng thanh toán và trực tiếp chạy một ứng dụng thanh toán mà không hiển thị giao diện người dùng của Yêu cầu thanh toán khi show() được gọi.

Để chạy trực tiếp một ứ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ợ giá trị nhận dạng phương thức thanh toán được yêu cầu.
  • Hỗ trợ tất cả thông tin vận chuyển và thông tin liên hệ mà người bán yêu cầu.

Khi nào ứng dụng thanh toán chạy trên nền tảng web được đăng ký đúng lúc (JIT)?

Bạn có thể chạy ứng dụng thanh toán dựa trên nền tảng web mà không cần người dùng truy cập rõ ràng vào trang web của ứng dụng thanh toán và đăng ký trình chạy dịch vụ. Bạn 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 chạy trên nền tảng web. Có hai biến thể cho thời gian đăng ký:

• Nếu giao diện người dùng của Yêu cầu thanh toán xuất hiện cho người dùng, thì ứng dụng sẽ được đăng ký đúng lúc và khởi chạy khi người dùng nhấp vào Tiếp tục.
• Nếu bỏ qua giao diện người dùng của Yêu cầu thanh toán, thì ứng dụng thanh toán sẽ được đăng ký đúng lúc và khởi chạy trực tiếp. Để bỏ qua giao diện người dùng của Yêu cầu thanh toán nhằm chạy một ứng dụng đã đăng ký đúng lúc, bạn cần có cử chỉ của người dùng. Thao tác này giúp ngăn chặn việc đăng ký ngoài dự kiến của trình chạy dịch vụ trên nhiều nguồn gốc.

Xây dựng ứng dụng thanh toán trên nền tảng web

Khi người bán gọi show(), Chrome sẽ gửi một sự kiện paymentrequest đến trình chạy dịch vụ của bạn. Gọi openWindow() bên trong respondWith() để hiện giao diện người dùng thanh toán, sau đó giải quyết bằng phản hồi thanh toán.

Để biết toàn bộ API, hãy xem API Trình xử lý thanh toán dựa trên nền tảng web trên MDN.

Các bước tiếp theo

• Hướng dẫn cho nhà phát triển ứng dụng thanh toán Android
• Cung cấp thông tin vận chuyển và thông tin liên hệ từ một ứng dụng thanh toán Android