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 để người bán và khách hàng thanh toán.

Eiji Kitamura

Để sử 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ộ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 để trình duyệt tìm thấy và gọi ứng dụng thanh toán đúng cách.

Nếu bạn mới làm 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 ứng dụng thanh toán, trước tiên, hãy đọc các bài viết sau:

• Tăng cường tính năng thanh toán cho ứng dụng bằng tính năng Thanh toán qua web
• Vòng đời của 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 (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

Quy 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ó 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 web từ tệp kê khai ứng dụng web hay không.

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

Mã 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 đối với URL đó và có thể phân phát nội dung tuỳ ý. 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 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 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ể 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 GET đến URL giá trị nhận dạng 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 là 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ẽ 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ợ.

Chuyển hướng trình duyệt để tìm tệp kê khai phương thức thanh toán ở một vị trí khác (không bắt buộc)

URL của giá trị nhận dạng phương thức thanh toán có thể phản hồi bằng một tiêu đề Link trỏ đến một URL khác mà trình duyệt có thể tìm nạp tệp kê khai phương thức thanh toán (không bắt buộc). Điều này 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 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 đề Link HTTP 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/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. 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ể 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 được dùng để xác định một ứng dụng web 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 được mô tả trong tệp kê khai ứng dụng web cũng dùng để xác định cách một ứng dụng thanh toán xuất hiện trong giao diện người dùng Yêu cầu thanh toán.

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 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 khớp với 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ài đặt.
• 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 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 thuộc tính org.chromium.default_payment_method_name.

Hãy 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 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 trình duyệt đã xác định rằng ứng dụng thanh toán dành riêng cho nền tảng có sẵn, thì quy trình khám phá sẽ bị chấm dứt tại đây. Nếu không, hệ thống sẽ tiếp tục sang bước tiếp theo – phát hành ứng dụng thanh toán dựa trên nền tảng web.

Chạy ứ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 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ụ. 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 các biện pháp 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, 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 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 thực hiện thanh toán. Để tối ưu hoá quy trình này, 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à trực tiếp khởi chạy ứng dụng thanh toán mà không hiển thị giao diện người dùng Yêu cầu thanh toán khi gọi show().

Để 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 ứng dụng thanh toán dựa trên web được đăng ký đúng lúc (JIT)?

Bạn có thể chạy các ứng dụng thanh toán dựa trên 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 trước đó và đăng ký worker dịch vụ. Bạn có thể đăng ký worker dịch vụ đúng lúc khi người dùng chọn thanh toán bằng ứng dụng thanh toán dựa trên web. Có hai biến thể về thời gian đăng ký:

• 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à khởi chạy khi người dùng nhấp vào Tiếp tục.
• Nếu bạn bỏ qua Giao diện người dùng yêu cầu thanh toán, ứ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 Yêu cầu thanh toán nhằm chạy một ứng dụng đã đăng ký đúng lúc, người dùng cần thực hiện một cử chỉ. Điều này giúp ngăn chặn việc đăng ký không mong muốn của worker dịch vụ trên nhiều nguồn gốc.

Các bước tiếp theo

Giờ đây, khi ứng dụng thanh toán của bạn có thể được tìm thấy, hãy tìm hiểu cách phát triển ứ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 web.

• Ứng dụng thanh toán trên Android: hướng dẫn dành cho nhà phát triển
• Hướng dẫn dành cho nhà phát triển ứng dụng thanh toán dựa trên web