Mendaftarkan aplikasi pembayaran berbasis web

Pelajari cara mengonfigurasi aplikasi pembayaran berbasis web selama pendaftaran.

Aplikasi pembayaran berbasis web adalah Progressive Web App (PWA) dan berjalan di atas pekerja layanan. Pekerja layanan di aplikasi pembayaran memainkan peran penting karena mengambil permintaan pembayaran dari penjual, meluncurkan aplikasi pembayaran, dan memediasi komunikasi dengan penjual.

Untuk mengonfigurasi aplikasi pembayaran berbasis web, Anda perlu mendaftarkan metode pembayaran yang tersedia, dan pekerja layanan. Anda dapat mengonfigurasi aplikasi pembayaran berbasis web secara deklaratif dengan manifes aplikasi web.

Dukungan browser

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

Kromium Safari Firefox
Desktop Android Desktop Seluler Desktop/Seluler
Payment Request API
Payment Handler API
Aplikasi pembayaran iOS/Android ✔* ✔*

Mengonfigurasi aplikasi pembayaran dengan manifes aplikasi web

Untuk mengonfigurasi aplikasi pembayaran berbasis web Anda secara deklaratif, tampilkan manifes aplikasi web.

Properti berikut di manifes aplikasi web relevan untuk aplikasi pembayaran berbasis web:

  • name
  • icons
  • serviceworker
    • src
    • scope
    • use_cache

Lihat Menyiapkan metode pembayaran untuk memastikan manifes metode pembayaran Anda mengarah ke manifes aplikasi web dengan benar.

Mendaftarkan service worker tepat waktu (JIT)

Pendaftaran JIT hanya memerlukan penyajian manifes aplikasi web dan tanpa coding tambahan. Jika telah mengonfigurasi manifes aplikasi web dan menayangkannya dengan benar, berarti Anda sudah siap. Browser akan menangani selebihnya.

Men-debug aplikasi pembayaran berbasis web

Saat mengembangkan frontend aplikasi pembayaran berbasis web, Anda mungkin akan beralih antara konteks penjual dan konteks aplikasi pembayaran. Tips proses debug berikut akan membantu pengalaman pengembangan Anda di Chrome.

Mengembangkan di server lokal

Server mana yang Anda gunakan untuk pengembangan? Banyak developer cenderung menggunakan localhost atau lingkungan server internal perusahaan yang dapat menjadi tantangan karena fitur canggih di browser cenderung memerlukan lingkungan yang aman (HTTPS) dan sertifikat yang valid. Payment Request API dan Payment Handler API tidak merupakan pengecualian dan localhost atau server internal perusahaan biasanya tidak dilengkapi dengan sertifikat yang valid.

Kabar baiknya adalah beberapa browser, termasuk Chrome, mengecualikan sertifikat untuk http://localhost secara default. Di Chrome, Anda juga dapat mengecualikan persyaratan sertifikat dengan meluncurkan instance Chrome. Misalnya, untuk mengecualikan persyaratan dari http://*.corp.company.com, gunakan flag berikut:

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Windows

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Pelajari lebih lanjut cara menjalankan Chrome dengan flag runtime di Menjalankan Chromium dengan flag.

Penerusan port server lokal

Anda dapat meneruskan server web lokal ke perangkat Android menggunakan DevTools Chrome dan menguji cara kerjanya dari browser seluler. Untuk mempelajari cara melakukannya, lihat Mengakses Server Lokasi.

Men-debug situs dari jarak jauh di Chrome Android dari DevTools desktop

Anda juga dapat men-debug Chrome Android di DevTools desktop. Untuk mempelajari cara melakukannya, lihat Memulai Proses Debug Jarak Jauh di Perangkat Android.

Logging peristiwa Handler Pembayaran

DevTools dapat menampilkan peristiwa Payment Handler API untuk pengembangan lokal yang lebih mudah. Buka DevTools pada konteks penjual, lalu buka bagian "Pemroses Pembayaran" di panel Aplikasi. Centang "Tampilkan peristiwa dari domain lain" dan klik tombol "Rekam" untuk mulai merekam peristiwa yang dikirim ke pekerja layanan yang menangani pembayaran.

Screenshot logging peristiwa Pengendali Pembayaran.
Logging peristiwa Pengendali Pembayaran.

Langkah berikutnya

Langkah berikutnya adalah mempelajari cara pekerja layanan dapat mengorkestrasi transaksi pembayaran saat runtime.