Bu sayfa, Cloud Translation API ile çevrilmiştir.

Ödeme uygulama kılavuzu

Genel Bakış

web iOS API

Google Haritalar Platformu; web (JS, TS), Android ve iOS için ve yerler, yol tarifleri ve Google'dan hakkında bilgi edinmek için web hizmetleri API'leri görebilirsiniz. Bu kılavuzdaki örnekler bir platform için yazılmıştır ancak belge bağlantıları diğer platformlarda uygulanmak üzere sağlanmıştır.

Hemen oluşturun!

Hızlı Oluşturucu Google Cloud Console, JavaScript kodu oluşturan etkileşimli bir kullanıcı arayüzü sunar.

Online alışveriş ve sipariş verme, hayatımızın en yaygın parçalarından biri haline geldi. Aynı güne ait taksi rezervasyonu ya da akşam yemeği siparişi vermek gibi iş fırsatları gibi zahmetsiz ödeme süreci.

Ancak bu uygulamaların tümünde adres girişi için faturalandırma veya gönderim bedeli, ödeme akışında bir engel olarak kalabilir. ve külfetli hale geldi. Sorunsuz bir ödeme deneyimi daha da önemli hale geliyor küçük ekranlarda karmaşık metin girmenin sinir bozucu olabildiği ve dönüşümünün önündeki başka bir engel.

Bu konu, müşterilerinizin dönüşüm sürecini hızlandırmasına yardımcı olacak uygulama rehberliği içerir. tahmine dayalı adres girişiyle ödeme sürecini kolaylaştırır.

Aşağıdaki şemada, Google Checkout'un uygulanmasıyla ilgili temel API'ler gösterilmektedir (büyütmek için tıklayın).

API'ler etkinleştiriliyor

Google Checkout'u uygulamak için Google Cloud Console'da aşağıdaki API'leri etkinleştirmeniz gerekir:

Kurulum hakkında daha fazla bilgi için Google Haritalar Platformu'nu kullanmaya başlama.

Uygulamalar bölümleri

Aşağıda, bu konuda ele alacağımız ipuçları ve özelleştirmeler verilmiştir.

. Onay işareti simgesi temel uygulamalardan biridir.
. Yıldız simgesi isteğe bağlıdır ancak çözümü geliştirir.

	Giriş alanlarına otomatik tamamlama ekleme	Adres formunu otomatik olarak doldurun. Kullanıcıyı iyileştirmek için "kullandıkça yaz" işlevi ekleyin tüm platformlarda kullanım deneyimi sunmak ve en az tuş vuruşlarıyla adres doğruluğunu artırmak.
	Haritalar Statik API ile görsel onay sağlama	Belirli bir adresin enlem/boylam koordinatlarını bulma (coğrafi kodlama), veya coğrafi bir konumun enlem/boylam koordinatlarını coğrafi kodlamayı tersine çevirin.
	Ödeme özelliğini daha da geliştirmek için ipuçları	Ödeme deneyimi için Otomatik Yer Tamamlama gelişmiş özelliklerini kullanın daha da iyi hale getirir.

Not: Çözüm kodu örneklerinin benimsenmesini izlemek için ve çözüm kalitesini artırmak için Google'a solution_channel bu sayfada sağlanan örnek koddaki API çağrılarındaki sorgu parametresini içerir. Kapsam dışında kalmayı seçmek için örnek koddan solution_channel sorgu parametresini silin. Google Haritalar Platformu çözümleri parametresini inceleyin inceleyebilirsiniz.

Giriş alanlarına otomatik tamamlama özelliği ekleniyor

Bu örnekte şunlar kullanılmaktadır: Yerler Kitaplığı, Maps JavaScript API

Sunulan diğer seçenekler: Android | iOS

Otomatik Yer Tamamlama uygulamanızda adres girmeyi kolaylaştırarak daha yüksek dönüşüm oranları elde etmenize ve sorunsuz bir deneyim yaşayabilirsiniz. Otomatik tamamlama tek bir hızlı giriş alanı sağlar "type-ahead" olarak bir faturayı otomatik olarak doldurmak için kullanılabilecek adres tahmini gönderim adresi formunu doldurun.

Otomatik Yer Tamamlama özelliğini çevrimiçi alışveriş sepetinize ekleyerek şunları yapabilirsiniz:

Adres girişi hatalarını azaltın.
Ödeme sürecindeki adım sayısını azaltın.
Mobil veya giyilebilir cihazlarda adres girişi deneyimini basitleştirin.
Müşterinin tuş vuruşlarını ve bir şeyi sipariş.

Kullanıcı Otomatik tamamlama giriş kutusunu seçip yazmaya başladığında adres listesi tahminler görünür:

Kullanıcı tahmin listesinden bir adres seçtiğinde, yanıtı kullanarak adresi doğrulayabilir ve konumu alabilirsiniz. Daha sonra uygulamanız doğru alanları doldurabilir aşağıdaki adımları uygulayın:

Videolar: Otomatik Yer Tamamlama özelliğiyle adres formlarını geliştirin:

Adres formları

Web

Android

iOS

Otomatik Yer Tamamlama özelliğini kullanmaya başlama

Place Autcomplete'i eklemek için yalnızca birkaç satırlık bir JavaScript kodu gerekir sitenizi ziyaret edin.

En kolay yol, Maps JavaScript API'yi eklemektir ( (harita görüntülemez) de ekleyebilirsiniz ve Yerler kitaplığını şurada gösterildiği gibi: aşağıdaki örneğe bakın. Bu örnek, ilk kullanıma hazırlama işlevini de yürütür.

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

Ardından, kullanıcı girişi için sayfanıza bir metin kutusu ekleyin:

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

Son olarak, Otomatik tamamlama hizmetini başlatın ve adlandırılmış metin kutusuna bağlayın:

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

Yukarıdaki örnekte, place_changed etkinlik işleyicisi Kullanıcı bir adres tahmini seçer ve fillInAddress işlevi yürütülür. Aşağıdaki örnekte gösterildiği gibi, işlev seçilen yanıtı alır ve bir form içinde görselleştirilecek adres bileşenlerini çıkarır.

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

Bu verileri aldıktan sonra, kullanıcı için eşleşen adres olarak kullanabilirsiniz. Birkaç kişiden kullanarak, müşterinin kısa bir süre içinde doğru adresi girmesini sağlayabilirsiniz. gerekir.

Bu e-postada bir adres giriş formu doldurmak için çalışan bir demoyu ve tam kaynak kodunu kod örnek bölümüne bakın.

Otomatik Yer Tamamlama özelliğini uygularken dikkat edilmesi gereken noktalar

Yer Otomatik Tamamlama özelliği, esnek olmasını sağlayan pek çok seçenek sunar. widget'tan daha fazlasını kullanmak istiyorsanız Özel Korumalı Alan için ve konumlarınızı doğru şekilde eşleştirmek için ihtiyacınız olan her şeyi sunar.

Adres formu için types parametresini address olarak ayarlayın: Eşleşmeleri tam açık adreslerle sınırlandırın. Daha fazla bilgi: desteklenen türler Konum Otomatik Tamamlama isteklerinde.
Uygun kısıtlamaları ayarlayın ve önyargılara neden olabilir. Bir dizi parametre, herhangi bir eşleşmeyi yalnızca belirli bölgelerle etkilemek veya kısıtlamak için kullanılabilir.
- Bir alan için kısıtlanacak dikdörtgen sınırları ayarlamak için bounds işlevini kullanın. Yalnızca bu bölgelerdeki adreslerin döndürüldüğünden emin olmak için strictBounds.
- Yanıtları belirli bir grup ile sınırlamak için componentRestrictions kullanın ülkeler.
Eşleşmede belirli alanların eksik olması ihtimaline karşı alanları düzenlenebilir bırakın ve müşterilere izin verin veya gerekiyorsa adresi güncelleyebilir. Çoğu adres Yer Otomatik Tamamlama tarafından döndürüldüğünden Apartman, daire veya daire numarası gibi alt bina numaralarını içermemelidir. örnek, odağı Adres Satırı 2'ye taşır ve kullanıcıyı isteyebilirsiniz.

Maps Static API ile görsel onay sağlama

Adres girişinden sonra kullanıcıya teslimat veya teslim alma konumunun basit bir statik haritasıyla. Böylece müşteri, ek güvence sağlar. ve teslimat/teslim alma hatalarını azaltacaktır. Statik harita, veya ziyaret ettiklerinde de onay e-postası ile gönderdikleri tamamlamış olması gerekir.

Bu kullanım alanlarının her ikisi de Haritalar Statik API, Bu etiket, bir sayfa veya e-postadaki herhangi bir resim etiketine haritanın resim sürümünü ekler.

Maps Static API'yi kullanmaya başlama

Maps Static API'yi bir web hizmeti çağrısı kullanarak kullanabilirsiniz. Bu çağrı, belirttiğiniz parametrelere göre bir haritanın resim sürümü Dinamik haritada olduğu gibi, harita türünü belirtebilir, aynı bulut tabanlı stilleri kullanabilir ve konumu ayırt etmektir.

Aşağıdaki çağrıda, Googleplex'e ortalanmış 600x300 piksel boyutunda bir yol haritası gösterilmektedir ve Mountain View, California'da 13 yakınlaştırma düzeyinde göreceksiniz. Ayrıca mavi bir teslimat konumu belirtir ve çevrimiçi harita stilini kullanabilirsiniz.

      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

Bu, aşağıdaki bölümlere ayrılır:

API URL'si	https://maps.googleapis.com/maps/api/staticmap?
harita merkezi	merkez=37.422177,-122.084082
yakınlaştırma düzeyi	yakınlaştırma=13
resim boyutu	boyut=600x300
harita türü	maptype=roadmap
mağaza konumu işaretçileri	markers=color:blue%7Clabel:C%7C37.422177,-122.084082
bulut harita stili	map_id=8f348d1b5a61d4bb
API Anahtarı	key=YOUR_API_KEY
Çözüm kanalı parametresi (bkz. parametre belgeleri)	solution_channel=GMP_guides_checkout_v1_a

Bu, aşağıda gösterildiği gibi resim haline gelir:

Maps Static API seçenekleri hakkında daha fazla bilgi için belgeleri inceleyin.

Google Checkout'u daha da geliştirmek için ipuçları

Müşteri deneyimini daha da iyileştirmek için, Müşteri'lerin otomatik tamamlamanın sunduğu özellikler hakkında daha fazla bilgi edinin. Aşağıda, Adres girişini otomatik tamamla:

. Kullanıcıların, işletme veya önemli yer adına dayalı adres girmesine izin verin. "İleriye doğru yazın" tahmin hizmeti yalnızca adresler için değil, aynı zamanda işletme veya önemli nokta adlarının girilmesine izin verir. Kullanıcı bir işletme adı girdikten sonra bir çağrı ile adresi kolayca alabilirsiniz. Yer Ayrıntıları. Hem adres hem de kuruluş adı girilmesine izin vermek için Otomatik tamamlama tanımından types özellik.
. Otomatik Yer Tamamlama kutusunun görünümünü ve tarzını eşleşecek şekilde özelleştirin sitenizin stilini kontrol edin. Otomatik tamamlama widget'ını alışveriş sepetinizin görünümüne ve tarzına uyacak şekilde de biçimlendirebilirsiniz. Özelleştirebileceğiniz bir dizi CSS sınıfı mevcuttur. Daha fazla bilgi için otomatik tamamlama kutunuzun stilini belirleyin, okuma inceleyin.
. Özel bir kullanıcı arayüzü oluşturmak istiyorsanız. Google tarafından tasarlanan kullanıcı arayüzünü kullanmak yerine özel bir kullanıcı arayüzü oluşturmak Belirli bir girişle ilgili tahminleri almak için Otomatik Tamamlama hizmetini programlı bir şekilde yerleştirin. Otomatik Yer Tamamlama tahminlerini programatik olarak şurada alabilirsiniz: JavaScript, Android, ve iOS çağrılarını doğrudan Places API.