Menyiapkan metode pembayaran

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

Eiji Kitamura

Dipublikasikan: 27 September 2017, Terakhir diperbarui: 16 Oktober 2026

Agar dapat digunakan dengan Payment Request API, aplikasi pembayaran harus dikaitkan dengan ID metode pembayaran. Penjual yang ingin berintegrasi dengan aplikasi pembayaran akan menggunakan ID metode pembayaran untuk menunjukkan hal tersebut ke browser. Artikel ini membahas cara kerja penemuan aplikasi pembayaran, dan cara mengonfigurasi aplikasi pembayaran agar dapat ditemukan dan dipanggil dengan benar oleh browser.

Jika Anda baru menggunakan Pembayaran Web, baca Ringkasan Pembayaran Web terlebih dahulu.

Jenis aplikasi pembayaran

Metode pembayaran dapat didukung oleh aplikasi pembayaran Android, aplikasi pembayaran berbasis web, atau keduanya:

• Aplikasi pembayaran Android: Aplikasi terinstal yang diluncurkan Chrome dengan intent Android. Chrome memverifikasi nama paket dan sertifikat penandatanganan aplikasi.
• Aplikasi pembayaran berbasis web: Pekerja layanan yang diluncurkan Chrome di jendela modal. Pengguna tidak perlu menginstal apa pun.

Aplikasi pembayaran Android tersedia di Chrome di Android dan di WebView. Aplikasi pembayaran berbasis web tersedia di Chrome di semua platform, tetapi tidak di WebView.

Jika kedua jenis aplikasi tersedia untuk metode pembayaran dan manifes aplikasi web Anda menetapkan prefer_related_applications ke true, Chrome akan menyembunyikan aplikasi pembayaran berbasis web Anda. Jika tidak, pengguna mungkin melihat keduanya di UI Permintaan Pembayaran dan memilih di antara keduanya.

Dukungan browser

Pembayaran Web terdiri dari beberapa teknologi yang berbeda dan status dukungannya 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 URL ID metode pembayaran dan mengambil manifes metode pembayaran.
2. Browser menentukan URL manifes aplikasi web dari 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 berikutnya menjelaskan secara mendetail cara menyiapkan metode pembayaran Anda sendiri agar browser dapat menemukannya.

Langkah 1: Berikan ID metode pembayaran

ID metode pembayaran adalah string berbasis URL. Misalnya, ID Google Pay adalah https://google.com/pay. Developer aplikasi pembayaran dapat memilih URL apa pun sebagai ID metode pembayaran asalkan mereka memiliki kontrol atas URL tersebut dan dapat menyajikan konten dan header HTTP arbitrer. Dalam artikel ini, kita akan menggunakan https://bobbucks.dev/pay sebagai ID metode pembayaran.

Cara penjual menggunakan ID metode pembayaran

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

[merchant] 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 yang dapat menggunakan metode pembayaran ini.

Menyediakan manifes metode pembayaran

Saat penjual memulai transaksi pembayaran, browser akan mengirimkan permintaan HEAD HTTP ke URL ID metode pembayaran. URL ID metode pembayaran merespons dengan header HTTP Link yang mengarah ke URL tempat browser dapat mengambil manifes metode pembayaran.

Konfigurasi server metode pembayaran untuk merespons dengan header Link HTTP dengan atribut rel="payment-method-manifest" dan URL manifes metode pembayaran. Misalnya, jika manifes berada di https://bobbucks.dev/pay/payment-manifest.json, header respons akan menyertakan:

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

URL dapat berupa nama domain yang sepenuhnya memenuhi syarat atau jalur relatif. Periksa https://bobbucks.dev/pay untuk traffic jaringan guna melihat contoh. Anda juga dapat menggunakan perintah curl:

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

Selanjutnya, browser akan mengirimkan permintaan GET HTTP ke URL manifes metode pembayaran. Server merespons dengan isi manifes metode pembayaran.

Manifes metode pembayaran memiliki dua kolom, default_applications dan supported_origins.

File manifes metode pembayaran akan terlihat seperti ini:

[payment handler] /payment-manifest.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 aplikasi pembayaran yang didukung.

Langkah 3: Tayangkan manifes aplikasi web

Manifes aplikasi web digunakan untuk menentukan aplikasi web sesuai namanya. File ini adalah file manifes yang banyak digunakan untuk menentukan Progressive Web App (PWA).

Manifes aplikasi web standar akan terlihat seperti ini:

[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 membaca kolom yang berbeda bergantung pada jenis aplikasi pembayaran. Untuk aplikasi pembayaran Android, Chrome hanya membaca related_applications. Untuk aplikasi pembayaran berbasis web, Chrome membaca name, icons, serviceworker, payment, dan prefer_related_applications.

Properti name manifes aplikasi web digunakan sebagai nama aplikasi pembayaran, properti 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, kondisi berikut harus dipenuhi:

• Kolom related_applications ditentukan dalam manifes aplikasi web dan:
  • ID paket dan tanda tangan aplikasi terinstal cocok, sedangkan versi minimum (min_version) dalam manifes aplikasi web kurang dari atau sama dengan versi aplikasi terinstal.
• Aplikasi pembayaran khusus platform diinstal dan memiliki:
  • Filter intent org.chromium.intent.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.

[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"
  }]
}]

Jika prefer_related_applications adalah true dan aplikasi pembayaran khusus platform tersedia, Chrome akan menyembunyikan aplikasi pembayaran berbasis web. Jika tidak, Chrome juga akan mencari aplikasi pembayaran berbasis web.

Meluncurkan aplikasi pembayaran berbasis web

Aplikasi pembayaran berbasis web harus ditentukan di kolom serviceworker manifes aplikasi web.

[payment handler] /manifest.json:

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

Browser meluncurkan aplikasi pembayaran berbasis web dengan mengirimkan peristiwa paymentrequest ke pekerja layanan. Service worker tidak harus didaftarkan terlebih dahulu. Sertifikat dapat didaftarkan secara tepat waktu.

Memahami pengoptimalan khusus

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

Di Chrome, saat metode show() dari PaymentRequest dipanggil, Payment Request API akan menampilkan UI yang disediakan browser yang disebut "UI Permintaan Pembayaran". UI ini memungkinkan pengguna 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 pengguna untuk menyelesaikan pembayaran. Untuk mengoptimalkan proses, browser dapat mendelegasikan pemenuhan informasi tersebut ke aplikasi pembayaran dan meluncurkan aplikasi pembayaran secara langsung tanpa menampilkan UI Permintaan Pembayaran saat show() dipanggil.

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

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

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

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

• Jika UI Payment Request ditampilkan kepada pengguna, aplikasi akan didaftarkan secara tepat waktu dan diluncurkan saat pengguna mengklik Lanjutkan.
• Jika Payment Request UI dilewati, aplikasi pembayaran akan didaftarkan just-in-time dan diluncurkan secara langsung. Melewati UI Permintaan Pembayaran untuk meluncurkan aplikasi yang terdaftar secara tepat waktu memerlukan gestur pengguna, yang mencegah pendaftaran pekerja layanan lintas origin yang tidak terduga.

Membangun aplikasi pembayaran berbasis web

Saat penjual memanggil show(), Chrome akan mengirimkan peristiwa paymentrequest ke pekerja layanan Anda. Panggil openWindow() di dalam respondWith() untuk menampilkan UI pembayaran, lalu selesaikan dengan respons pembayaran.

Untuk API lengkap, lihat Web-Based Payment Handler API di MDN.

Langkah berikutnya

• Panduan developer aplikasi pembayaran Android
• Memberikan informasi pengiriman dan kontak dari aplikasi pembayaran Android