Come adattare la tua app per i pagamenti basata sul web a Web Payments e offrire una migliore esperienza utente ai clienti.
Una volta registrata l'app di pagamento, potrai accettare le richieste di pagamento dei commercianti. Questo post spiega come orchestrare una transazione di pagamento da un service worker durante il runtime (ovvero quando viene visualizzata una finestra e l'utente interagisce con essa).
![Orchestrare le transazioni di pagamento con un service worker](https://web.developers.google.cn/static/articles/orchestrating-payment-transactions/image/orchestrating-payment-tra-dd17687ea595a.png?authuser=9&hl=it)
Le "modifiche dei parametri di pagamento in fase di runtime" fanno riferimento a un insieme di eventi che consente al commerciante e al gestore dei pagamenti di scambiare messaggi mentre l'utente interagisce con il gestore dei pagamenti. Per saperne di più, consulta Gestire i dati di pagamento facoltativi con un service worker.
Ricevere un evento di richiesta di pagamento dal commerciante
Quando un cliente sceglie di pagare con la tua app per pagamenti basata sul web e il commerciante richiama
PaymentRequest.show()
,
il tuo service worker riceverà un evento paymentrequest
. Aggiungi un listener di eventi al service worker per acquisire l'evento e prepararti per l'azione successiva.
[gestore dei pagamenti] service-worker.js:
…
let payment_request_event;
let resolver;
let client;
// `self` is the global object in service worker
self.addEventListener('paymentrequest', async e => {
if (payment_request_event) {
// If there's an ongoing payment transaction, reject it.
resolver.reject();
}
// Preserve the event for future use
payment_request_event = e;
…
L'elemento PaymentRequestEvent
conservato contiene informazioni importanti su questa
transazione:
Nome proprietà | Descrizione |
---|---|
topOrigin |
Una stringa che indica l'origine della pagina web di primo livello (di solito il commerciante del beneficiario). Utilizza questo parametro per identificare l'origine del commerciante. |
paymentRequestOrigin |
Una stringa che indica l'origine dell'invoker. Può essere lo stesso di topOrigin quando il commerciante richiama direttamente l'API Payment Request, ma potrebbe essere diverso se l'API viene richiamata dall'interno di un iframe da una terza parte come un gateway per i pagamenti.
|
paymentRequestId |
La proprietà id di PaymentDetailsInit fornita all'API Payment Request. Se il commerciante omette la domanda, il browser fornirà un ID generato automaticamente.
|
methodData |
I dati specifici del metodo di pagamento forniti dal commerciante nell'ambito di PaymentMethodData .
Utilizza questo campo per determinare i dettagli della transazione di pagamento.
|
total |
L'importo totale fornito dal commerciante nell'ambito di PaymentDetailsInit .
Utilizzalo per creare una UI che indichi al cliente l'importo totale da pagare.
|
instrumentKey |
La chiave dello strumento selezionata dall'utente. Questo valore corrisponde ai instrumentKey che hai fornito in anticipo. Una stringa vuota indica che l'utente non ha specificato alcuno strumento.
|
Apri la finestra Gestore dei pagamenti per visualizzare il frontend dell'app per i pagamenti basata sul web
Quando viene ricevuto un evento paymentrequest
, l'app per i pagamenti può aprire una finestra
per il gestore dei pagamenti chiamando il numero PaymentRequestEvent.openWindow()
. La finestra del gestore dei pagamenti mostrerà ai clienti l'interfaccia della tua app di pagamento dove possono eseguire l'autenticazione, scegliere l'indirizzo di spedizione e le opzioni e autorizzare il pagamento. Vedremo come scrivere il codice del frontend nella sezione Gestire i pagamenti nel frontend dei pagamenti (disponibile a breve).
Mantieni una promessa a PaymentRequestEvent.respondWith()
in modo da poterla risolvere con un risultato di pagamento in futuro.
[gestore dei pagamenti] service-worker.js:
…
self.addEventListener('paymentrequest', async e => {
…
// Retain a promise for future resolution
// Polyfill for PromiseResolver is provided below.
resolver = new PromiseResolver();
// Pass a promise that resolves when payment is done.
e.respondWith(resolver.promise);
// Open the checkout page.
try {
// Open the window and preserve the client
client = await e.openWindow(checkoutURL);
if (!client) {
// Reject if the window fails to open
throw 'Failed to open window';
}
} catch (err) {
// Reject the promise on failure
resolver.reject(err);
};
});
…
Puoi utilizzare un comodo polyfill PromiseResolver
per risolvere una promessa a
tempi arbitrari.
class PromiseResolver {
constructor() {
this.promise_ = new Promise((resolve, reject) => {
this.resolve_ = resolve;
this.reject_ = reject;
})
}
get promise() { return this.promise_ }
get resolve() { return this.resolve_ }
get reject() { return this.reject_ }
}
Scambia informazioni con il frontend
Il service worker dell'app di pagamento può scambiare messaggi con il frontend
dell'app di pagamento tramite ServiceWorkerController.postMessage()
. Per ricevere messaggi dal frontend, ascolta gli eventi message
.
[gestore dei pagamenti] service-worker.js:
// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
if (client) client.postMessage({ type, ...contents });
}
Ricevi il segnale pronto dal frontend
Una volta aperta la finestra del gestore dei pagamenti, il service worker deve attendere un indicatore di stato pronto dal frontend dell'app di pagamento. Quando è pronto, il service worker può passare informazioni importanti al frontend.
Frontend [gestore dei pagamenti]:
navigator.serviceWorker.controller.postMessage({
type: 'WINDOW_IS_READY'
});
[gestore dei pagamenti] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
// `WINDOW_IS_READY` is a frontend's ready state signal
case 'WINDOW_IS_READY':
const { total } = payment_request_event;
…
Trasmetti i dettagli della transazione al frontend
Ora invia i dettagli di pagamento. In questo caso, invii solo l'importo totale della richiesta di pagamento, ma puoi trasmettere ulteriori dettagli, se vuoi.
[gestore dei pagamenti] service-worker.js:
…
// Pass the payment details to the frontend
postMessage('PAYMENT_IS_READY', { total });
break;
…
Frontend [gestore dei pagamenti]:
let total;
navigator.serviceWorker.addEventListener('message', async e => {
switch (e.data.type) {
case 'PAYMENT_IS_READY':
({ total } = e.data);
// Update the UI
renderHTML(total);
break;
…
Restituire le credenziali di pagamento del cliente
Quando il cliente autorizza il pagamento, il frontend può inviare un messaggio post al service worker per procedere. Puoi risolvere la promessa passata a PaymentRequestEvent.respondWith()
di restituire il risultato al commerciante.
Passa un oggetto PaymentHandlerResponse
.
Nome proprietà | Descrizione |
---|---|
methodName |
L'identificatore del metodo di pagamento utilizzato per effettuare il pagamento. |
details |
I dati specifici del metodo di pagamento che forniscono al commerciante le informazioni necessarie per elaborare il pagamento. |
Frontend [gestore dei pagamenti]:
const paymentMethod = …
postMessage('PAYMENT_AUTHORIZED', {
paymentMethod, // Payment method identifier
});
[gestore dei pagamenti] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_AUTHORIZED':
// Resolve the payment request event promise
// with a payment response object
const response = {
methodName: e.data.paymentMethod,
details: { id: 'put payment credential here' },
}
resolver.resolve(response);
// Don't forget to initialize.
payment_request_event = null;
break;
…
Annullare la transazione di pagamento
Per consentire al cliente di annullare la transazione, il frontend può inviare un post-messaggio al service worker al fine di farlo. Il service worker può quindi risolvere la promessa passata a PaymentRequestEvent.respondWith()
con null
per indicare al commerciante che la transazione è stata annullata.
Frontend [gestore dei pagamenti]:
postMessage('CANCEL_PAYMENT');
[gestore dei pagamenti] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'CANCEL_PAYMENT':
// Resolve the payment request event promise
// with null
resolver.resolve(null);
// Don't forget to initialize.
payment_request_event = null;
break;
…
Codice campione
Tutti i codici di esempio visualizzati in questo documento sono estratti dalla seguente app di esempio funzionante:
https://paymenthandler-demo.glitch.me
[gestore pagamenti] service worker
[Gestore pagamenti] Frontend
Per provarlo:
- Vai alla pagina https://paymentrequest-demo.glitch.me/.
- Vai alla parte inferiore della pagina.
- Premi il pulsante Aggiungi un pagamento.
- Inserisci
https://paymenthandler-demo.glitch.me
nel campo Identificatore metodo di pagamento. - Premi il pulsante Paga accanto al campo.
Passaggi successivi
In questo articolo abbiamo imparato come orchestrare una transazione di pagamento da un service worker. Il passaggio successivo consiste nell'imparare ad aggiungere alcune funzionalità più avanzate al service worker.