Panoramica dell'API Payment Request

Eiji Kitamura

Quando un cliente tenta di acquistare qualcosa dal 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 rapidamente utilizzando l'API Payment Request (API PR).

Struttura di pagamento 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 creata nel seguente modo:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Dai un'occhiata a come vengono creati e utilizzati i parametri.

Metodi di pagamento

Il primo parametro, paymentMethods, è un elenco dei metodi di pagamento supportati in una variabile di array. Ogni elemento dell'array è composto da 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 dell'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 dettagli di pagamento per la transazione. Contiene il valore obbligatorio total, che specifica l'importo totale dovuto dal cliente. Questo parametro può anche elencare facoltativamente gli articoli acquistati.

Nell'esempio seguente viene mostrato l'elenco facoltativo degli articoli acquistati (in questo caso un solo articolo), nonché l'importo totale dovuto obbligatorio. In entrambi i casi, l'unità di valuta è 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' }
  }
};

Controllare se il metodo di pagamento è disponibile

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

Per verificare se l'utente e l'ambiente sono pronti per effettuare un pagamento, chiama canMakePayment() prima di richiamare la procedura di pagamento. La chiamata canMakePayment() restituisce true 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 creato l'oggetto request, 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 dell'interfaccia utente dell'app di pagamento dipende completamente dal fornitore dell'app di pagamento. Dopo che il cliente accetta di effettuare un pagamento, viene passato un oggetto JSON al commerciante contenente tutte le informazioni necessarie per trasferire denaro. Il commerciante può quindi inviarlo al PSP per elaborare il pagamento.

Infine, puoi chiudere la UI della richiesta di pagamento completando la procedura con response.complete('success') o response.complete('fail') a seconda del risultato restituito dal PSP.

A seguire

Scopri di più su Web Payments.