Ödeme uygulama kılavuzu

Genel bakış

web iOS API

Google Haritalar Platformu; web (JS, TS), Android ve iOS'ta kullanılabilir. Ayrıca yerler, yol tarifleri ve mesafeler hakkında bilgi edinmeye yönelik web hizmetleri API'leri de sunar. Bu kılavuzdaki örnekler bir platform için yazılmıştır ancak diğer platformlarda uygulama için doküman bağlantıları sağlanmıştır.

Hemen oluşturun!

Google Cloud Console'daki Hızlı Oluşturucu, sizin için JavaScript kodu oluşturan etkileşimli bir kullanıcı arayüzü kullanarak adres formu otomatik tamamlama özelliği oluşturmanıza olanak tanır.

Online alışveriş ve sipariş vermek hayatımızın bir parçası haline geldi. Müşteriler, aynı gün teslimat hizmetlerinden taksi rezervasyonuna veya akşam yemeği siparişi vermeye kadar birçok konuda sorunsuz bir ödeme süreci beklemeye başladı.

Ancak bu uygulamaların tümünde, fatura veya gönderimle ilgili adres girişi ödeme akışında bir engel olarak görülüyor. Bu, hem zaman alıcı hem de zahmetli bir iş olabilir. Küçük bir ekranda karmaşık metin girişi yapmanın can sıkıcı olabildiği ve müşteri dönüşümünü engelleyen bir diğer sorun olduğu mobil dünyada, sorunsuz bir ödeme deneyimi daha da önemli hâle geliyor.

Bu konuda, tahmini adres girişiyle müşterilerinizin ödeme sürecini hızlandırmasına yardımcı olmak için uygulama rehberliği sağlanmaktadır.

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

API'ler etkinleştiriliyor

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 başlıklı makaleyi inceleyin.

Uygulamalar bölümleri

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

  • Onay işareti simgesi temel uygulamalardan biridir.
  • Yıldız simgesi isteğe bağlı ancak çözümü geliştirmek için önerilen bir özelleştirmedir.
Giriş alanlarına otomatik tamamlama ekleme Adres formunu otomatik olarak doldurun. Tüm platformlarda kullanıcı deneyimini iyileştirmek ve minimum tuş vuruşlarıyla adres doğruluğunu iyileştirmek için "kullandıkça yazma" işlevi ekleyin.
Haritalar Statik API ile görsel onay sağlama Belirli bir adresin enlem/boylam koordinatlarını bulun (coğrafi kodlama) veya bir coğrafi konumun enlem/boylam koordinatlarını bir adrese dönüştürün (ters coğrafi kodlama).
Ödeme'yi daha da geliştirmeye yönelik ipuçları Ödeme deneyimini daha da iyileştirmek için Otomatik Yer Tamamlama'nın gelişmiş özelliklerini kullanın.

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

Bu örnek şunları kullanır: Yerler Kitaplığı, Maps JavaScript API Diğer seçenekler: Android | iOS

Otomatik Yer Tamamlama, uygulamanızda adres girme işlemini kolaylaştırarak daha yüksek dönüşüm oranları elde etmenizi ve müşterileriniz için sorunsuz bir deneyim sunmanızı sağlayabilir. Otomatik tamamlama, bir fatura veya gönderim adresi formunu otomatik olarak doldurmak için kullanılabilen "önceden yazma" adres tahmini içeren tek ve hızlı bir giriş alanı sağlar.

Otomatik Yer Tamamlama'yı çevrimiçi alışveriş sepetinize ekleyerek aşağıdakileri yapabilirsiniz:

  • Adres girişi hatalarını azaltın.
  • Ödeme sürecindeki adım sayısını azaltmak.
  • Mobil veya giyilebilir cihazlarda adres girme deneyimini basitleştirin.
  • Müşterinin sipariş vermesi için gereken toplam tuş vuruşlarını ve toplam süreyi önemli ölçüde azaltın.

Kullanıcı Otomatik tamamlama giriş kutusunu seçip yazmaya başladığında, adres tahminleri listesi görüntülenir:

Kullanıcı, tahmin listesinden bir adres seçtiğinde yanıtı adresi doğrulamak ve konumu almak için kullanabilirsiniz. Uygulamanız daha sonra adres giriş formunun doğru alanlarını doldurabilir:

Videolar: Otomatik Yer Tamamlama ile adres formlarını geliştirme:

Adres formları

Web

Android

iOS

Otomatik Yer Tamamlama özelliğini kullanmaya başlama

Place Autcomplete'i sitenize eklemek için yalnızca birkaç satırlık JavaScript kodu yeterlidir.

En kolay yol, Haritalar JavaScript API'sini (bir harita görüntülemiyor olsanız bile) sitenize eklemek ve aşağıdaki örnekte gösterildiği gibi, başlatma işlevini de yürüten Yerler kitaplığını belirtmektir. 

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

Daha sonra, 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);
}

Önceki örnekte, kullanıcı bir adres tahmini seçtiğinde ve fillInAddress işlevi yürütüldüğünde place_changed etkinlik işleyicisi tetiklenir. Aşağıdaki örnekte gösterildiği gibi işlev, seçilen yanıtı alır ve bir form içinde görselleştirmek üzere adres bileşenlerini ayıklar.

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ınız için eşleşen adres olarak kullanabilirsiniz. Birkaç satırlık kod girerek müşterinin kısa sürede doğru adresi girmesini sağlayabilirsiniz.

Bu kod örneğinde, adres giriş formunu doldurmak için çalışan bir demoyu ve kaynak kodun tamamını inceleyin.

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

Widget'tan daha fazlasını kullanmak istiyorsanız Otomatik Yer Tamamlama'da, uygulamanın esnek bir şekilde kullanılabilmesine olanak tanıyan çeşitli seçenekler bulunur. Bir konumu doğru şekilde eşleştirmek için ihtiyacınız olan şeyi tam olarak elde etmek üzere bir hizmet kombinasyonu kullanabilirsiniz.

  • Adres formunda, eşleşmeleri tam açık adreslerle kısıtlamak için types parametresini address olarak ayarlayın. Otomatik Yer Tamamlama isteklerinde desteklenen türler hakkında daha fazla bilgi edinin.
  • Dünya genelinde arama yapmanız gerekmiyorsa uygun kısıtlamaları ve ağırlıklandırmaları ayarlayın. Herhangi bir eşleşmeye ağırlık vermek veya eşleşmeyi yalnızca belirli bölgelerle kısıtlamak için kullanılabilecek birkaç parametre vardır.
    • Dikdörtgen sınırları bir alanı kısıtlayacak şekilde ayarlamak için bounds, yalnızca bu alanlardaki adreslerin döndürüldüğünden emin olmak için strictBounds değerini kullanın.
    • Yanıtları belirli bir ülke grubuyla kısıtlamak için componentRestrictions özelliğini kullanın.
  • Belirli alanların eşleşmede atlanmış olması ihtimaline karşı alanları düzenlenebilir durumda bırakın ve müşterilerin gerekirse adresi güncellemesine izin verin. Yer Otomatik Tamamlama tarafından döndürülen adreslerin çoğu apartman, daire veya daire numarası gibi alt kuruluş numaraları içermediğinden bu örnekte, kullanıcıyı gerekirse bu bilgileri doldurmaya teşvik etmek için adres Satırı 2'ye odaklanılmıştır.

Maps Static API ile görsel onay sağlama

Adres girişinden sonra, basit bir statik haritayla kullanıcıya teslimat veya teslim alma konumuyla ilgili görsel onay gönderin. Bu, müşteriye adresin doğru olduğuna dair ek güvence sağlar ve teslimat/teslim alma hatalarını azaltır. Statik harita, adresi girdikleri sayfada gösterilebilir veya işlemi tamamladıklarında onay e-postası içinde gönderilebilir.

Bu kullanım alanlarının her ikisi de Haritalar Statik API'si ile gerçekleştirilebilir. Bu API, bir sayfa veya e-posta içindeki herhangi bir resim etiketine haritanın resim sürümünü ekler.

Maps Static API'yi kullanmaya başlama

Bir web hizmeti çağrısı kullanarak Maps Static API'yi kullanabilirsiniz. Bu çağrı, belirttiğiniz parametrelere göre bir haritanın görüntü sürümünü oluşturur. Dinamik haritada olduğu gibi, harita türünü belirtebilir, aynı bulut tabanlı stilleri kullanabilir ve konumu ayırt etmek için işaretçiler ekleyebilirsiniz.

Aşağıdaki çağrıda, Mountain View, CA'da bulunan 13. yakınlaştırma düzeyinde Googleplex'te ortalanmış, 600x300 piksel boyutunda bir yol haritası gösterilmektedir. Ayrıca mavi renkli bir teslimat konumu işaretçisi ve online harita stili de gösterilir. 

      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 center=37.422177,-122.084082
zum düzeyi yakınlaştırma=13
resim boyutu boyut=600x300
harita türü maptype=roadmap
mağaza konum 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 (Parametre dokümanlarına bakın) 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 edinmek için belgelere bakın.

Google Checkout'u daha da geliştirmeye yönelik ipuçları

Otomatik Yer Tamamlama'nın sunduğu bazı gelişmiş özelliklerden yararlanarak müşteri deneyiminizi daha da geliştirebilirsiniz. Otomatik tamamlama adres giriş kutunuzu iyileştirmeye yönelik bazı ipuçları aşağıda verilmiştir:

  • Kullanıcıların, işletme veya önemli nokta adına dayalı bir adres girmelerine izin verin. "Önceden yazın" tahmin hizmeti yalnızca adresler için değil, işletme veya önemli nokta adlarının girilmesine izin vermeyi de seçebilirsiniz. Kullanıcı bir işletme adı girdikten sonra, Yer Ayrıntıları çağrısı yaparak adresi kolayca alabilirsiniz. Hem adreslerin hem de tesis adlarının girilmesine izin vermek için types özelliğini Otomatik tamamlama tanımından kaldırın.
  • Otomatik Yer Tamamlama kutusunun görünümünü ve tarzını, web sitenizin stiline uyacak şekilde özelleştirin. Ayrıca, otomatik tamamlama widget'ını alışveriş sepetinizin görünümüne ve tarzına uyacak şekilde biçimlendirebilirsiniz. Özelleştirebileceğiniz bir dizi CSS sınıfı mevcuttur. Otomatik tamamlama kutunuzun stilini nasıl belirleyeceğiniz hakkında daha fazla bilgi için dokümanları okuyun.
  • Ö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ü derleyerek belirli bir girişle ilgili tahminleri almak için Otomatik Yer Tamamlama hizmetini programatik olarak çağırın. Yer Otomatik Tamamlama tahminlerini JavaScript, Android ve iOS'te programatik olarak alabilir, ayrıca web hizmetleri API'sini doğrudan Places API'de çağırabilirsiniz.