Registrazione di un'app per pagamenti basata sul web

Scopri come configurare un'app di pagamento basata sul web durante la registrazione.

Le app di pagamento basate sul web sono app web progressive (PWA) e vengono eseguite sui service worker. Il service worker in un'app di pagamento svolge un ruolo importante in quanto acquisisce le richieste di pagamento di un commerciante, lancia l'app di pagamento e media la comunicazione con il commerciante.

Per configurare un'app di pagamento basata sul web, devi registrare i metodi di pagamento disponibili e un service worker. Puoi configurare la tua app per pagamenti basata sul web in modo dichiarativo con un file manifest dell'app web.

Supporto del browser

Web Payments è costituito da diverse tecnologie e lo stato dell'assistenza dipende dal browser.

Chromium Safari Firefox
Computer Android Computer Dispositivo mobile Computer/dispositivi mobili
API Payment Request
API Payment Handler
App di pagamento iOS/Android ✔* ✔*

Configurazione di un'app di pagamento con un file manifest dell'app web

Per configurare la tua app per pagamenti basata sul web in modo dichiarativo, pubblica un file manifest dell'app web.

Le seguenti proprietà nel file manifest dell'app web sono pertinenti per le app di pagamento basate sul web:

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

Consulta la pagina Configurare un metodo di pagamento per assicurarti che il manifest del tuo metodo di pagamento rimandi correttamente al file manifest dell'app web.

Registrazione di un service worker just-in-time (JIT)

La registrazione JIT richiede solo la pubblicazione del file manifest dell'app web e nessun codice aggiuntivo. Se hai già configurato il manifest dell'app web e lo pubblichi correttamente, non devi fare altro. Al resto ci occuperà il browser.

Debug di un'app per pagamenti basata sul web

Durante lo sviluppo del frontend di un'app per pagamenti basata sul web, passerai probabilmente dal contesto del commerciante a quello dell'app di pagamento. I seguenti suggerimenti di debug ti aiuteranno a sviluppare più facilmente la tua esperienza su Chrome.

Sviluppo su un server locale

Quale server utilizzi per lo sviluppo? Molti sviluppatori tendono a utilizzare localhost o un ambiente server interno all'azienda, che può essere difficile perché le funzionalità potenti del browser tendono a richiedere un ambiente sicuro (HTTPS) e un certificato valido. L'API Payment Request e l'API Payment Handler non fanno eccezione e i localhost o i server interni all'azienda di solito non hanno un certificato valido.

La buona notizia è che alcuni browser, incluso Chrome, dispongono di certificati esenti per http://localhost per impostazione predefinita. Inoltre, in Chrome puoi escludere la richiesta di certificato avviando un'istanza di Chrome. Ad esempio, per escludere il requisito da http://*.corp.company.com, utilizza i seguenti flag:

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

Scopri di più sull'esecuzione di Chrome con un flag di runtime in Eseguire Chromium con i flag.

Port forwarding di un server locale

Puoi eseguire il port forwarding del server web locale su un dispositivo Android utilizzando DevTools di Chrome e testare il funzionamento da un browser mobile. Per scoprire come fare, consulta la pagina relativa ad accesso ai server locali.

Debug remoto di un sito web su Chrome per Android da DevTools per computer

Puoi anche eseguire il debug di Chrome per Android su DevTools. Per scoprire come fare, consulta la pagina Iniziare a utilizzare il debug remoto dei dispositivi Android.

Logging degli eventi del gestore dei pagamenti

DevTools può visualizzare gli eventi dell'API Payment Handler per uno sviluppo locale più semplice. Apri DevTools nel contesto del commerciante e vai alla sezione "Gestore dei pagamenti" nel riquadro Applicazione. Seleziona "Mostra eventi di altri domini" e fai clic sul pulsante "Registra" per iniziare ad acquisire gli eventi inviati al service worker che gestisce i pagamenti.

Uno screenshot del logging degli eventi del gestore dei pagamenti.
Logging degli eventi del gestore dei pagamenti.

Passaggi successivi

Il passaggio successivo consiste nell'imparare come il service worker può orchestrare una transazione di pagamento in fase di runtime.