Scopri come funziona l'API Payment Request a livello generale.
API Payment Request
Quando un cliente tenta di effettuare un acquisto sul tuo sito web, il sito deve chiedergli di fornire i dati di pagamento e, facoltativamente, altre informazioni, come la preferenza di spedizione. Puoi farlo in modo facile e veloce utilizzando l'API Payment Request (API PR).
Struttura di base
La creazione di un oggetto PaymentRequest
richiede due parametri: metodi
di pagamento e dettagli di pagamento. Inoltre, un terzo parametro opzioni di pagamento è facoltativo. Una richiesta di base potrebbe essere la seguente:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Vediamo come viene creato e utilizzato ogni parametro.
Metodi di pagamento
Il primo parametro, paymentMethods, è un elenco dei metodi di pagamento supportati in una variabile di array. Ogni elemento dell'array comprende due componenti, supportedMethods
e, facoltativamente, data
.
Per supportedMethods
, il commerciante deve specificare un identificatore del metodo di pagamento, ad esempio https://bobbucks.dev/pay
. L'esistenza e i contenuti di data
dipendono dai contenuti di supportedMethods
e dal 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.
}
}];
Dati di pagamento
Il secondo parametro, paymentDetails, viene trasmesso come oggetto e specifica i dettagli di pagamento per la transazione. Contiene il valore obbligatorio total
,
che specifica l'importo totale dovuto dal cliente. Facoltativamente, questo parametro può
indicare anche gli articoli acquistati.
Nell'esempio che segue, viene mostrato l'elenco facoltativo degli articoli acquistati (in questo caso solo un articolo), insieme all'importo totale richiesto dovuto. In entrambi i casi, l'unità di 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
Prima di richiamare la procedura di pagamento, il commerciante può verificare se l'utente e l'ambiente sono pronti per effettuare un pagamento.
La chiamata a canMakePayment()
verifica se il browser supporta almeno
un metodo di 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 aver creato l'oggetto request
come mostrato
sopra, puoi chiamare il metodo show()
, che mostra l'interfaccia utente
dell'app di pagamento.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
L'aspetto che avrà l'interfaccia utente dell'app di pagamento dipende completamente dal fornitore di app di pagamento. Una volta che il cliente ha accettato di effettuare un pagamento, al commerciante viene trasmesso un oggetto JSON contenente tutte le informazioni richieste per trasferire denaro. che potrà poi inviarlo al PSP per l'elaborazione del pagamento.
Infine, puoi chiudere l'interfaccia utente della richiesta di pagamento completando la procedura con response.complete('success')
o response.complete('fail')
, a seconda del risultato restituito dal PSP.
Successivo
Scopri di più sui pagamenti web.