Menyiapkan metode pembayaran

Transaksi pembayaran menggunakan Pembayaran Web dimulai dengan penemuan aplikasi pembayaran. Pelajari cara menyiapkan metode pembayaran dan mendapatkan aplikasi pembayaran agar penjual dan pelanggan dapat melakukan pembayaran.

Eiji Kitamura

Agar dapat digunakan dengan Payment Request API, aplikasi pembayaran harus dikaitkan dengan ID metode pembayaran Anda. Penjual yang ingin berintegrasi dengan aplikasi pembayaran akan menggunakan ID metode pembayaran untuk menunjukkannya ke browser. Ini membahas cara kerja penemuan aplikasi pembayaran, dan cara mengonfigurasi agar aplikasi pembayaran mudah ditemukan dan dipanggil oleh browser.

Jika Anda baru mengenal konsep Pembayaran Web atau cara kerja transaksi pembayaran melalui aplikasi pembayaran, baca terlebih dahulu artikel berikut:

• Mendukung aplikasi pembayaran dengan Pembayaran Web
• Masa berlaku transaksi pembayaran

Dukungan browser

Pembayaran Web terdiri dari beberapa teknologi dan dukungan yang berbeda status tersebut bergantung pada browser.

Cara browser menemukan aplikasi pembayaran

Setiap aplikasi pembayaran harus menyediakan hal berikut:

• ID metode pembayaran berbasis URL
• Manifes metode pembayaran (kecuali jika ID metode pembayaran disediakan oleh pihak ketiga)
• Manifes aplikasi web

Proses penemuan dimulai saat penjual memulai transaksi:

1. Browser mengirimkan permintaan ke metode pembayaran ID URL dan pengambilan metode pembayaran manifes.
2. Browser menentukan aplikasi web URL manifes dari metode manifes metode pembayaran dan mengambil manifes aplikasi web.
3. Browser menentukan apakah akan meluncurkan aplikasi pembayaran OS atau aplikasi pembayaran berbasis web dari manifes aplikasi web.

Bagian selanjutnya menjelaskan secara mendetail cara menyiapkan metode pembayaran Anda sendiri, sehingga sehingga {i>browser<i} dapat menemukannya.

Langkah 1: Berikan ID metode pembayaran

Metode pembayaran ID adalah string berbasis URL. Misalnya, ID Google Pay adalah https://google.com/pay. Developer aplikasi pembayaran dapat memilih URL apa pun sebagai pembayaran ID metode selama memiliki kontrol atas metode tersebut dan dapat menyalurkan arbitrer saat ini. Dalam artikel ini, kita akan menggunakan https://bobbucks.dev/pay sebagai metode pembayaran yang sesuai.

Cara penjual menggunakan ID metode pembayaran

Objek PaymentRequest dibuat dengan daftar metode pembayaran ID yang mengidentifikasi pembayaran aplikasi yang akan diterima oleh penjual. ID metode pembayaran ditetapkan sebagai nilai untuk properti supportedMethods. Contoh:

[penjual] meminta pembayaran:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Langkah 2: Tayangkan manifes metode pembayaran

Manifes metode pembayaran adalah File JSON yang menentukan aplikasi pembayaran mana yang dapat menggunakan metode pembayaran ini.

Menyediakan manifes metode pembayaran

Saat penjual memulai transaksi pembayaran, browser akan mengirimkan permintaan Permintaan GET ke URL ID metode pembayaran. Server merespons dengan metode pembayaran isi manifes.

Manifes metode pembayaran memiliki dua kolom, default_applications dan supported_origins.

File manifes metode pembayaran akan terlihat seperti ini:

[pengendali pembayaran] /payment-manifes.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

Saat browser membaca kolom default_applications, browser akan menemukan daftar link ke manifes aplikasi web dari file yang didukung aplikasi pembayaran.

Rutekan browser secara opsional untuk menemukan manifes metode pembayaran di lokasi lain

URL ID metode pembayaran dapat merespons secara opsional dengan header Link yang mengarah ke URL lain tempat browser dapat mengambil metode pembayaran manifes. Hal ini berguna jika manifes metode pembayaran dihosting di server atau saat aplikasi pembayaran dilayani oleh pihak ketiga.

Konfigurasikan server metode pembayaran untuk merespons dengan header Link HTTP dengan atribut rel="payment-method-manifest" dan metode pembayaran URL manifes.

Misalnya, jika manifes berada di https://bobbucks.dev/payment-manifest.json, {i>header <i}respons akan mencakup:

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

URL dapat berupa nama domain yang sepenuhnya memenuhi syarat atau jalur relatif. Periksa https://bobbucks.dev/pay/ agar traffic jaringan dapat melihat contohnya. Anda dapat menggunakan Perintah curl juga:

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

Langkah 3: Sajikan manifes aplikasi web

Manifes aplikasi web adalah digunakan untuk mendefinisikan aplikasi web seperti yang disarankan namanya. Ini adalah file manifes yang banyak digunakan untuk menentukan Progressive Web App (PWA).

Manifes aplikasi web umum akan terlihat seperti ini:

[pengendali pembayaran] /manifes.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"
        }
      ]
    }
  ]
}

Informasi yang dijelaskan dalam manifes aplikasi web juga digunakan untuk menentukan bagaimana pembayaran akan muncul di UI Permintaan Pembayaran.

Properti name manifes aplikasi web digunakan sebagai nama aplikasi pembayaran, icons digunakan sebagai ikon aplikasi pembayaran.

Cara Chrome menentukan aplikasi pembayaran yang akan diluncurkan

Meluncurkan aplikasi pembayaran khusus platform

Untuk meluncurkan aplikasi pembayaran khusus platform, ketentuan berikut harus dipenuhi:

• Kolom related_applications ditentukan dalam manifes aplikasi web dan:
  • ID paket dan tanda tangan aplikasi yang diinstal cocok, sedangkan nilai minimum versi (min_version) di manifes aplikasi web kurang dari atau sama dengan versi aplikasi yang terinstal.
• Kolom prefer_related_applications adalah true.
• Aplikasi pembayaran khusus platform telah diinstal dan memiliki:
  • Filter intent org.chromium.action.PAY.
  • ID metode pembayaran yang ditentukan sebagai nilai untuk properti org.chromium.default_payment_method_name.

Lihat Aplikasi pembayaran Android: panduan developer untuk mengetahui detail selengkapnya tentang cara menyiapkannya.

[pengendali pembayaran] /manifes.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"
  }]
}]

Jika browser telah menentukan bahwa aplikasi pembayaran khusus platform tersedia, alur penemuan dihentikan di sini. Jika tidak, ini akan berlanjut ke langkah berikutnya -- meluncurkan aplikasi pembayaran berbasis web.

Meluncurkan aplikasi pembayaran berbasis web

Aplikasi pembayaran berbasis web harus ditetapkan dalam kolom serviceworker manifes aplikasi web.

[pengendali pembayaran] /manifes.json:

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

Browser meluncurkan aplikasi pembayaran berbasis web dengan mengirimkan paymentrequest ke pekerja layanan. Pekerja layanan tidak harus terdaftar di terlebih dahulu. Pendaftaran dapat didaftarkan tepat waktu.

Memahami pengoptimalan khusus

Cara browser dapat melewati UI Permintaan Pembayaran dan langsung meluncurkan aplikasi pembayaran

Di Chrome, saat metode show() dari PaymentRequest dipanggil, metode Request API menampilkan UI yang disediakan browser bernama "Payment Request UI". Ini UI memungkinkan pengguna untuk memilih aplikasi pembayaran. Setelah menekan tombol Continue di UI Permintaan Pembayaran, aplikasi pembayaran yang dipilih akan diluncurkan.

Menampilkan UI Permintaan Pembayaran sebelum meluncurkan aplikasi pembayaran akan meningkatkan jumlah langkah yang diperlukan bagi pengguna untuk memenuhi pembayaran. Untuk mengoptimalkan prosesnya, browser dapat mendelegasikan pemenuhan informasi itu ke aplikasi pembayaran dan meluncurkan aplikasi pembayaran secara langsung tanpa menampilkan UI Permintaan Pembayaran saat show() dipanggil.

Untuk meluncurkan aplikasi pembayaran secara langsung, ketentuan berikut harus dipenuhi:

• show() dipicu dengan gestur pengguna (misalnya, klik mouse).
• Hanya ada satu aplikasi pembayaran yang:
  • Mendukung ID metode pembayaran yang diminta.

Kapan aplikasi pembayaran berbasis web didaftarkan tepat waktu (JIT)?

Aplikasi pembayaran berbasis web dapat diluncurkan tanpa kunjungan eksplisit dari pengguna sebelumnya ke situs web aplikasi pembayaran dan mendaftarkan pekerja layanan. Layanan dapat didaftarkan tepat waktu ketika pengguna memilih untuk membayar dengan aplikasi pembayaran berbasis web. Ada dua variasi untuk waktu pendaftaran:

• Jika UI Permintaan Pembayaran ditampilkan kepada pengguna, berarti aplikasi telah didaftarkan tepat waktu, dan diluncurkan saat pengguna mengklik Continue.
• Jika UI Permintaan Pembayaran dilewati, aplikasi pembayaran akan didaftarkan tepat waktu dan langsung diluncurkan. Melewati UI Permintaan Pembayaran untuk meluncurkan aplikasi yang terdaftar pada waktu itu membutuhkan {i>gesture <i}pengguna, yang mencegah pendaftaran pekerja layanan lintas asal yang tidak terduga.

Langkah Berikutnya

Setelah aplikasi pembayaran Anda dapat ditemukan, pelajari cara mengembangkan platform aplikasi pembayaran dan aplikasi pembayaran berbasis web.

• Aplikasi pembayaran Android: panduan developer
• Panduan developer aplikasi pembayaran berbasis web