Przewodnik po implementacji Google Checkout

Omówienie

sieć iOS Interfejs API

Google Maps Platform można używać w przeglądarkach (JS, TS), na Androidzie i iOS, a także interfejsy API usług internetowych, które pozwalają uzyskać informacje o miejscach, i odległości. Przykłady w tym przewodniku dotyczą jednej platformy, podane są linki do dokumentacji na potrzeby implementacji na innych platformach.

Utwórz go teraz

Szybki konstruktor w Konsola Google Cloud umożliwia utworzenie autouzupełniania formularza adresu za pomocą interaktywny interfejs, który generuje kod JavaScript.

Zakupy i zamawianie online stały się nieodzowną częścią naszego życia. Z tego samego dnia np. zamawianie taksówki czy zamówienia kolacji, bezproblemowego procesu płatności.

We wszystkich tych aplikacjach jednak wpisywanie adresu dla argumentu ale jednym przeszkodą w procesie płatności są zarówno płatności, jak i dostawa, pracochłonne i niewygodne. Bezproblemowa obsługa płatności staje się jeszcze ważniejsza w świecie urządzeń mobilnych, gdzie złożone wpisywanie tekstu na małym ekranie może być frustrujące, kolejną barierę w konwersjach dokonywanych przez klientów.

W tym temacie znajdziesz wskazówki dotyczące implementacji, które pomagają klientom szybciej procesu płatności z przewidywanym wpisywaniem adresu.

Poniższy diagram przedstawia podstawowe interfejsy API związane z implementacją Google Checkout (kliknij, aby powiększyć).

Włączam interfejsy API

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

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

Sekcje z ćwiczeniami

Poniżej podajemy wskazówki i możliwości dostosowywania, które omówimy w tym temacie.

  • Podstawowym elementem jest ikona znacznika wyboru.
  • Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, ulepszać rozwiązanie.
Dodawanie autouzupełniania do pól do wprowadzania danych Autouzupełnianie formularza adresu Dodaj funkcję pisania w miarę postępów, aby zwiększyć wygodę użytkowników na wszystkich platformach i poprawić dokładność adresów przy użyciu minimalnej liczby naciśnięć klawiszy.
Przesyłanie wizualne potwierdzenia za pomocą statycznego interfejsu API Map Google znaleźć szerokość i długość geograficzną danego adresu (geokodowanie); lub konwertować współrzędne geograficzne lokalizacji geograficznej na adres (odwrotne geokodowanie).
Wskazówki dotyczące dalszego ulepszania usługi Google Checkout Korzystaj z zaawansowanych funkcji autouzupełniania miejsc, aby ułatwić proces płatności jeszcze lepiej.

Dodawanie autouzupełniania do pól do wprowadzania danych

W tym przykładzie wykorzystano: Biblioteka miejsc, Maps JavaScript API Dostępne też: Android | iOS

Autouzupełnianie miejsc może uprościć wprowadzanie adresu w aplikacji, co prowadzi do zwiększenia współczynników konwersji i i zapewnianie klientom płynnej obsługi. Autouzupełnianie zapewnia pojedyncze pole szybkiego wprowadzania z opcją „wpisz z wyprzedzeniem” przewidywanie adresu, którego można używać do automatycznego wypełniania adresu dostawy.

Dzięki włączeniu autouzupełniania miejsc do koszyka 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.
  • Znacznie ogranicz liczbę naciśnięć klawiszy i skróć czas potrzebny klientowi na umieszczenie zamówienie.

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

Gdy użytkownik wybierze adres z listy podpowiedzi, możesz użyć odpowiedzi zweryfikować adres i ustalić lokalizację. W aplikacji można wypełnić prawidłowe pola. formularza podawania adresu:

Filmy: ulepszenie formularzy adresowych dzięki autouzupełnianiu miejsc:

Formularze adresowe

Przeglądarka

Android

iOS

Pierwsze kroki z autouzupełnianiem miejsc

Aby umieścić autouzupełnianie w witrynie, wystarczy kilka wierszy kodu JavaScriptu w Twojej witrynie.

Najłatwiej jest dołączyć Maps JavaScript API (nawet jeśli niewyświetlanie mapy) w swojej witrynie i określ bibliotekę Miejsca, tak jak w z następującego przykładu, 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żytkowników: 

<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 wybiera przewidywanie adresu, a elementy Funkcja fillInAddress jest wykonywana. Funkcja, jak pokazano w przykładzie poniżej, pobiera wybraną odpowiedź i wyodrębnia komponenty adresu do zwizualizowania 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();
}
index.ts

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

Po uzyskaniu tych danych możesz używać ich jako adresu dopasowanego do użytkownika. Od kilku kilka wierszy kodu, zadbaj o to, aby klient wpisał właściwy adres obecnie się znajdujesz.

Zobacz działającą demonstrację i pełny kod źródłowy wypełniania formularza wpisywania adresu w tym kod przykład.

O czym warto pamiętać przy wdrażaniu autouzupełniania miejsc

Autouzupełnianie oferuje szereg opcji, które pozwalają elastycznie jeśli chcesz używać nie tylko widżetu. Możesz użyć kombinacji tych atrybutów , aby we właściwy sposób dostarczać dokładnie to, czego potrzebujesz, aby dopasować lokalizację.

  • W przypadku formularza adresowego ustaw parametr types na address na ogranicz dopasowania do pełnych adresów. Więcej informacji o obsługiwanych typów w żądaniach autouzupełniania miejsc.
  • Ustaw odpowiednie ograniczenia. oraz stronniczości, jeśli nie trzeba szukać na całym świecie. Istnieje wiele parametrów, które pozwalają mogą być wykorzystywane do stronniczości lub ograniczania dopasowania tylko do określonych regionów.
    • Użyj właściwości bounds, aby ustawić prostokątne granice obszaru, które chcesz ograniczyć. Użyj funkcji strictBounds, aby mieć pewność, że zwracane są tylko adresy z tych obszarów.
    • Użyj funkcji componentRestrictions, aby ograniczyć odpowiedzi do określonego zbioru krajów.
  • Pozostaw pola z możliwością edycji, jeśli w dopasowaniu brakuje niektórych pól, i zezwól klientom na dostęp i w razie potrzeby zaktualizować adres. Ponieważ większość adresów zwracanych przez funkcję autouzupełniania miejsc nie zawierają numerów obiektów podrzędnych, takich jak numer mieszkania, lokalu lub lokalu, przenosi zaznaczenie na wiersz adresu 2, aby zachęcić użytkownika do w razie potrzeby informacje.

Przesyłanie wizualnego potwierdzenia za pomocą interfejsu static API Map Google

Po podaniu adresu przekaż użytkownikowi wizualne potwierdzenie lokalizacji dostawy lub odbioru na prostej, statycznej mapie. Dzięki temu klient zaoferuje zapewniamy, że jest poprawny, co zmniejszy liczbę niepowodzeń związanych z dostawą/odbiorem. Mapę statyczną można wyświetlić na stronie, na której użytkownik wpisuje adres, a nawet przesyłana w e-mailu z potwierdzeniem, zrealizowali transakcję.

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

Pierwsze kroki ze statycznym interfejsem Maps static API

Interfejsu API statycznego Map Google można użyć przy użyciu wywołania usługi sieciowej, które utworzy graficzną wersję mapy z uwzględnieniem określonych przez Ciebie parametrów. Podobnie jak w przypadku mapy dynamicznej mogą określać typ mapy, używać tych samych stylów działających w chmurze oraz dodawać znaczniki do odróżnić lokalizację.

Poniższa rozmowa przedstawia plan działania o wymiarach 600 x 300 pikseli wyśrodkowany w Googlepleksie. w Mountain View w Kalifornii przy powiększeniu 13. Określa też niebieską lokalizację dostawy. znacznik 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

Zostały one podzielone na te sekcje:

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

Będzie to obraz taki jak poniżej:

Więcej informacji o opcjach statycznego interfejsu API Map Google znajdziesz w dokumentacja.

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

Możesz jeszcze bardziej poprawić wrażenia klientów, korzystając z niektórych zaawansowanych funkcji autouzupełniania miejsc. Oto kilka wskazówek, jak Pole wpisywania adresu autouzupełniania:

  • Zezwalaj użytkownikom na wpisywanie adresu na podstawie nazwy firmy lub miejsca. Informację o tym, jak dalej pisać usługa przewidywania działa nie tylko w przypadku adresów, ale możesz też pozwalają na wprowadzanie nazw firm lub punktów orientacyjnych. Gdy użytkownik wpisze nazwę firmy, można łatwo znaleźć adres za pomocą połączenia Szczegóły miejsca. Aby można było podać zarówno adresy, jak i nazwy instytucji, usuń types z definicji autouzupełniania.
  • Dostosowywanie wyglądu i stylu okna autouzupełniania miejsca stylu Twojej strony. Możesz też dostosować styl widżetu autouzupełniania do wyglądu i stylu koszyka. Możesz dostosować zestaw klas CSS. Dowiedz się więcej o tym, określić styl pola autouzupełniania, przeczytane dokumentację.
  • Jeśli chcesz utworzyć niestandardowy interfejs użytkownika. Jeśli tworzysz niestandardowy interfejs, zamiast używać interfejsu zaprojektowanego przez Google, wywołaj funkcję Automatyczne umieszczanie usługi autouzupełniania w celu pobierania podpowiedzi dla określonych danych wejściowych. Podpowiedzi autouzupełniania miejsc można pobierać automatycznie w JavaScript, Android oraz iOS oraz wywoływać interfejs API usług internetowych bezpośrednio Interfejs Places API.