Come funziona l'API Payment Request

Scopri come funziona ad alto livello l'API Payment Request.

Eiji Kitamura

API Payment Request

Quando un cliente cerca di acquistare qualcosa sul tuo sito web, il sito deve chiedere al cliente di fornire i dati di pagamento e, facoltativamente, altre informazioni come la preferenza di spedizione. Puoi farlo in modo facile e veloce utilizzando API Payment Request (PR).

Struttura di base

La creazione di un oggetto PaymentRequest richiede due parametri: payment di pagamento e dettagli di pagamento. Inoltre, un terzo parametro delle opzioni di pagamento è facoltativo. Una richiesta di base potrebbe essere creata come segue:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Vediamo come viene creato e utilizzato ogni parametro.

Metodi di pagamento

Il primo parametro, paymentMethods, è un elenco di metodi di pagamento supportati in di una variabile di array. Ogni elemento dell'array comprende due componenti, supportedMethods e, facoltativamente, data.

Per supportedMethods, il commerciante deve specificare un metodo di pagamento Identificatore ad esempio https://bobbucks.dev/pay. L'esistenza e i contenuti di data dipendono da i contenuti di supportedMethods e il design del fornitore di app di pagamento.

Entrambe le informazioni devono essere fornite dal fornitore dell'app di pagamento.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

Dettagli sul pagamento

Il secondo parametro, paymentDetails, viene passato come oggetto e specifica i dati di pagamento della transazione. Contiene il valore obbligatorio total, che specifica l'importo totale dovuto dal cliente. Questo parametro può anche facoltativamente, elencare gli articoli acquistati.

Nell'esempio riportato di seguito, l'elenco facoltativo degli articoli acquistati (solo un articolo, case) così come l'importo totale dovuto richiesto. In entrambi i casi, la valuta viene specificata per ogni singolo importo.

const paymentDetails = {
  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' }
  }
};

Verificare se il metodo di pagamento è disponibile

Chrome controlla se l'utente e l'ambiente sono pronti per effettuare il pagamento durante la costruzione di un oggetto PaymentRequest.

Per verificare se l'utente e l'ambiente sono pronti a effettuare un pagamento, chiama canMakePayment() prima di richiamare la procedura di pagamento. Chiamata in corso canMakePayment() restituisce true se il browser supporta almeno un pagamento specificato nell'oggetto.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

Scopri di più su PaymentRequest.canMakePayment() su MDN

Il metodo show()

Dopo aver impostato i due parametri e creato l'oggetto request come mostrato in alto, puoi chiamare il metodo show(), che mostra l'utente dell'app di pagamento a riga di comando.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

L'aspetto dell'interfaccia utente dell'app di pagamento dipende completamente dall'app di pagamento o il provider di servizi di terze parti. Dopo che il cliente accetta di effettuare un pagamento, viene trasmesso un oggetto JSON. al commerciante contenente tutte le informazioni necessarie per trasferire denaro. Il commerciante potrà quindi inviarlo al PSP per l'elaborazione del pagamento.

Infine, puoi chiudere l'interfaccia utente per la richiesta di pagamento completando la procedura con response.complete('success') o response.complete('fail') a seconda del il risultato restituito dal PSP.

Successivo

Scopri di più sui pagamenti web.