Przewodnik po implementacji Google Checkout

Przegląd

Internet iOS Interfejs API

Google Maps Platform jest dostępna w wersji internetowej (JS, TS), na Androida i iOS, a także udostępnia interfejsy API usług internetowych do uzyskiwania informacji o miejscach, wskazówek dojazdu i odległości. Przykłady w tym przewodniku są napisane dla jednej platformy, ale podajemy linki do dokumentacji dotyczącej implementacji na innych platformach.

Utwórz go teraz!

Szybki kreator w konsoli Google Cloud umożliwia tworzenie funkcji autouzupełniania formularzy adresowych za pomocą interaktywnego interfejsu, który generuje kod JavaScript.

Zakupy i zamówienia online stały się powszechną częścią naszego życia. Od usług dostawy tego samego dnia po rezerwację taksówki lub zamówienie kolacji – klienci oczekują płynnego procesu płatności.

We wszystkich tych zastosowaniach wpisywanie adresu do rozliczeń lub dostawy jest jednak przeszkodą w procesie płatności, która może być czasochłonna i uciążliwa. Bezproblemowy proces płatności staje się jeszcze ważniejszy w świecie mobilnym, gdzie złożone wpisywanie tekstu na małym ekranie może być frustrujące i stanowić kolejną barierę dla konwersji klientów.

Ten dokument zawiera wskazówki dotyczące wdrożenia, które pomogą klientom szybciej przejść do kasy za pomocą podpowiedzi przy wpisywaniu adresu.

Ten diagram przedstawia główne interfejsy API, które są używane do implementacji płatności. Kliknij diagram, aby go powiększyć.

Włączam interfejsy API

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

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

Sekcje dotyczące praktyk

W kolejnych sekcjach znajdziesz wskazówki i możliwości dostosowania, które pomogą Ci ulepszyć proces płatności.

  • Ikona wyboru jest podstawowym elementem.
  • Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, które zwiększa skuteczność rozwiązania.
Dodawanie autouzupełniania do pól wejściowych automatycznie wypełniać formularz adresu; Dodaj funkcję wpisywania w trakcie pisania, aby zwiększyć komfort użytkowników na wszystkich platformach i poprawić dokładność adresów przy minimalnej liczbie naciśnięć klawiszy.
Potwierdzanie wizualne za pomocą interfejsu Maps Static API znajdować współrzędne geograficzne dla danego adresu (geokodowanie) lub przekształcać współrzędne geograficzne lokalizacji na adres (odwrotne geokodowanie);
Wskazówki dotyczące dalszego ulepszania procesu płatności Skorzystaj z funkcji zaawansowanych autouzupełniania miejsc, aby jeszcze bardziej ułatwić proces płatności.

Dodawanie autouzupełniania do pól wejściowych

Ten przykład korzysta z: Biblioteka miejsc, Maps JavaScript API Dostępne też na: Android | iOS

Autouzupełnianie miejsca może uprościć wpisywanie adresu w aplikacji, co prowadzi do wyższych współczynników konwersji i zapewnia klientom bezproblemową obsługę. Autouzupełnianie udostępnia jedno szybkie pole wprowadzania danych z funkcją przewidywania adresu podczas pisania, która może być używana do automatycznego wypełniania formularza adresu rozliczeniowego lub adresu dostawy.

Dzięki zintegrowaniu autouzupełniania miejsc z koszykiem na zakupy w sklepie internetowym możesz:

  • zmniejszyć liczbę błędów przy wprowadzaniu adresu;
  • Zmniejsz liczbę kroków w procesie płatności.
  • Uprość wpisywanie adresu na urządzeniach mobilnych i ubieralnych.
  • Znacznie zmniejsza liczbę naciśnięć klawiszy i łączny czas potrzebny klientowi na złożenie zamówienia.

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

Gdy użytkownik wybierze adres z listy prognoz, możesz użyć odpowiedzi, aby zweryfikować adres i uzyskać lokalizację. Aplikacja może wtedy wypełnić odpowiednie pola formularza wpisywania adresu:

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

Formularze adresowe

Sieć

Android

iOS

Pierwsze kroki z Autouzupełnianiem miejsc

Możesz zintegrować autouzupełnianie miejsc ze swoją witryną za pomocą kilku wierszy kodu JavaScript.

Możesz umieścić interfejs Maps JavaScript API w swojej witrynie i określić bibliotekę Places, nawet jeśli nie wyświetlasz mapy. Poniższy przykład pokazuje, jak to zrobić i wykonać 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, w którym użytkownik będzie mógł wpisać tekst: 

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

Na koniec zainicjuj usługę Autocomplete i połącz ją z polem tekstowym o podanej nazwie: 

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 wywoływany, gdy użytkownik wybierze prognozę adresu, a funkcja fillInAddress zostanie wykonana. Funkcja, jak pokazano w poniższym przykładzie, pobiera wybraną odpowiedź i wyodrębnia z niej komponenty adresu, aby wyświetlić je 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 uzyskasz te dane, możesz użyć ich jako dopasowanego adresu użytkownika. Za pomocą kilku linijek kodu możesz mieć pewność, że klient w krótkim czasie wpisze prawidłowy adres.

W tym przykładzie kodu znajdziesz działającą wersję demonstracyjną i pełny kod źródłowy wypełniania formularza wprowadzania adresu.

Uwagi dotyczące wdrażania Autouzupełniania miejsc

Usługa Autouzupełnianie miejsc oferuje kilka opcji, które umożliwiają dostosowanie implementacji, jeśli chcesz używać czegoś więcej niż tylko widżetu. Możesz użyć kombinacji usług, aby dokładnie dopasować lokalizacje.

  • 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 odchylenia, jeśli nie musisz wyszukiwać informacji na całym świecie. Możesz użyć kilku parametrów, aby faworyzować lub ograniczać dopasowania do określonych regionów.
    • Użyj bounds, aby ustawić prostokątne granice obszaru. Użyj symbolu strictBounds, aby mieć pewność, że zwracane są tylko adresy z tych obszarów.
    • Użyj znaku componentRestrictions, aby ograniczyć odpowiedzi do określonego zestawu krajów.
  • Pozostaw pola edytowalne, jeśli w dopasowaniu brakuje niektórych pól, i umożliw klientom aktualizowanie adresu w razie potrzeby. Większość adresów zwracanych przez autouzupełnianie miejsc nie zawiera numerów lokali, takich jak numery mieszkań, apartamentów czy lokali użytkowych, dlatego w tym przykładzie fokus jest przenoszony na wiersz adresu 2, aby zachęcić użytkownika do podania tych informacji, jeśli to konieczne.

Udostępnianie wizualnego potwierdzenia za pomocą interfejsu Maps Static API

Gdy klient wpisze adres, wyświetl wizualne potwierdzenie miejsca dostawy lub odbioru w postaci statycznej mapy. Daje to klientowi dodatkową pewność, że adres jest prawidłowy, i zmniejsza liczbę nieudanych dostaw lub odbiorów. Możesz wyświetlać mapę statyczną na stronie wpisywania adresu lub umieszczać ją w e-mailu z potwierdzeniem po zakończeniu transakcji.

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

Wprowadzenie do interfejsu Maps Static API

Możesz używać interfejsu Maps Static API, wywołując usługę sieciową, która tworzy wersję graficzną mapy na podstawie określonych przez Ciebie parametrów. Podobnie jak w przypadku mapy dynamicznej możesz określić typ mapy, używać tych samych stylów opartych na chmurze i dodawać znaczniki, aby wyróżnić lokalizację.

Poniższe wywołanie pokazuje mapę drogową o rozmiarze 600 × 300 pikseli, wyśrodkowaną na Googleplex w Mountain View w Kalifornii przy poziomie powiększenia 13. Określa też niebieski znacznik lokalizacji dostawy i 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

Dzielą się one na te sekcje:

Adres URL interfejsu API https://maps.googleapis.com/maps/api/staticmap?
środek mapy center=37.422177,-122.084082
poziom powiększenia zoom=13
rozmiar obrazu size=600x300
rodzaj 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 Więcej informacji znajdziesz w dokumentacji parametrów. solution_channel=GMP_guides_checkout_v1_a

Żądanie zwraca ten obraz:

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

Wskazówki dotyczące dalszego ulepszania procesu płatności

Możesz jeszcze bardziej poprawić wrażenia klientów, korzystając z niektórych zaawansowanych funkcji autouzupełniania miejsc. Oto kilka wskazówek, które pomogą Ci ulepszyć pole wpisywania adresu z autouzupełnianiem:

  • Umożliwia użytkownikom wpisywanie adresu na podstawie nazwy firmy lub punktu orientacyjnego. Usługa prognozowania „type ahead” działa nie tylko w przypadku adresów, ale możesz też zezwolić na wpisywanie nazw firm lub punktów orientacyjnych. Gdy użytkownik wpisze nazwę firmy, możesz pobrać adres, wywołując funkcję informacje o miejscu. Aby umożliwić wpisywanie zarówno adresów, jak i nazw firm, usuń właściwość types z definicji autouzupełniania.
  • Dostosuj wygląd i styl pola Autouzupełnianie miejsc do stylu swojej witryny. Możesz też dostosować styl widżetu autouzupełniania, aby pasował do wyglądu koszyka na zakupy. Możesz użyć klas CSS, aby dostosować wygląd widżetu. Więcej informacji znajdziesz w artykule Styl autouzupełniania.
  • Tworzenie niestandardowego interfejsu Jeśli chcesz utworzyć niestandardowy interfejs zamiast korzystać z interfejsu zaprojektowanego przez Google, wywołaj programowo usługę autouzupełniania miejsc, aby pobrać prognozy dla danego wejścia. Prognozy Autouzupełniania miejsc możesz pobierać programowo w  JavaScript, Android i iOS, a także wywołując bezpośrednio interfejs API usług internetowych za pomocą Places API.