Przewodnik po implementacji Google Checkout

Opis

web iOS Interfejs API

Google Maps Platform jest dostępne w wersji internetowej (JS, TS) oraz na urządzeniach z Androidem i iOS. Udostępnia też interfejsy API usług internetowych do uzyskiwania informacji o miejscach, wskazówkach dojazdu i odległościach. Przykłady w tym przewodniku zostały utworzone dla jednej platformy, ale podajemy linki do dokumentacji, aby dowiedzieć się, jak wdrożyć tę funkcję na innych platformach.

Zrób to teraz

Szybki konstruktor w Google Cloud Console umożliwia utworzenie autouzupełniania formularzy adresowych za pomocą interaktywnego interfejsu, który generuje dla Ciebie kod JavaScript.

Składanie zamówień i zakupy online stały się nieodłączną częścią naszego życia. Od dostawy tego samego dnia po zarezerwowanie taksówki czy zamawianie obiadu – klienci oczekują płynnego procesu płatności.

Jednak w każdej z tych aplikacji podanie adresu na potrzeby płatności lub dostawy pozostaje jednym z problemów w procesie płatności, które może być zarówno czasochłonne, jak i niewygodne. Wygodne dokonywanie płatności staje się jeszcze ważniejsze w świecie mobilnym, gdzie wprowadzanie skomplikowanych tekstów na małym ekranie może być frustrujące i stanowić kolejną przeszkodę w realizacji konwersji.

W tej części znajdziesz wskazówki dotyczące wdrażania, które pomogą Twoim klientom przyspieszyć proces płatności dzięki przewidywaniu adresu.

Poniższy diagram przedstawia podstawowe interfejsy API używane podczas wdrażania usługi Google Checkout (kliknij, aby powiększyć).

Włączam interfejsy API

Aby wdrożyć Google Checkout, musisz włączyć te interfejsy API w konsoli Google Cloud:

Więcej informacji na temat konfiguracji znajdziesz w artykule Pierwsze kroki z Google Maps Platform.

Sekcje Ćwiczenia

Poniżej zamieszczamy wskazówki i sposoby dostosowywania, które omówimy w tym temacie.

  • Ikony potwierdzenia to jedna z podstawowych metod.
  • Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie w celu ulepszenia rozwiązania.
Dodawanie autouzupełniania pól do wprowadzania danych Autouzupełnianie formularza adresowego. Dodaj funkcję pisania na bieżąco, aby zwiększyć wygodę użytkowników na wszystkich platformach i poprawić dokładność adresów przy minimalnej liczbie naciśnięć klawiszy.
Dostarczanie wizualnego potwierdzenia za pomocą interfejsu Maps Static API Możesz znaleźć współrzędne szerokości i długości geograficznej danego adresu (geokodowanie) lub przekonwertować szerokość i długość geograficzną lokalizacji geograficznej na adres (odwrotne geokodowanie).
Wskazówki dotyczące ulepszania Google Checkout Aby proces płatności był jeszcze lepszy, korzystaj z zaawansowanych funkcji autouzupełniania miejsc.

Dodawanie autouzupełniania pól do wprowadzania danych

W tym przykładzie użyto: Biblioteki miejsc, interfejsu Maps JavaScript API Dostępne też: Android | iOS

Autouzupełnianie miejsc może uprościć wpisywanie adresów w aplikacji, co może zwiększyć współczynnik konwersji i poprawić wygodę klientów. Autouzupełnianie udostępnia pojedyncze pole umożliwiające szybkie wpisywanie adresu z prognozą „wpisz z wyprzedzeniem”, które może służyć do automatycznego wypełniania formularza adresu rozliczeniowego lub adresu dostawy.

Dzięki włączeniu autouzupełniania miejsc w koszyku na zakupy online możesz:

  • Zmniejsz liczbę błędów podczas wpisywania adresu.
  • Zmniejsz liczbę kroków w procesie płatności.
  • Uprość wpisywanie adresu na urządzeniach mobilnych i urządzeniach do noszenia.
  • Znacząco zmniejsza liczbę naciśnięć klawiszy i zmniejsza całkowity czas potrzebny klientowi na złożenie zamówienia.

Gdy użytkownik wybierze pole wpisywania autouzupełniania i zacznie pisać, pojawi się lista podpowiedzi adresów:

Gdy użytkownik wybierze adres z listy prognoz, możesz użyć tej odpowiedzi do zweryfikowania adresu i uzyskania lokalizacji. Dzięki temu Twoja aplikacja może wypełnić właściwe pola w formularzu podawania adresu:

Filmy: Ulepszanie formularzy adresowych za pomocą autouzupełniania miejsc:

Formularze adresowe

Sieć

Android

iOS

Pierwsze kroki z autouzupełnianiem miejsc

Aby umieścić w witrynie funkcję Place Autcomplete, wystarczy kilka wierszy kodu JavaScript.

Najprostszym sposobem jest umieszczenie w witrynie interfejsu Maps JavaScript API (nawet jeśli nie wyświetlasz mapy) i określenie biblioteki Miejsca w sposób pokazany poniżej, który również wykonuje funkcję inicjowania.

<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>

Następnie dodaj do strony pole tekstowe do wprowadzania danych przez użytkownika:

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

Na koniec zainicjuj usługę autouzupełniania i połącz ją z nazwanym polem tekstowym:

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);
}

W poprzednim przykładzie detektor zdarzeń place_changed jest aktywowany, gdy użytkownik wybierze prognozę adresu, a wykonywana jest funkcja fillInAddress. Funkcja, jak pokazano w poniższym przykładzie, pobiera wybraną odpowiedź i wyodrębnia komponenty adresu w celu zwizualizowania ich w formularzu.

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();
}

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;

Gdy już uzyskasz te dane, możesz ich użyć jako adresu dopasowanego użytkownika. Wystarczy kilka linijek kodu, by mieć pewność, że klient wpisze właściwy adres w krótkim czasie.

W tym przykładowym kodzie znajdziesz działającą demonstrację i pełny kod źródłowy wypełniania formularza podawania adresu.

Uwagi na temat wdrażania autouzupełniania miejsc

Autouzupełnianie miejsc ma kilka opcji, które pozwalają mu dostosować się do jego implementacji, jeśli chcesz używać czegoś więcej niż tylko widżetu. Możesz używać kombinacji usług, aby uzyskać dokładnie to, czego potrzebujesz, aby poprawnie dopasować lokalizację.

  • W przypadku formularza adresu ustaw parametr types na address, aby ograniczyć dopasowania do pełnych adresów. Dowiedz się więcej o typach obsługiwanych w żądaniach autouzupełniania miejsc.
  • Ustaw odpowiednie ograniczenia i uprzedzenia, jeśli nie chcesz szukać na całym świecie. Istnieje wiele parametrów, które mogą służyć do promowania odchylenia lub ograniczenia dopasowania tylko do określonych regionów.
    • Za pomocą funkcji bounds ustaw prostokątne granice na potrzeby ograniczenia dla danego obszaru. Użyj operatora strictBounds, aby mieć pewność, że zwracane są tylko adresy z tych obszarów.
    • Użyj opcji componentRestrictions, aby ograniczyć odpowiedzi do wybranych krajów.
  • Pozostaw pola możliwe do edytowania, jeśli w dopasowaniu brakuje niektórych pól, i zezwól klientom na aktualizowanie adresu w razie potrzeby. Ponieważ większość adresów zwracanych przez funkcję autouzupełniania nie zawiera numerów podrzędnych, takich jak numery mieszkań, lokali czy lokali, w tym przykładzie przenosimy zaznaczenie do wiersza adresu 2, aby zachęcić użytkownika do wpisania tych informacji, jeśli to konieczne.

Zapewnianie wizualnego potwierdzenia za pomocą interfejsu Maps Static API

Po podaniu adresu prześlij użytkownikowi wizualne potwierdzenie miejsca dostawy lub odbioru za pomocą prostej, statycznej mapy. Dzięki temu klient będzie miał dodatkową pewność, że adres jest prawidłowy, co pozwoli ograniczyć liczbę nieudanych przesyłek/odbioru. Mapę statyczną można wyświetlić na stronie, na której użytkownik wpisuje adres, a nawet wysłać ją w e-mailu z potwierdzeniem po zakończeniu transakcji.

Oba te przypadki użycia można zrealizować za pomocą interfejsu Map Static API, który dodaje wersję graficzną mapy do dowolnego tagu graficznego na stronie lub w e-mailu.

Pierwsze kroki z interfejsem Maps Static API

Możesz użyć interfejsu Maps Static API za pomocą wywołania usługi internetowej, które spowoduje utworzenie wersji mapy z użyciem określonych przez Ciebie parametrów. Podobnie jak w przypadku mapy dynamicznej, możesz określić typ mapy, użyć tych samych stylów w chmurze i dodać znaczniki do rozróżniania lokalizacji.

Poniższe wywołanie przedstawia plan o wymiarach 600 x 300 pikseli wyśrodkowany na Googlepleksie w Mountain View w Kalifornii przy powiększeniu 13. Określa też niebieski znacznik lokalizacji dostawy oraz styl mapy 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
      

Tabela dzieli się na te sekcje:

URL interfejsu API https://maps.googleapis.com/maps/api/staticmap?
centrum map center=37.422177,-122.084082
poziom powiększenia powiększenie=13
rozmiar obrazu rozmiar=600 x 300
typ mapy maptype=roadmap
znaczniki lokalizacji sklepu markers=color:blue%7Clabel:C%7C37.422177,-122.084082
styl mapy w chmurze map_id=8f348d1b5a61d4bb
Klucz interfejsu API key=YOUR_API_KEY
Parametr kanału rozwiązania (zobacz dokumentację parametrów) solution_channel=GMP_guides_checkout_v1_a

Spowoduje to zmianę tego obrazu na taki:

Więcej informacji o opcjach interfejsu Maps Static API znajdziesz w dokumentacji.

Wskazówki dotyczące dalszego ulepszania usługi Google Checkout

W jeszcze większym stopniu możesz poprawić wrażenia klientów, korzystając z zaawansowanych funkcji oferowanych przez autouzupełnianie miejsc. Oto kilka wskazówek, jak ulepszyć pole wpisywania adresu autouzupełniania:

  • Zezwalaj użytkownikom na wpisywanie adresu opartego na nazwie firmy lub ciekawego miejsca. Usługa przewidywania „Wpisz z wyprzedzeniem” działa nie tylko w przypadku adresów, ale możesz też zezwolić na podawanie nazw firm lub punktów orientacyjnych. Po wpisaniu przez użytkownika nazwy firmy można łatwo uzyskać adres, wywołując funkcję Place Details (Szczegóły miejsca). Aby umożliwić wpisywanie zarówno adresów, jak i nazw firm, usuń z definicji autouzupełniania właściwość types.
  • Dostosuj wygląd i styl pola autouzupełniania miejsca, aby dopasować je do stylu swojej witryny. Możesz też dostosować styl widżetu autouzupełniania do wyglądu i stylu Twojego koszyka na zakupy. Możesz dostosować zestaw klas CSS. Więcej informacji o dostosowywaniu stylu pola autouzupełniania znajdziesz w dokumentacji.
  • Jeśli chcesz utworzyć własny interfejs. Tworząc niestandardowy interfejs zamiast korzystać z interfejsu zaprojektowanego przez Google, wywołuj usługę autouzupełniania miejsc automatycznie, aby pobrać prognozy dla danego wejściowego. Podpowiedzi autouzupełniania możesz pobierać automatycznie w języku JavaScript, Androidzie i iOS, a także wywoływać interfejs API usług internetowych bezpośrednio przez Places API.