L'API Google Pay offre agli utenti la possibilità di pagare ovunque si trovino, utilizzando i dati di pagamento memorizzati nei loro Account Google. In questo lab, utilizzerai la libreria client di Google Pay per il Web per migliorare l'esperienza di pagamento di un negozio online di esempio semplificato, creando un'esperienza più veloce, pratica e sicura, che a sua volta genera un maggior numero di conversioni e clienti più soddisfatti.
Auto T-shirt Shop è un negozio innovativo che sfrutta gli ultimi progressi dell'intelligenza artificiale e utilizza informazioni quali preferenze di stile, meteo, periodo dell'anno e tendenze della moda per suggerire l'articolo più adatto per l'acquisto.
Le metriche sul coinvolgimento per questo negozio hanno raggiunto gli obiettivi. Purtroppo, le metriche riflettono anche un elevato numero di abbandoni durante la procedura di pagamento. Una delle persone che ha deciso di affrontare questa situazione, uno dei proprietari del progetto ricorda di aver visto un video che mostra i risultati promettenti che Google Pay ha prodotto per siti simili, quindi ha scelto di provare e di fidarsi dell'integrazione.
Cosa imparerai a realizzare
Questo codelab ti spiega passo per passo come integrare Google Pay in un sito esistente e spiega se un utente è in grado di effettuare i pagamenti utilizzando un metodo supportato da Google Pay, il posizionamento e la struttura del pulsante di pagamento e l'esecuzione della transazione.
Obiettivi didattici
- Come integrare Google Pay in una pagina di pagamento esistente
- Come scegliere tra i metodi di pagamento preferiti
- Come determinare se un utente è pronto a pagare con Google Pay
Cosa ti occorre
- Un computer con accesso a Internet
- Conoscenza di base di JavaScript
Esegui il sito di esempio su glitch.com
Per iniziare a lavorare il più rapidamente possibile, questo codelab è stato reso disponibile su glitch.com. Glitch è un ambiente senza costi basato sul Web che offre un editor di codice e funzioni di hosting e deployment che puoi utilizzare per creare e pubblicare applicazioni web.
Per iniziare, utilizza il pulsante seguente per eseguire il provisioning di un nuovo ambiente di sviluppo in Glitch già configurato con una copia di questo codelab.
Da qui, puoi utilizzare l'editor di codice su Glitch per modificare i file. Inizia a gestire la tua applicazione utilizzando il menu Mostra in alto e scegli In una nuova finestra.
Attraversare il sito di esempio
Come puoi vedere, il repository presenta una struttura di file non complicata. L'obiettivo principale di questo codelab è darti la possibilità di adattare questa integrazione alle tue applicazioni esistenti e future, indipendentemente dal framework, dalle librerie o dagli strumenti che scegli di lavorare.
Esplora il sito
Questo marketplace dimostrativo è stato costruito in modo tale da assomigliare umilmente all'aspetto attuale della tua applicazione esistente o potenziale prima di aggiungere un mezzo di acquisto. Infatti, anche se ti consigliamo di occuparti di questa applicazione demo, puoi procedere e utilizzare questo codelab per integrare Google Pay nelle tue applicazioni esistenti.
Ora, se non l'hai ancora fatto, apri il sito dimostrativo così com'è. Per farlo, fai clic sul pulsante Mostra se utilizzi Glitch o apri l'URL in cui è in esecuzione il server web locale.
Il sito dimostrativo non è certo una sorpresa, vero? Una pagina dei dettagli del prodotto con un'immagine, il prezzo, una descrizione, alcuni selettori e un pulsante per accedere a un modulo di pagamento immaginario e ordinario.
L'obiettivo di questo lab è sostituire questo flusso con un'esperienza di due clic basata su Google Pay.
Pianifichiamo tutto!
Per comprendere meglio questa integrazione, il processo è suddiviso nei seguenti passaggi fondamentali:
- Caricare la libreria
- Stabilire la possibilità di pagare con Google Pay
- Mostra il pulsante per pagare con Google Pay
- Creare e inviare la richiesta di pagamento
- Raccogli i risultati
Aggiungi il scripttag
La prima cosa da fare per iniziare a utilizzare l'API Google Pay è caricare la libreria JavaScript. A tale scopo, includi nel tag HTML un tag script da cui intendi chiamare l'API, incluso un attributo src che rimandi alla libreria JavaScript esterna.
Per questo codelab, apri il file index.html. Dovresti vedere che il tag script è già stato incluso:
<script async
src="https://pay.google.com/gp/p/js/pay.js"
onload="onGooglePayLoaded()">
</script>Oltre a src, hai aggiunto altri due attributi.
asyncconsente di caricare ed eseguire lo script in modo asincrono insieme al resto della pagina, in modo che il primo tempo di caricamento del documento non venga influenzato.onloadconsente di rimandare l'esecuzione del codice che dipende da questa libreria fino al caricamento dello script. Al termine, viene eseguita la funzione specificata in questo attributo. In questo caso, la funzione èonGooglePayLoaded.
Crea un'istanza del client API
Una volta caricato lo script, tutto è pronto per iniziare a utilizzare la libreria. Inizia con l'istanza dell'oggetto client, che utilizzerai per effettuare chiamate all'API Google Pay in un secondo momento.
Modifica il file index.js, che fa già parte della struttura del file in questo progetto. Sostituisci la funzione onGooglePayLoaded con il seguente codice.
let googlePayClient;
function onGooglePayLoaded() {
googlePayClient = new google.payments.api.PaymentsClient({
environment: 'TEST'
});
}Il client di pagamento è inizializzato con un oggetto PaymentOptions. Se imposti environment su TEST, puoi sperimentare con i dati di pagamento fittizi nell'intera integrazione. Quando è tutto pronto per creare operazioni che supportano transazioni reali, puoi aggiornare la proprietà environment a PRODUCTION.
Panoramica
Abbiamo caricato la libreria client JavaScript dell'API Google Pay. Ora configuriamola per effettuare chiamate API per noi.
Tutte le seguenti modifiche di codice al resto del codelab verranno apportate al file index.js.
Lo scheletro
Ogni volta che comunichi con l'API Google Pay, devi includere diversi parametri di configurazione nelle richieste, ad esempio la versione dell'API scelta come target. Ai fini di questo codelab, questo oggetto contiene anche informazioni sui metodi di pagamento accettati nella tua richiesta. La struttura finale sarà simile alla seguente:
{
apiVersion: number,
apiVersionMinor: number,
allowedPaymentMethods: Array
}La proprietà allowedPaymentMethods accetta un elenco di metodi di pagamento. Per ogni metodo di pagamento devi includere le seguenti proprietà:
{
type: 'CARD',
parameters: {
allowedCardNetworks: Array.<string>,
allowedAuthMethods: Array.<string>
}
}Per determinare se l'utente in questione può effettuare pagamenti con Google Pay sono necessarie solo le proprietà type e parameters.
La configurazione del metodo di pagamento
In questo esempio, accetterai una sola configurazione che consente i pagamenti con carta per MasterCard e Visa, sia in formato tokenizzato che in numero di conto principale (PAN).
Ecco come deve essere impostata la configurazione in index.js:
const baseCardPaymentMethod = {
type: 'CARD',
parameters: {
allowedCardNetworks: ['VISA','MASTERCARD'],
allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
}
};Per riassumere
Ricapitoliamo.
Hai definito un metodo di pagamento da accettare nel tuo sito web e utilizzerai la versione 2.0 dell'API. Ecco come dovrebbe apparire la configurazione risultante:
const baseCardPaymentMethod = {
type: 'CARD',
parameters: {
allowedCardNetworks: ['VISA','MASTERCARD'],
allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
}
};
const googlePayBaseConfiguration = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [baseCardPaymentMethod]
};Ora che hai configurato la tua configurazione di base, passa alla parte divertente.
Uno degli obiettivi principali di Google Pay è offrire agli utenti un'esperienza di pagamento più rapida e pratica. Ciò vale non solo nei casi in cui una persona è in grado di utilizzare Google Pay, ma anche in situazioni in cui non è in grado di farlo. L'utilizzo della richiesta isReadyToPay ti consente di determinare se sei pronto a pagare con Google Pay e di modificare l'esperienza sul tuo sito di conseguenza.
Il tuo utente è in grado di pagare con Google Pay?
La prima cosa da fare è verificare se un utente specifico che sta per effettuare pagamenti sul tuo sito è in grado di utilizzare Google Pay per effettuare questa operazione. Questa richiesta richiede di specificare la versione dell'API Google Pay e i metodi di pagamento consentiti per il tuo sito. Si tratta esattamente dell'oggetto di configurazione di base definito nel passaggio precedente.
In index.js all'interno della funzione onGooglePayLoaded(), incolla quanto segue:
googlePayClient.isReadyToPay(googlePayBaseConfiguration)
.then(function(response) {
if(response.result) {
createAndAddButton();
} else {
alert("Unable to pay using Google Pay");
}
}).catch(function(err) {
console.error("Error determining readiness to use Google Pay: ", err);
});Se la chiamata non va a buon fine o viene restituita con una risposta non riuscita, nel contesto di Google Pay non devi intraprendere ulteriori azioni. In questo caso, la fase successiva più appropriata consiste nel mostrare un'altra UI che supporti altri metodi di pagamento.
Se invece la risposta va a buon fine, puoi consentire agli utenti di utilizzare Google Pay e, di conseguenza, procedere con l'aggiunta di un pulsante per avviare la procedura di pagamento all'attivazione dell'utente (ad esempio, un clic sul pulsante).
Aggiungere un pulsante per pagare con Google Pay
Anche se puoi utilizzare qualsiasi pulsante che rispetta le linee guida per il branding di Google Pay, ti consigliamo di generarne uno utilizzando l'API Google Pay. In questo modo, non solo ti assicuri di utilizzare in modo preciso le linee guida per il branding, ma puoi anche usufruire di altri miglioramenti integrati direttamente nel pulsante, come la localizzazione.
Per generare un pulsante, utilizza il metodo createButton nell'oggetto PaymentsClient, incluso ButtonOptions per configurare il pulsante.
In index.js all'interno della funzione createAndAddButton(), incolla quanto segue:
function createAndAddButton() {
const googlePayButton = googlePayClient.createButton({
// currently defaults to black if default or omitted
buttonColor: 'default',
// defaults to long if omitted
buttonType: 'long',
onClick: onGooglePaymentsButtonClicked
});
document.getElementById('buy-now').appendChild(googlePayButton);
}
function onGooglePaymentsButtonClicked() {
// TODO: Perform transaction
}L'unica proprietà obbligatoria quando si utilizza createButton è onClick, necessaria per determinare la funzione o l'oggetto di callback da attivare ogni volta che gli utenti attivano il pulsante. buttonColor e buttonType consentono di personalizzare l'aspetto del pulsante. Adattali di conseguenza in base ai temi e ai requisiti dell'interfaccia utente della tua applicazione.
Una volta creato il pulsante, è sufficiente aggiungerlo a un nodo appropriato all'interno del DOM. In questo esempio, a questo scopo viene utilizzato un nodo div identificato con buy-now.
Come spiegato, hai anche definito una funzione per gestire gli eventi di clic sui pulsanti. Nella sezione successiva utilizzerai questa funzione per richiedere un metodo di pagamento.
Preparare la richiesta di pagamento
A questo punto, hai caricato l'API Google Pay e stabilito che l'utente del tuo sito è in grado di utilizzare Google Pay per effettuare il pagamento. Di conseguenza, hai visualizzato il pulsante per i pagamenti di Google Pay nell'interfaccia utente e ora il tuo utente è pronto per avviare la transazione. È ora di caricare il foglio pagamenti finale contenente le forme di pagamento disponibili per i diversi utenti che hanno eseguito l'accesso.
Proprio come hai fatto prima, durante la definizione della richiesta isReadyToPay, questa chiamata richiede anche le proprietà nell'oggetto di configurazione di base definite in precedenza (apiVersion, apiVersionMinor e allowedPaymentMethods) oltre ad alcune nuove. Questa volta sui tuoi metodi di pagamento sono presenti una nuova proprietà, tokenizationSpecification e parameters aggiuntivi, pertinenti allo scopo di questa richiesta. Inoltre, è necessario aggiungere transactionInfo e merchantInfo.
Includere ulteriori informazioni obbligatorie nei metodi di pagamento
Per iniziare, crea una copia del metodo di pagamento della carta di base utilizzato in precedenza. Questo metodo di pagamento con carta adesso richiede una proprietà tokenizationSpecification per definire come gestire i dati relativi al metodo di pagamento selezionato, nonché ulteriori requisiti per la transazione effettiva: in questo esempio, un indirizzo di fatturazione completo e un numero di telefono.
La proprietà tokenizationSpecification
La specifica di tokenizzazione determina il modo in cui il metodo di pagamento selezionato dai tuoi clienti viene gestito e utilizzato per completare una transazione.
Sono supportati due diversi tipi di strategie di gestione. Se stai elaborando la transazione di pagamento dai tuoi server conformi allo standard PCI DSS, utilizza il tipo di specifica DIRECT. In questo esempio viene utilizzato un gateway di pagamento per elaborare il pagamento, quindi imposti il tipo di specifica PAYMENT_GATEWAY.
In index.js all'interno della funzione onGooglePaymentsButtonClicked(), incolla quanto segue:
const tokenizationSpecification = {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'gatewayMerchantId'
}
};Nella sezione parameters, puoi specificare un gateway dall'elenco di provider supportati dall'API Google Pay, insieme a una configurazione aggiuntiva richiesta da ciascun gateway. Ai fini di questo lab è sufficiente utilizzare il gateway example, che restituisce i risultati del test per le transazioni eseguite.
Parametri aggiuntivi
Allo stesso modo, ora puoi fornire ulteriori dettagli sulle informazioni di cui hai bisogno per effettuare correttamente la transazione. Guarda come in questo esempio devi aggiungere le proprietà billingAddressRequired e billingAddressParameters per indicare che per questa transazione l'indirizzo di fatturazione dell'utente è obbligatorio in formato completo, incluso un numero di telefono.
In index.js all'interno della funzione onGooglePaymentsButtonClicked(), incolla quanto segue:
const cardPaymentMethod = {
type: 'CARD',
tokenizationSpecification: tokenizationSpecification,
parameters: {
allowedCardNetworks: ['VISA','MASTERCARD'],
allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
billingAddressRequired: true,
billingAddressParameters: {
format: 'FULL',
phoneNumberRequired: true
}
}
};Aggiungere informazioni sulla transazione
La proprietà transactionInfo contiene un oggetto con i dettagli finanziari sulla transazione, ovvero il prezzo e il codice valuta(formato alfa 4217) insieme allo stato del prezzo, che può essere finale o stimato a seconda della natura della transazione (ad esempio, il prezzo può variare a seconda dell'indirizzo di spedizione specificato).
In index.js all'interno della funzione onGooglePaymentsButtonClicked(), incolla quanto segue:
const transactionInfo = {
totalPriceStatus: 'FINAL',
totalPrice: '123.45',
currencyCode: 'USD'
};Aggiungere informazioni sul commerciante
La richiesta di pagamento acquisisce informazioni sul commerciante che esegue la richiesta nella proprietà merchantInfo. In questo codelab, ti concentrerai su due di questi elementi:
-
merchantIdprevede che l'identificatore associato al tuo account sia approvato per la produzione in Google da parte del tuo sito. Tieni presente che questa valutazione non viene valutata durante l'utilizzo dell'ambienteTEST. merchantNameè un nome visibile all'utente del sito o dell'organizzazione. Questa informazione può essere visualizzata all'interno della scheda Pagamenti di Google Pay per fornire agli utenti maggiori informazioni su chi richiede l'operazione.
In index.js all'interno della funzione onGooglePaymentsButtonClicked(), incolla quanto segue:
const merchantInfo = {
// merchantId: '01234567890123456789', Only in PRODUCTION
merchantName: 'Example Merchant Name'
};Richiedere i dati di pagamento ed elaborare il risultato
Ora, unisci la configurazione definita in precedenza nell'oggetto paymentDataRequest finale.
In index.js all'interno della funzione onGooglePaymentsButtonClicked(), incolla quanto segue:
const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
allowedPaymentMethods: [cardPaymentMethod],
transactionInfo: transactionInfo,
merchantInfo: merchantInfo
});A questo punto, hai tutto il necessario per richiedere all'API Google Pay una forma di pagamento valida. Per farlo, utilizza il metodo loadPaymentData nell'oggetto PaymentsClient, trasmettendo la configurazione che hai appena definito.
In index.js all'interno della funzione onGooglePaymentsButtonClicked(), incolla quanto segue:
googlePayClient
.loadPaymentData(paymentDataRequest)
.then(function(paymentData) {
processPayment(paymentData);
}).catch(function(err) {
// Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
});Chiamando il metodo loadPaymentData si attiva la presentazione del foglio di pagamento di Google Pay. Se non sono presenti errori di configurazione, puoi visualizzare un elenco dei metodi di pagamento validi associati all'account attualmente connesso.
Al momento della selezione, il foglio si chiude e l'oggetto Promise viene compilato con un oggetto PaymentData che include le informazioni pertinenti sul metodo di pagamento selezionato:
{
"apiVersionMinor": 0,
"apiVersion": 2,
"paymentMethodData": {
"description": "Visa •••• 1234",
"tokenizationData": {
"type": "PAYMENT_GATEWAY",
"token": "examplePaymentMethodToken"
},
"type": "CARD",
"info": {
"cardNetwork": "VISA",
"cardDetails": "1234",
"billingAddress": {
"phoneNumber": ...,
...
}
}
}
}Ora puoi utilizzare questi dati del metodo di pagamento per effettuare la transazione effettiva.
function processPayment(paymentData) {
// TODO: Send a POST request to your processor with the payload
// https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server
// Sorry, this is out-of-scope for this codelab.
return new Promise(function(resolve, reject) {
// @todo pass payment token to your gateway to process payment
const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
console.log('mock send token ' + paymentToken + ' to payment processor');
setTimeout(function() {
console.log('mock response from processor');
alert('done');
resolve({});
}, 800);
});
}Finora abbiamo esaminato le transazioni con importi di pagamento fissi. Tuttavia, supponiamo di voler aggiornare il prezzo in base alla selezione di determinate proprietà della transazione (ad esempio, i dettagli di spedizione). Puoi ottenere questo risultato fornendo il parametro paymentDataCallback durante la creazione del client. Questo callback viene utilizzato per gestire le modifiche sulla transazione e applicare le modifiche di conseguenza. Puoi ascoltare le modifiche apportate all'indirizzo di spedizione, all'opzione di spedizione e al metodo di pagamento selezionati. In questo esempio, ascolti le modifiche apportate all'opzione di spedizione selezionata. Innanzitutto, definisci le variabili contenenti tutte le informazioni di spedizione e modifica paymentDataRequest per includerle:
const shippingOptionParameters = {
shippingOptions: [
{
id: 'shipping-001',
label: '$1.99: Standard shipping',
description: 'Delivered on May 15.'
},
{
id: 'shipping-002',
label: '$3.99: Expedited shipping',
description: 'Delivered on May 12.'
},
{
id: 'shipping-003',
label: '$10: Express shipping',
description: 'Delivered tomorrow.'
}
]
};
// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
'shipping-001': 1.99,
'shipping-002': 3.99,
'shipping-003': 10
};
...
// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters = shippingOptionParameters;
Poi devi modificare la creazione di googlePayClient per includere un paymentDataCallback, che viene chiamato ogni volta che viene apportata una modifica inclusa in callbackIntents all'operazione di pagamento. Questo callback include un oggetto con le proprietà modificate. Puoi utilizzare queste modifiche per creare una transazione di pagamento aggiornata:
function onGooglePayLoaded() {
googlePayClient = new google.payments.api.PaymentsClient({
paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
environment: 'TEST'
});
...
}
function paymentDataCallback(callbackPayload) {
const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
const priceWithSurcharges = 123.45 + shippingSurcharge;
return {
newTransactionInfo: {
totalPriceStatus: 'FINAL',
totalPrice: priceWithSurcharges.toFixed(2),
totalPriceLabel: 'Total',
currencyCode: 'USD',
displayItems: [
{
label: 'Subtotal',
type: 'SUBTOTAL',
price: priceWithSurcharges.toFixed(2),
},
{
label: 'Shipping',
type: 'LINE_ITEM',
price: shippingSurcharge.toFixed(2),
status: 'FINAL'
}]
}
}
};Al momento della restituzione del nuovo oggetto nel callback, le informazioni riportate nel foglio di pagamento vengono aggiornate in modo da riflettere le modifiche apportate alla transazione.
Ora che hai verificato che l'integrazione funziona in modo adeguato, puoi andare oltre e precaricare la configurazione dei pagamenti non appena hai determinato che Google Pay può essere utilizzato. Questo accade prima che l'utente attivi (fai clic) sul pulsante di pagamento di Google Pay.
Se precarica i dati di pagamento, quando l'utente decide di effettuare il pagamento, le informazioni necessarie per il caricamento del foglio saranno già disponibili, riducendo notevolmente il tempo di caricamento e migliorando quindi l'esperienza complessiva.
Questo metodo prevede lo stesso input di loadPaymentData. In altre parole, puoi utilizzare lo stesso oggetto paymentDataRequest definito in precedenza. Ora devi solo chiamare il metodo di precaricamento non appena avrai determinato che l'utente può utilizzare Google Pay dopo che isReadyToPay è tornato a funzionare correttamente:
googlePayClient.isReadyToPay(googlePayBaseConfiguration)
.then(function(response) {
if(response.result) {
createAndAddButton();
googlePayClient.prefetchPaymentData(paymentDataRequest);
}
});In questo modo, hai ridotto il tempo di caricamento precaricando i dati di pagamento prima che l'utente fa clic sul pulsante. La reattività del sito dovrebbe migliorare il tasso di conversione.
Hai integrato correttamente l'API Google Pay nel sito di esempio di questo codelab o nella tua applicazione.
Ora, per implementare questa funzionalità in produzione, non dimenticare di esaminare l'elenco di controllo per l'integrazione, Al termine della procedura di revisione, riceverai un identificatore commerciante da aggiungere alla configurazione del client. Allo stesso modo, se prevedi di utilizzare o stai già utilizzando un processore di pagamento o un gateway di terze parti, consulta l'elenco dei fornitori supportati su Google Pay e configura il tuo. Se esegui l'integrazione direttamente con Google Pay, consulta la sezione della documentazione su questo argomento.
Cosa abbiamo trattato
- Importa e configura l'API di Google nel tuo sito.
- Determina il supporto per l'API e reagisci di conseguenza.
- Aggiungi un pulsante che consenta agli utenti di effettuare pagamenti tramite Google Pay.
- Carica ed elabora i dati di pagamento dell'utente archiviati in precedenza.
- Ottimizza il tempo di caricamento precaricando i dati di pagamento.
Passaggi successivi
- Scopri ulteriori informazioni su Google Pay.
- Consulta l'elenco di controllo dell'integrazione e ottieni un identificatore del commerciante.
- Esamina i due diversi tipi di integrazione e decidi qual è il più adatto alle tue esigenze: integra direttamente o utilizzando un gateway o un elaboratore dei pagamenti.
- Configura Autorizza pagamenti per avviare la procedura di pagamento e confermare lo stato di autorizzazione del pagamento. (Autenticazione o Rifiuta)
Scopri di più
- Consulta il riferimento dalla biblioteca.
- Se rilevi errori, segnala l'implementazione.
- Scopri di più sull'integrazione di Google Pay su Android.