Ciclo di vita di una transazione di pagamento

Scopri come i commercianti integrano le app di pagamento e come funzionano le transazioni di pagamento con l'API Payment Request.

Eiji Kitamura

Milica Mihajlija

Le API Web Payments sono funzionalità di pagamento dedicate integrate nel browser per la prima volta. Con Web Payments, l'integrazione dei commercianti con le app di pagamento diventa più semplice e la customer experience diventa più semplice e sicura.

Per ulteriori informazioni sui vantaggi dell'utilizzo di Web Payments, consulta Empowering app di pagamento con Web Payments.

Questo articolo illustra come eseguire una transazione di pagamento sul sito web di un commerciante e ti aiuta a capire come funziona l'integrazione delle app di pagamento.

La procedura prevede sei passaggi:

1. Il commerciante avvia una transazione di pagamento.
2. Il commerciante mostra un pulsante di pagamento.

3. Il cliente preme il pulsante di pagamento.

   

4. Il browser avvia l'app di pagamento.

   

5. Se il cliente modifica dei dettagli, ad esempio le opzioni di spedizione o ), il commerciante aggiorna i dettagli della transazione per riflettere la modifica.

   

6. Dopo che il cliente conferma l'acquisto, il commerciante convalida il pagamento e completa la transazione.

   

Passaggio 1: il commerciante avvia una transazione di pagamento

Quando un cliente decide di effettuare un acquisto, il commerciante avvia il pagamento creando un'istanza PaymentRequest . Questo oggetto include informazioni importanti sulla transazione:

• Metodi di pagamento accettabili e relativi dati per l'elaborazione della transazione.
• Dettagli come il prezzo totale (obbligatorio) e le informazioni sugli articoli.
• Opzioni in cui i commercianti possono richiedere informazioni di spedizione, ad esempio una spedizione e un'opzione di spedizione.
• I commercianti possono anche richiedere l'indirizzo di fatturazione, il nome del pagatore, l'email e numero di telefono.
• I commercianti possono anche includere la spedizione facoltativa tipo (shipping, delivery o pickup) in PaymentRequest. App di pagamento puoi usarlo come suggerimento per visualizzare le etichette corrette nella sua UI.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

Il browser, dopo aver fornito le informazioni sulla transazione, effettua una fase di rilevamento elaborazione delle app di pagamento specificate in PaymentRequest in base al pagamento identificatori del metodo. In questo modo, il browser può stabilire che l'app di pagamento non appena il commerciante può procedere con la transazione.

Per informazioni dettagliate sul funzionamento del processo di rilevamento, consulta Configurare pagamento .

Passaggio 2: il commerciante mostra un pulsante di pagamento

I commercianti possono supportare molti metodi di pagamento, ma devono presentare solo il pagamento oppure quelli che un cliente può utilizzare. Visualizzazione di un pulsante di pagamento inutilizzabile è l'esperienza utente scadente. Se un commerciante può prevedere che il metodo di pagamento specificato nell'oggetto PaymentRequest non funzionerà per: cliente, può fornire una soluzione di riserva o non mostrare affatto il pulsante.

Utilizzando un'istanza PaymentRequest, un commerciante può chiedere se un cliente ha l'app di pagamento disponibile.

Il cliente ha a disposizione l'app di pagamento?

La canMakePayment() metodo di PaymentRequest restituisce true se è disponibile un'app di pagamento sul dal dispositivo del cliente. "Disponibile" significa che un'app di pagamento che supporta venga rilevato e che l'app di pagamento specifica della piattaforma sia installata oppure l'app per pagamenti basata sul web è pronta per essere registrato.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

Passaggio 3: il cliente preme il pulsante di pagamento

Quando il cliente preme il pulsante di pagamento, il commerciante chiama il show() dell'istanza PaymentRequest che attiva immediatamente l'avvio del nell'interfaccia utente di pagamento.

Nel caso in cui il prezzo totale finale sia impostato in modo dinamico (ad esempio, recuperato da una server), il commerciante può posticipare il lancio dell'interfaccia utente di pagamento finché il totale noti.

Rimandare il lancio dell'interfaccia utente per i pagamenti

Guarda una demo su come differire il pagamento UI finché il prezzo totale finale determinato.

Per posticipare l'interfaccia utente di pagamento, il commerciante trasmette una promessa al metodo show(). Il browser mostrerà un indicatore di caricamento fino alla risoluzione della promessa e la transazione è pronta per iniziare.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

Se non è specificata alcuna promessa come argomento per show(), il browser avvia immediatamente l'interfaccia utente per i pagamenti.

Passaggio 4: il browser avvia l'app di pagamento

Il browser può avviare un'app di pagamento specifica per piattaforma o basata sul web. Puoi scoprire di più su come Chrome determina quale app di pagamento lancio.

La modalità di creazione dell'app di pagamento dipende in gran parte dallo sviluppatore, ma emessi da e verso il commerciante, nonché la struttura dei dati passati insieme a questi eventi, sono standardizzati.

Quando l'app di pagamento viene avviata, riceve la transazione. informazioni all'oggetto PaymentRequest nel passaggio 1, che include quanto segue:

• Dati dei metodi di pagamento
• Prezzo totale
• Opzioni di pagamento

L'app di pagamento utilizza le informazioni sulla transazione per etichettare la propria UI.

Passaggio 5: in che modo un commerciante può aggiornare i dettagli della transazione in base alle azioni del cliente

I clienti hanno la possibilità di modificare i dettagli della transazione, come il pagamento il metodo di pagamento e l'opzione di spedizione nell'app per pagamenti. Mentre il cliente apporta modifiche, il commerciante riceve gli eventi di modifica e aggiorna i dettagli della transazione.

Un commerciante può ricevere quattro tipi di eventi:

• Evento di modifica del metodo di pagamento
• Evento di modifica dell'indirizzo di spedizione
• Evento di modifica dell'opzione di spedizione
• Evento di convalida del commerciante

Evento di modifica del metodo di pagamento

Un'app di pagamento può supportare più metodi di pagamento e un commerciante può offrire una a seconda della selezione del cliente. Per trattare questo caso d'uso, l'evento di modifica del metodo di pagamento può informare il commerciante del nuovo pagamento in modo che possa aggiornare il prezzo totale con lo sconto e restituirlo torna all'app per pagamenti.

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

Evento di modifica dell'indirizzo di spedizione

Un'app di pagamento può facoltativamente fornire l'indirizzo di spedizione del cliente. Questo è per i clienti perché non devono inserire manualmente i dettagli in un modulo e possono memorizzare l'indirizzo di spedizione nel metodo di pagamento preferito. piuttosto che su diversi siti web di commercianti.

Se un cliente aggiorna il proprio indirizzo di spedizione in un'app di pagamento dopo il La transazione è stata avviata, verrà inviato un evento 'shippingaddresschange' al commerciante. Questo evento aiuta il commerciante a determinare il costo di spedizione in base al nuovo indirizzo, aggiorna il prezzo totale e restituiscilo all'app per pagamenti.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

Se il commerciante non riesce a effettuare la spedizione all'indirizzo aggiornato, può restituire un errore aggiungendo un parametro di errore ai dettagli della transazione restituiti al app di pagamento.

Evento di modifica dell'opzione di spedizione

Un commerciante può offrire al cliente più opzioni di spedizione e può delegare la scelta all'app di pagamento. Le opzioni di spedizione sono visualizzate sotto forma di elenco i prezzi e i nomi dei servizi tra cui il cliente può scegliere. Ad esempio:

• Spedizione standard: senza costi
• Spedizione espressa - 5 EUR

Quando un cliente aggiorna l'opzione di spedizione in un'app di pagamento, viene visualizzata una 'shippingoptionchange' evento verrà inviato al commerciante. Il commerciante può quindi determina il costo di spedizione, aggiorna il prezzo totale e restituiscilo app di pagamento.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

Il commerciante può modificare dinamicamente le opzioni di spedizione in base alla anche l'indirizzo di spedizione. È utile quando un commerciante vuole offrire diversi insiemi di opzioni di spedizione per clienti nazionali e internazionali.

Evento di convalida del commerciante

Per maggiore sicurezza, un'app di pagamento può eseguire una convalida del commerciante prima procedendo con il flusso di pagamento. La progettazione del meccanismo di convalida dipende l'app di pagamento, ma l'evento di convalida del commerciante serve a informare il commerciante dell'URL da utilizzare per la convalida.

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

Passaggio 6: il commerciante convalida il pagamento e completa la transazione

Dopo che il cliente autorizza il pagamento, verrà usato il metodo show() restituisce una promessa che si risolve in PaymentResponse L'oggetto PaymentResponse include le seguenti informazioni:

• Dettagli del risultato di pagamento
• Indirizzo di spedizione
• Opzione di spedizione
• Informazioni di contatto

A questo punto, l'interfaccia utente del browser potrebbe ancora mostrare un indicatore di caricamento, il che significa che la transazione non è stata ancora completata.

Se l'app di pagamento viene chiusa a causa di un errore o un errore di pagamento, i la promessa restituita da show() rifiuta e il browser termina il pagamento transazione.

Elaborazione e convalida del pagamento

Il details in PaymentResponse è l'oggetto delle credenziali di pagamento restituito dall'app di pagamento. Il commerciante può utilizzare la credenziale per elaborare o convalidare il pagamento. Il funzionamento di questa importante procedura dipende dal gestore dei pagamenti.

Completare o riprovare la transazione

Dopo che il commerciante avrà stabilito se la transazione è andata a buon fine o non è andata a buon fine, possono:

• Chiama il metodo .complete() per completare la transazione e ignorare il indicatore di caricamento.
• Consenti al cliente di riprovare chiamando il metodo retry().

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

Passaggi successivi

• Per informazioni su come dichiarare in dettaglio l'identificatore di un metodo di pagamento, consulta l'articolo Configurare un di pagamento.
• Scopri come creare un'app di pagamento specifica per la piattaforma in Guida per gli sviluppatori di app di pagamento Android.
• Scopri come creare un'app per il pagamento basata sul web nella pagina Sviluppatori di app di pagamento basate sul web .