Guida all'implementazione di Google Checkout

Panoramica

Lo shopping e gli ordini online sono diventati una parte onnipresente delle nostre vite. Dello stesso giorno di servizi di consegna a domicilio, a prenotare un taxi o ordinare una cena, i clienti si aspettano procedura di pagamento fluida.

In tutte queste applicazioni, tuttavia, l'inserimento di indirizzi per la fatturazione o la spedizione rimangono un ostacolo nel flusso di pagamento, che può essere complesso e complesso. Un'esperienza di pagamento fluida diventa ancora più importante nel mondo dei dispositivi mobili, per cui l'inserimento di testo complesso su uno schermo piccolo può essere frustrante un'altra barriera alla conversione dei clienti.

Questo argomento fornisce indicazioni sull'implementazione per aiutare i clienti a velocizzare il loro procedura di pagamento con inserimento dell'indirizzo predittivo.

Il seguente diagramma mostra le API principali coinvolte nell'implementazione di Google Checkout (fai clic per ingrandire).

Abilitazione delle API in corso…

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

• API Maps JavaScript
• API Places
• API Maps Static

Per ulteriori informazioni sulla configurazione, vedi Guida introduttiva all'utilizzo di Google Maps Platform.

Sezioni degli allenamenti

Di seguito sono riportati i suggerimenti e le personalizzazioni che tratteremo in questo argomento.

• check_circle_filled L'icona del segno di spunta è una pratica di base.
• stars L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata per migliorare la soluzione.

Completamento automatico dei luoghi semplifica l'inserimento degli indirizzi nella tua app, generando tassi di conversione più elevati e senza interruzioni per i tuoi clienti. Il completamento automatico fornisce un unico campo di immissione rapido con "type-ahead" di fatturazione, che può essere utilizzata per compilare automaticamente modulo per l'indirizzo di spedizione.

Incorporando Place Autocomplete nel tuo carrello degli acquisti online, puoi:

• Riduci gli errori di inserimento degli indirizzi.
• Riduci il numero di passaggi nella procedura di pagamento.
• Semplifica l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
• Ridurre significativamente le sequenze di tasti e il tempo totale necessario al cliente per ordine.

Quando l'utente seleziona la casella di immissione Completamento automatico e inizia a digitare, viene visualizzato un elenco vengono visualizzate le previsioni:

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

Introduzione a Place Autocomplete

Sono necessarie solo un paio di righe di codice JavaScript per incorporare Place Autcomplete in nel tuo sito.

Il modo più semplice è includere l'API Maps JavaScript (anche se (non visualizzare una mappa) sul tuo sito e specifica la libreria Places come mostrato nell'esempio seguente, che esegue anche 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>

Successivamente, 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, il listener 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.

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

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

Quando disponi di questi dati, puoi utilizzarli come indirizzo corrispondente per l'utente. Da alcuni righe di codice, puoi assicurarti che il cliente inserisca l'indirizzo corretto in poco tempo nel tempo.

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

Considerazioni per l'implementazione del completamento automatico del luogo

Place Autocomplete offre una serie di opzioni che gli consentono di essere flessibile con se vuoi usare altri prodotti oltre al widget. Puoi utilizzare una combinazione per ottenere esattamente ciò di cui hai bisogno per associare una sede nel modo corretto.

• Per un modulo per l'indirizzo, imposta il parametro types su address in limita le corrispondenze agli indirizzi completi. Scopri di più su tipi supportati nelle richieste di completamento automatico del luogo.
• Imposta le limitazioni appropriate e pregiudizi se non hai bisogno di effettuare ricerche a livello mondiale. Esistono numerosi parametri che possono può essere utilizzata solo per differenziare o limitare qualsiasi corrispondenza a regioni specifiche.
  • Usa bounds per impostare i limiti rettangolari da applicare a un'area, usa strictBounds per assicurarti che vengano restituiti solo gli indirizzi in quelle 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 per aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituiti da Place Autocomplete non contengono numeri di locali secondari, come numeri di appartamenti, interni o unità, questi esempio sposta lo stato attivo sulla Riga indirizzo 2 per incoraggiare l'utente a compilare le informazioni necessarie.

Dopo l'inserimento dell'indirizzo, fornisci all'utente una conferma visiva del luogo di consegna o ritiro con una semplice mappa statica. Questo approccio offre al cliente un'ulteriore garanzia che che l'indirizzo sia corretto e ridurrà gli errori di consegna/ritiro. La mappa statica può essere visualizzata sulla pagina in cui inseriscono l'indirizzo o persino inviato nell'email di conferma quando hanno completato la transazione.

Entrambi questi casi d'uso possono essere realizzati API Maps Static, che aggiunge una versione immagine della mappa a qualsiasi tag immagine all'interno di una pagina o di un'email.

Introduzione all'API Maps Static

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

La chiamata che segue mostra una roadmap, di dimensioni di 600 x 300 px, incentrata sul Googleplex a Mountain View, CA a livello di zoom 13. Indica anche una località di consegna blu un indicatore 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
      

Questa sezione è suddivisa nelle seguenti sezioni:

Questa diventa l'immagine come mostrato di seguito:

Per ulteriori informazioni sulle opzioni dell'API Maps Static, consulta documentazione.

Puoi migliorare ulteriormente la customer experience sfruttando alcune delle funzionalità avanzate funzioni che Place Autocomplete ha da offrire. Di seguito sono riportati alcuni suggerimenti per migliorare Casella di immissione dell'indirizzo con completamento automatico:

• stars Consenti agli utenti di inserire un indirizzo in base al nome dell'attività commerciale o di un punto d'interesse. L'opzione "digita in anticipo" di previsione non solo funziona per gli indirizzi, ma puoi anche consentire l'inserimento di nomi di attività o punti di riferimento. Dopo che un utente inserisce il nome di un'attività, è facile recuperare l'indirizzo con una chiamata Place Details (Dettagli sul luogo). Per consentire l'inserimento sia di indirizzi sia di nomi di attività, rimuovi types dalla definizione di Completamento automatico.
• stars Personalizza l'aspetto della casella di Place Autocomplete in modo che corrisponda lo stile del tuo sito web. Puoi anche definire lo stile del widget di completamento automatico in modo che si adatti all'aspetto del tuo carrello degli acquisti. È disponibile un insieme di classi CSS che puoi personalizzare. Per ulteriori informazioni su come personalizza la casella di completamento automatico lettura la documentazione.
• stars Se vuoi creare una UI personalizzata. Per creare una UI personalizzata invece di utilizzare quella progettata da Google, chiama il metodo Posiziona il servizio Autocomplete in modo programmatico per recuperare le previsioni per un determinato input. Puoi recuperare le previsioni di Place Autocomplete in modo programmatico JavaScript, Android e iOS oltre a chiamare l'API dei servizi web direttamente tramite API Places.