L'API Google Pay offre agli utenti l'opportunità di pagare ovunque, utilizzando i dati di pagamento memorizzati nei loro Account Google. In questo lab, utilizzi la libreria client web di Google Pay per migliorare l'esperienza di pagamento di un negozio online di esempio semplificato, creando un'esperienza più rapida, comoda e sicura, che a sua volta porta a un maggior numero di conversioni e clienti più soddisfatti.
Auto T-Shirt Shop è un negozio innovativo che sfrutta i più recenti progressi dell'intelligenza artificiale e utilizza informazioni come preferenze di stile, meteo, periodo dell'anno e tendenze della moda per suggerirti l'articolo più adatto all'acquisto.
Le metriche sul coinvolgimento per questo negozio sono alle stelle. Purtroppo, le metriche riflettono anche un numero elevato di abbandoni durante la procedura di pagamento. Determinato a risolvere il problema, uno dei proprietari del progetto ricorda di aver visto un video che mostrava i risultati promettenti ottenuti da Google Pay per siti simili, quindi decide di fare un tentativo e si affida a te per l'integrazione.
Cosa creerai
Questo codelab ti guida nell'integrazione di Google Pay in un sito esistente, inclusa la determinazione della possibilità di un utente di pagare utilizzando un metodo di pagamento supportato da Google Pay, il posizionamento e il design 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
Che cosa ti serve
- Un computer con accesso a internet
- Conoscenza di base di JavaScript
Esegui il sito di esempio su glitch.com
Per iniziare il più rapidamente possibile, questo codelab è stato reso disponibile su glitch.com. Glitch è un ambiente web senza costi che fornisce un editor di codice e funzionalità di hosting e deployment che puoi utilizzare per creare e pubblicare applicazioni web.
Per iniziare, utilizza il pulsante di seguito per eseguire il provisioning di un nuovo ambiente di sviluppo su Glitch già configurato con una copia di questo codelab.
Da questo momento in poi, puoi utilizzare l'editor di codice su Glitch per modificare i tuoi file. Inizia a pubblicare l'applicazione utilizzando il menu Mostra in alto e scegli In una nuova finestra.
Scorrere il sito di esempio
Come puoi vedere, il repository presenta una struttura di file semplice. 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 utilizzare.
Esplorare il sito
Questo marketplace demo è stato creato in modo da assomigliare umilmente all'aspetto che potrebbe avere oggi la tua applicazione esistente o potenziale, prima di aggiungere un mezzo di acquisto. Infatti, anche se ti consigliamo di lavorare su questa applicazione demo, puoi utilizzare questo codelab per integrare Google Pay nelle tue applicazioni esistenti.
Ora, se non l'hai ancora fatto, apri il sito demo così com'è attualmente. 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 è niente di sorprendente, giusto? Una pagina dei dettagli del prodotto, con un'immagine, il prezzo, una descrizione, alcuni selettori e un pulsante che ti porta a un modulo di pagamento immaginario e ordinario.
L'obiettivo di questo lab è sostituire questo flusso con un'esperienza in due clic basata su Google Pay.
Organizziamoci!
Per comprendere meglio questa integrazione, la procedura è suddivisa nei seguenti passaggi fondamentali:
- Caricare la libreria
- Determinare la possibilità di pagare con Google Pay
- Mostra il pulsante per pagare con Google Pay
- Creare e inviare la richiesta di pagamento
- Raccogliere i risultati
Aggiungere il script tag
La prima cosa da fare per iniziare a utilizzare l'API Google Pay è caricare la libreria JavaScript. A questo scopo, includi un tag script nel file HTML da cui intendi chiamare l'API, incluso un attributo src che rimanda 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 tempo di caricamento iniziale del documento non venga influenzato.onloadti aiuta a posticipare 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 questa libreria. Inizia istanziando l'oggetto client, che utilizzerai in un secondo momento per effettuare chiamate all'API Google Pay.
Modifica il file index.js, che fa già parte della struttura dei file di 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 viene inizializzato con un oggetto PaymentOptions. Se imposti environment su TEST, puoi sperimentare con 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
Ora abbiamo caricato la libreria client JavaScript dell'API Google Pay. Ora configuriamolo per effettuare chiamate API per nostro conto.
Tutte le modifiche al codice seguenti per il resto del codelab verranno apportate al file index.js.
Lo scheletro
Ogni volta che comunichi con l'API Google Pay, devi includere nelle tue richieste una serie di parametri di configurazione, ad esempio la versione dell'API di destinazione. Ai fini di questo codelab, questo oggetto contiene anche informazioni sui metodi di pagamento accettati nella tua applicazione. La struttura finale è la 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>
}
}Solo le proprietà type e parameters sono necessarie per determinare se l'utente in questione può pagare con Google Pay.
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 con numero di conto principale (PAN).
Ecco come deve essere configurata 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 sul tuo sito web e utilizzerai la versione 2.0 dell'API. Ecco l'aspetto che dovrebbe avere 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 la configurazione di base è pronta, passiamo alla parte divertente.
Uno degli obiettivi principali di Google Pay è offrire ai tuoi utenti un'esperienza di pagamento più rapida e comoda. Ciò non si applica solo alle situazioni in cui una persona può utilizzare Google Pay, ma anche a quelle in cui non può farlo. L'utilizzo della richiesta isReadyToPay ti consente di determinare la disponibilità a pagare con Google Pay e di modificare di conseguenza l'esperienza nel tuo sito.
L'utente è in grado di pagare con Google Pay?
La prima cosa da fare è verificare se un utente specifico che sta per effettuare un pagamento sul tuo sito può utilizzare Google Pay. Questa richiesta richiede di specificare la versione dell'API Google Pay e i metodi di pagamento consentiti per il tuo sito. Questo è esattamente ciò che contiene l'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 restituisce una risposta negativa, non è necessario intraprendere ulteriori azioni nel contesto di Google Pay. In questo caso, il passaggio successivo più appropriato sarebbe mostrare un'interfaccia utente aggiuntiva che supporti altri mezzi di pagamento.
Se la risposta ha esito positivo, puoi consentire ai tuoi utenti di usufruire di Google Pay e aggiungere un pulsante per avviare la procedura di pagamento all'attivazione dell'utente (ad esempio, facendo clic sul pulsante).
Aggiungere un pulsante per pagare con Google Pay
Anche se puoi utilizzare qualsiasi pulsante che rispetti le linee guida per il branding di Google Pay per avviare la procedura di pagamento, ti consigliamo di generarne uno utilizzando l'API Google Pay. In questo modo, non solo garantisci un utilizzo accurato delle linee guida per il brand, ma usufruisci anche 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 utilizzi createButton è onClick, necessaria per determinare l'oggetto o la funzione di callback da attivare ogni volta che gli utenti attivano il pulsante. buttonColor e buttonType ti consentono di personalizzare l'aspetto del pulsante. Modificali di conseguenza in base ai requisiti del tema e dell'interfaccia utente della tua applicazione.
Una volta creato il pulsante, non devi fare altro che aggiungerlo a un nodo appropriato all'interno del DOM. In questo esempio, a questo scopo viene utilizzato un nodo div identificato con buy-now.
Vedrai che 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.
Prepara la richiesta di pagamento
A questo punto, hai caricato l'API Google Pay e hai stabilito che l'utente del tuo sito può utilizzare Google Pay per effettuare un pagamento. Di conseguenza, hai mostrato il pulsante di pagamento Google Pay nell'interfaccia utente e ora l'utente è pronto per avviare la transazione. È ora di caricare il foglio dei pagamenti finale contenente le forme di pagamento disponibili per i diversi utenti che hanno eseguito l'accesso.
Come hai fatto in precedenza, durante la definizione della richiesta isReadyToPay, anche questa chiamata richiede le proprietà nell'oggetto di configurazione di base definito in precedenza (apiVersion, apiVersionMinor e allowedPaymentMethods), oltre ad alcune nuove. Questa volta, nei tuoi metodi di pagamento sono presenti una nuova proprietà, tokenizationSpecification, e ulteriori parameters pertinenti ai fini di questa richiesta. Inoltre, devono essere aggiunti transactionInfo e merchantInfo.
Includere ulteriori informazioni richieste nei metodi di pagamento
Inizia creando una copia del metodo di pagamento con carta di base utilizzato in precedenza. Questo metodo di pagamento con carta ora richiede una proprietà tokenizationSpecification per definire come gestire i dati relativi al metodo di pagamento selezionato, nonché ulteriori requisiti di dati necessari per la transazione effettiva: in questo esempio, un indirizzo di fatturazione e un numero di telefono completi.
Proprietà tokenizationSpecification
La specifica di tokenizzazione determina come viene gestito e utilizzato il metodo di pagamento selezionato dai tuoi clienti per completare una transazione.
Sono supportati due diversi tipi di strategie di gestione. Se elabori la transazione di pagamento dai tuoi server conformi allo standard PCI DSS, utilizza il tipo di specifica DIRECT. In questo esempio, utilizzi 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 dei fornitori supportati dall'API Google Pay, insieme alla configurazione aggiuntiva richiesta da ciascun gateway. Ai fini di questo lab, è sufficiente utilizzare il gateway example, che produce risultati di test per le transazioni eseguite.
Parametri aggiuntivi
Allo stesso modo, ora puoi fornire maggiori dettagli sulle informazioni che devi richiedere per completare correttamente la transazione. In questo esempio, devi aggiungere le proprietà billingAddressRequired e billingAddressParameters per indicare che per questa transazione è richiesto l'indirizzo di fatturazione dell'utente nel 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 della transazione, ovvero il prezzo e il codice valuta(formato alfabetico ISO 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'
};Aggiunta di 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:
-
merchantIdprevede l'identificatore associato al tuo account una volta che il tuo sito è stato approvato per operare in produzione da Google. Tieni presente che questa impostazione non viene valutata durante l'utilizzo dell'ambienteTEST. merchantNameè un nome visibile all'utente del tuo sito o della tua organizzazione. Queste informazioni potrebbero essere mostrate all'interno del modulo di pagamento 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 ciò che ti serve per richiedere all'API Google Pay una forma di pagamento valida. A tal fine, utilizza il metodo loadPaymentData nell'oggetto PaymentsClient, passando 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 }
});La chiamata al metodo loadPaymentData attiva la visualizzazione del foglio di pagamento di Google Pay. Se non ci sono errori di configurazione, puoi visualizzare un elenco dei metodi di pagamento validi associati all'account attualmente connesso.
Una volta selezionata, la scheda si chiude e Promise viene compilato con un oggetto PaymentData che include 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 queste informazioni sul metodo di pagamento per eseguire 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. Supponiamo però di voler aggiornare il prezzo in base alla selezione di determinate proprietà della transazione (ad esempio, i dettagli di spedizione). Puoi farlo fornendo il parametro paymentDataCallback durante la creazione del client. Questo callback viene utilizzato per gestire le modifiche alla 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, ascolterai le modifiche 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;
Successivamente, modifichi 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 ritorno di questo nuovo oggetto nel callback, le informazioni presentate nel foglio di pagamento vengono aggiornate per riflettere le modifiche apportate alla transazione.
Ora che hai verificato che l'integrazione funzioni correttamente, puoi fare un ulteriore passo avanti e precaricare la configurazione dei pagamenti non appena hai stabilito che è possibile utilizzare Google Pay. Ciò avviene prima che l'utente attivi (faccia clic) sul pulsante di pagamento Google Pay.
Se precarichi i dati di pagamento, quando l'utente decide di pagare, le informazioni necessarie per caricare il foglio saranno già disponibili, riducendo significativamente il tempo di caricamento e migliorando quindi l'esperienza complessiva.
Questo metodo prevede lo stesso input di loadPaymentData. ovvero puoi utilizzare lo stesso oggetto paymentDataRequest definito in precedenza. Ora, tutto ciò che devi fare è includere una chiamata al metodo di recupero non appena hai stabilito che l'utente può utilizzare Google Pay, dopo che isReadyToPay restituisce un risultato positivo:
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 facesse clic sul pulsante. La maggiore reattività del tuo 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 mettere in produzione questa integrazione, non dimenticare di dare un'occhiata alla lista di controllo per l'integrazione. Una volta completata e rivista, riceverai un identificatore commerciante da aggiungere alla configurazione del client. Allo stesso modo, se prevedi di utilizzare (o stai già utilizzando) un gateway o un elaboratore dei pagamenti 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.
Argomenti trattati
- Importa e configura l'API Google nel tuo sito.
- Determina il supporto per l'API e reagisci di conseguenza.
- Aggiungi un pulsante per consentire agli utenti di pagare utilizzando Google Pay.
- Caricare ed elaborare i dati di pagamento dell'utente archiviati in precedenza.
- Ottimizza il tempo di caricamento precaricando i dati di pagamento.
Passaggi successivi
- Scopri di più su Google Pay.
- Esamina l'elenco di controllo per l'integrazione e ottieni un identificatore commerciante.
- Esamina i due diversi tipi di integrazione e decidi quale è più adatto a te: l'integrazione diretta o l'utilizzo di un gateway o di un elaboratore dei pagamenti.
- Configura Autorizza pagamenti per avviare la procedura di pagamento e confermare lo stato di autorizzazione di un pagamento. (Auth or Decline)
Scopri di più
- Consulta il riferimento della libreria.
- Risolvi i problemi relativi all'implementazione se visualizzi errori.
- Scopri di più sull'integrazione di Google Pay su Android.