Guida pratica per le API Payment Request

API Payment Request

Le API Payment Request sono un metodo di pagamento nato per supportare al meglio gli acquisti da mobile.

I primi passi mossi in questa direzione hanno avuto inizio con il sistema di auto completamento dei moduli di pagamento.

Successivamente la W3C ha iniziato a fissare le norme per la creazione di uno standard che cancelli i moduli di pagamento tradizionali.

Oltre che per ragioni di usabilità su mobile, le API Payment Request hanno lo scopo di realizzare un metodo di pagamento univoco, indipendente dal singolo servizio.

Per comprendere meglio il punto, basti pensare che i metodi di pagamento offerti da Google, Paypal, Stripe e Apple offrono esperienze tra loro differenti.

Con lo standard proposto invece, è il browser a fare da mezzo per permettere ai clienti di pagare i gestori dei siti / app.

API Payment Request

Come funziona

Se il tentativo di creare un unico standard per il pagamento attrae gli sviluppatori, al momento l’unico risultato reale è far convergere i grandi players su uno stile grafico simile.

I punti in comune dei codici che rientrano nella tipologia delle API Request Payment sono i seguenti:

  • Realizzazione di un bottone o di un form mobile friendly.
  • Il pagamento non passa obbligatoriamente dal checkout.
  • La connessione tra sito e servizio richiede una key identificativa.
  • E’ possibile inserire il sistema di pagamento senza possedere un e-commerce.

Il metodo permette di utilizzare un numero minore di passaggi per terminare l’acquisto, ma richiede un sito che abbia un protocollo SSL attivo.

Di fatto, basta inserire i dati del pagamento nel trigger di elemento (un bottone in HTML o altro) per far aprire la schermata, utilizzare eventuali carte di credito precedentemente utilizzate per pagare online e salvate sul nostro account Google.

Nel caso in cui sia necessario inserire un indirizzo per la spedizione, sarà possibile trovare i nostri dati precedentemente compilati e salvati durante la navigazione in un sito che ne faceva richiesta.

Pannello per le spedizioni delle API Payment Request

Plugin che utilizzano le API

Per rendere più agevole l’utilizzo del sistema, alcuni operatori come Stripe hanno cominciato a fornire dei plugin per WordPress, che integrano le API per il pagamento online ma che di fatto non rientrano pienamente nella categoria descritta precedentemente.

Si tratta infatti di strumenti pensati per soddisfare i bisogni del creatore, e non fornisce uno strumento capace di attrarre più modalità di pagamento.

Plugin che integra le API

Integrazione del codice: PaymentRequest

Integrare le API direttamente su un sito web è possibile, e non richiede neppure una conoscenza avanzata del codice.

Per un’introduzione dettagliata sull’argomento vi consiglio la lettura delle Web Fundamentals di Google.

Premetto che il codice è aggiornato frequentemente, perché coinvolge la compatibilità con i browser e molto altro.

La prima operazione da fare per iniziare è inserire un codice che segnali la compatibilità tra il browser e PaymentRequest:

if(window.PaymentRequest) {
  // Use Payment Request API
} else {
  // Fallback to traditional checkout
  window.location.href = '/checkout/traditional';
}

Al momento la stringa PaymentRequest viene riconosciuta da Chrome, Yandex Browser e Firefox, sebbene in quest’ultimo caso la sintassi sia differente da quella utilizzata da Chrome.

Il codice indicato poco sopra è realizzato per implementare il metodo di pagamento all’interno di un e-commerce, in modo da attivarlo solo nel caso in cui il browser lo permetta.

Ma nel caso in cui il codice dovrebbe essere implementato su un sito web tradizionale, risulterebbe ancora più semplice:

function initPaymentRequest() {
let networks = ['amex', 'diners', 'discover', 'jcb', 'mastercard', 'unionpay',
'visa', 'mir'];
let types = ['debit', 'credit', 'prepaid'];
let supportedInstruments = [{
supportedMethods: 'basic-card',
data: { supportedNetworks: networks, supportedTypes: types },
}];

passando quindi direttamente alla configurazione del metodo di pagamento.

Configurazione dei metodi di pagamento.

Pensare che Apple o Facebook si pieghino allo standard di pagamento di Google è improbabile.

Di conseguenza, il codice che fornirò in questo articolo è quello descritto e sviluppato in maniera più strutturata.

Gli sviluppatori sono quelli di Google / Chrome.

Di conseguenza, le implementazioni vertono verso le varianti realizzati dal colosso, come nel caso di Google Pay.

Bottoni di Google Pay

Nel caso in cui volessimo seguire lo spirito normativo di W3C, troveremo con piacere articoli i cui argomenti sono condivisi da Google, Facebook e Mozilla.

Metodi di pagamento supportati

La struttura del codice permetterà di inserire differenti metodi di pagamento, grazie al codice:

 
const supportedPaymentMethods = [
  {
    supportedMethods: 'name-of-payment-method',
    data: {
      // Optional data for this payment method
    }
  }
];

new PaymentRequest(supportedPaymentMethods, paymentDetails, options);

anche se di fatto al momento l’implementazione più agevole risulta quella delle basic-card carte di debito e di credito che richiedono meno sforzo per essere integrate:

 
const creditCardPaymentMethod = {
  supportedMethods: 'basic-card',
  data: {
    supportedNetworks: ['visa', 'mastercard', 'amex'],
    supportedTypes: ['credit', 'debit'],
  },
};

Per quanto riguarda invece metodi di pagamento alternativi, vi lascio il link di approfondimento a Google Pay.

Se si decidesse di integrare sia metodi di pagamento alternativi che le basic-card, basterà modificare le indicazioni descritte sopra per includere entrambe le opzioni.

Il codice per gestire le transazioni

Per sostenere le funzioni comunemente utilizzate dagli e-commerce la compilazione dei campi necessari a visualizzare le transazioni è modulare, capace quindi di accettare un numero variabile di istruzioni:

 
const transactionDisplayItems = [
  {
    label: 'Totale',
    amount: {
      currency: 'EUR',
      value: 5.05,
    },
  }, {
    label: 'Tax',
    pending: true,
    amount: {
      currency: 'EUR',
      value: 0.55,
    },
  },
];
Metodi di pagamento e opzioni delle API

Le opzioni disponibili per completare il pannello di pagamento sono tante, motivo per il quale è stato creato una speciale sezione su Googlechrome che contiene le principali varianti.

Inserire le API su WordPress

Visto che il codice non può essere direttamente integrato nelle pagine di WordPress, un metodo abbastanza ingegnoso per risolvere il problema è creare uno shortcode.

Si inserisce il codice desiderato all’interno di un file PHP opportunamente preparato, di cui se ne segnalerà la presenza nel file function.php.

In seguito, basterà inserire lo shortcode nella pagina o nel post desiderato, mentre il file PHP (connesso ad uno script precedentemente preparato) fornirà il codice necessario per visualizzare un bottone in HTML o qualsiasi cosa si volesse usare come trigger del pannello di pagamento.

starstarstarstarstar0.00 / 0 voto / i

Related Posts

Se ti è piaciuto l'articolo, iscriviti alla Newsletter

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.