Guida all'implementazione di Google Checkout

Panoramica

web iOS API

Google Maps Platform è disponibile per web (JS, TS), Android e iOS, e offre anche API di servizi web per ottenere informazioni su luoghi, indicazioni stradali, e distanze. Gli esempi in questa guida sono scritti per una piattaforma, ma link alla documentazione vengono forniti per l'implementazione su altre piattaforme.

Creala subito

Quick Builder nella console Google Cloud ti consente di creare il completamento automatico dei moduli per gli indirizzi utilizzando un'interfaccia utente interattiva che genera codice JavaScript per te.

Lo shopping e gli ordini online sono diventati parte integrante delle nostre vite. Dai servizi di consegna in giornata alla prenotazione di un taxi o all'ordinazione della cena, i clienti si aspettano un processo di pagamento senza intoppi.

In tutte queste applicazioni, tuttavia, l'inserimento dell'indirizzo per la fatturazione o la spedizione rimane un ostacolo nel flusso di checkout che può essere sia dispendioso in termini di tempo sia complicato. Un'esperienza di pagamento senza intoppi diventa ancora più importante nel mondo mobile, dove l'inserimento di testo complesso su un piccolo schermo può essere frustrante e un'altra barriera per la conversione dei clienti.

Questo documento fornisce indicazioni sull'implementazione per aiutare i clienti a velocizzare il processo di pagamento con l'inserimento dell'indirizzo predittivo.

Il seguente diagramma mostra le API principali coinvolte nell'implementazione del pagamento. Fai clic sul diagramma per ingrandirlo.

Abilitazione delle API in corso…

Per implementare il pagamento, devi abilitare le seguenti API nella console Google Cloud:

• API Maps JavaScript
• API Places
• API Maps Static

Per saperne di più sulla configurazione, consulta la pagina Inizia a utilizzare Google Maps Platform.

Sezioni delle practice

Le sezioni seguenti illustrano suggerimenti e personalizzazioni per migliorare il flusso di checkout.

• L'icona del segno di spunta è una practice principale.
• L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata per migliorare la soluzione.

	Aggiungere il completamento automatico ai campi di input	Compilare automaticamente un modulo per l'indirizzo. Aggiungere la funzionalità di digitazione automatica per migliorare l'esperienza utente su tutte le piattaforme e migliorare la precisione dell'indirizzo con il minimo numero di tasti.
	Fornire una conferma visiva con l'API Maps Static	Trovare le coordinate di latitudine/longitudine per un determinato indirizzo (geocodifica), o convertire le coordinate di latitudine/longitudine di una posizione geografica in un indirizzo (geocodifica inversa).
	Suggerimenti per migliorare ulteriormente il pagamento	Utilizzare le funzionalità avanzate di Place Autocomplete per migliorare ulteriormente l'esperienza di pagamento.

Nota: per monitorare l'adozione degli esempi di codice della soluzione e migliorare la qualità della soluzione, Google include il parametro di query solution_channel nelle chiamate API nel codice di esempio fornito in questa pagina. Per disattivare questa opzione, elimina il parametro di query solution_channel dal codice campione. Per saperne di più, consulta il parametro delle soluzioni di Google Maps Platform.

Aggiungere il completamento automatico ai campi di input

Questo esempio utilizza: libreria Places, API Maps JavaScript

Disponibile anche per: Android | iOS

Place Autocomplete può semplificare l'inserimento dell'indirizzo nella tua applicazione, con conseguente aumento dei tassi di conversione e un' esperienza senza intoppi per i tuoi clienti. Il completamento automatico fornisce un singolo campo di inserimento rapido con la previsione dell'indirizzo "type-ahead" che può essere utilizzato per compilare automaticamente un modulo per l'indirizzo di fatturazione o di spedizione.

Incorporando Place Autocomplete nel carrello degli acquisti online, puoi:

• Ridurre gli errori di inserimento dell'indirizzo.
• Diminuire il numero di passaggi nel processo di pagamento.
• Semplificare l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
• Ridurre significativamente il numero di tasti e il tempo totale necessario a un cliente per effettuare un ordine.

Quando l'utente seleziona la casella di inserimento del completamento automatico e inizia a digitare, viene visualizzato un elenco di previsioni dell'indirizzo:

Quando l'utente seleziona un indirizzo dall'elenco delle previsioni, puoi utilizzare la risposta per verificare l'indirizzo e ottenere la località. La tua applicazione può quindi compilare i campi corretti del modulo di inserimento dell'indirizzo:

Video: migliorare i moduli per gli indirizzi con Place Autocomplete:

Moduli per gli indirizzi

Web

Android

iOS

Iniziare a utilizzare Place Autocomplete

Puoi incorporare Place Autocomplete nel tuo sito con poche righe di JavaScript.

Puoi includere l'API Maps JavaScript nel tuo sito e specificare la libreria Places, anche se non visualizzi una mappa. L'esempio seguente mostra come eseguire questa operazione ed eseguire la funzione di inizializzazione.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

Poi, aggiungi una casella di testo alla pagina per l'input dell'utente:

<input id="autocomplete" placeholder="Enter your address"></input>

Infine, inizializza il servizio Autocomplete e collegalo alla casella di testo denominata:

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

Nell'esempio precedente, l'ascoltatore di eventi place_changed viene attivato quando l'utente seleziona una previsione dell'indirizzo e viene eseguita la funzione fillInAddress. La funzione, come mostrato nell'esempio seguente, prende la risposta selezionata e estrae i componenti dell'indirizzo da visualizzare all'interno di un modulo.

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
index.ts

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;
index.js

Una volta ottenuti questi dati, puoi utilizzarli come indirizzo corrispondente per l'utente. Con poche righe di codice, puoi assicurarti che il cliente inserisca l'indirizzo corretto in breve tempo.

In questo esempio di codice puoi vedere una demo funzionante e il codice sorgente completo per compilare un modulo di inserimento dell'indirizzo.

Considerazioni sull'implementazione di Place Autocomplete

Place Autocomplete offre diverse opzioni che ti consentono di personalizzare l'implementazione se vuoi utilizzare più del semplice widget. Puoi utilizzare una combinazione di servizi per trovare le località con precisione.

• Per un modulo per l'indirizzo, imposta il types parametro su address per limitare le corrispondenze agli indirizzi stradali completi. Scopri di più sui tipi supportati nelle richieste di Place Autocomplete.
• Imposta le restrizioni e le preferenze appropriate se non devi eseguire ricerche in tutto il mondo. Puoi utilizzare diversi parametri per preferire o limitare le corrispondenze a regioni specifiche.
  • Utilizza bounds per impostare i limiti rettangolari da vincolare per un'area. Utilizza strictBounds per assicurarti che vengano restituiti solo gli indirizzi in queste aree.
  • Utilizza componentRestrictions per limitare le risposte a un determinato insieme di paesi.
• Lascia i campi modificabili nel caso in cui alcuni campi non vengano trovati nella corrispondenza e consenti ai clienti di aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituiti da Place Autocomplete non contiene numeri di sottolocalità come numeri di appartamenti, suite o unità, questo esempio sposta l'attenzione sulla riga dell'indirizzo 2 per incoraggiare l'utente a compilare queste informazioni, se necessario.

Fornire una conferma visiva con l'API Maps Static

Dopo che il cliente ha inserito l'indirizzo, fornisci una conferma visiva di la località di consegna o ritiro con una mappa statica. In questo modo, il cliente ha la certezza che l'indirizzo sia corretto e si riducono le consegne o i ritiri non riusciti. Puoi visualizzare la mappa statica nella pagina di inserimento dell'indirizzo o includerla nell'email di conferma al termine della transazione.

Puoi implementare entrambi questi casi d'uso con l' API Maps Static, che aggiunge una versione immagine della mappa a qualsiasi tag immagine all'interno di una pagina o di un'email.

Iniziare a utilizzare l'API Maps Static

Puoi utilizzare l'API Maps Static tramite una chiamata al servizio web, che crea una versione immagine di una mappa in base ai parametri specificati. Come la mappa dinamica, puoi specificare il tipo di mappa, utilizzare gli stessi stili basati su cloud e aggiungere indicatori per distinguere la località.

La seguente chiamata mostra una mappa stradale, con dimensioni di 600 x 300 px, centrata sul Googleplex di Mountain View, California, al livello di zoom 13. Specifica anche un indicatore blu della località di consegna marker e uno stile di mappa online.

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a
      

In particolare, sono previste le seguenti sezioni:

URL dell'API	https://maps.googleapis.com/maps/api/staticmap?
Centro della mappa	center=37.422177,-122.084082
Livello di zoom	zoom=13
Dimensioni dell'immagine	size=600x300
Tipo di mappa	maptype=roadmap
Indicatori della località del negozio	markers=color:blue%7Clabel:C%7C37.422177,-122.084082
Stile di mappa cloud	map_id=8f348d1b5a61d4bb
Chiave API	key=YOUR_API_KEY
Parametro del canale della soluzione. Per saperne di più, consulta la documentazione dei parametri.	solution_channel=GMP_guides_checkout_v1_a

La richiesta restituisce la seguente immagine:

Per saperne di più sulle opzioni dell'API Maps Static, consulta la documentazione.

Suggerimenti per migliorare ulteriormente il pagamento

Puoi migliorare ulteriormente l'esperienza cliente sfruttando alcune delle funzionalità avanzate offerte da Place Autocomplete. Ecco alcuni suggerimenti per migliorare la casella di inserimento dell'indirizzo di completamento automatico:

• Consenti agli utenti di inserire un indirizzo in base al nome di un'attività commerciale o di un punto di interesse. Il servizio di previsione "type-ahead" non funziona solo per gli indirizzi, ma puoi anche scegliere di consentire l'inserimento dei nomi di attività commerciali o punti di riferimento. Dopo che un utente ha inserito il nome di un'attività commerciale, puoi recuperare l'indirizzo con una chiamata a Place Details. Per consentire l'inserimento sia degli indirizzi sia dei nomi delle strutture, rimuovi la types proprietà dalla definizione di Autocomplete.
• Personalizza l'aspetto della casella Place Autocomplete in modo che corrisponda al tuo sito web. Puoi anche applicare uno stile al widget di completamento automatico in modo che corrisponda all'aspetto del carrello degli acquisti. Puoi utilizzare le classi CSS per personalizzare l'aspetto del widget. Per saperne di più, consulta la pagina Applicare uno stile al completamento automatico.
• Crea un'interfaccia utente personalizzata. Se vuoi creare un'interfaccia utente personalizzata anziché utilizzare quella progettata da Google, chiama il servizio Place Autocomplete in modo programmatico per recuperare le previsioni per un determinato input. Puoi recuperare le previsioni di Place Autocomplete in modo programmatico in JavaScript, Android, e iOS nonché chiamare direttamente l'API dei servizi web tramite Places API.