Ödeme uygulama kılavuzu

Genel Bakış

web iOS API

Google Haritalar Platformu; web (JS, TS), Android ve iOS için kullanılabilir. Ayrıca Yerler, yol tarifleri ve mesafeler hakkında bilgi edinmek için web hizmetleri API'leri sunar. Bu kılavuzdaki örnekler tek 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 Quick Builder, 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ş, hayatımızın her yerinde olan bir parçası haline geldi. Müşteriler, aynı gün teslimat hizmetlerinden taksi rezervasyonu yapmaya veya akşam yemeği sipariş etmeye kadar her konuda sorunsuz bir ödeme süreci bekliyor.

Ancak tüm bu uygulamalarda, faturalandırma veya kargo için adres girişi, ödeme adımlarında hem zaman alıcı hem de zahmetli olabilen bir engel olarak kalmaya devam ediyor. Sorunsuz bir ödeme deneyimi, küçük bir ekranda karmaşık metin girişi yapmanın sinir bozucu olabileceği ve müşteri dönüşümü için başka bir engel oluşturabileceği mobil dünyada daha da önem kazanıyor.

Bu belgede, müşterilerinizin tahmini adres girişiyle ödeme sürecini hızlandırmasına yardımcı olacak uygulama yönergeleri verilmektedir.

Aşağıdaki şemada, ödeme işleminin uygulanmasında yer alan temel API'ler gösterilmektedir. Büyütmek için şemayı tıklayın.

API'ler etkinleştiriliyor

Ödeme'yi 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

Aşağıdaki bölümlerde, ödeme adımlarınızı iyileştirmenize yardımcı olacak ipuçları ve özelleştirmeler yer almaktadır.

  • Onay işareti simgesi, temel bir uygulamadır.
  • Yıldız simgesi, çözümü geliştirmek için isteğe bağlı ancak önerilen bir özelleştirmedir.
Giriş alanlarına otomatik tamamlama ekleme Adres formunu otomatik doldurma Tüm platformlarda kullanıcı deneyimini iyileştirmek ve minimum tuş vuruşuyla adres doğruluğunu artırmak için yazarken tamamlama işlevini ekleyin.
Maps Static API ile görsel onay sağlama Belirli bir adresin enlem/boylam koordinatlarını bulma (coğrafi kodlama) veya bir coğrafi konumun enlem/boylam koordinatlarını adrese dönüştürme (ters coğrafi kodlama).
Ödeme deneyimini daha da iyileştirmeye yönelik ipuçları Ödeme deneyimini daha da iyi hale getirmek için Yer Adı Otomatik Tamamlama'nın ileri seviye özelliklerini kullanın.

Giriş alanlarına otomatik tamamlama ekleme

Bu örnekte kullanılanlar: Yerler Kitaplığı, Maps JavaScript API Ayrıca: Android | iOS

Yer Adı Otomatik Tamamlama, uygulamanızda adres girişini basitleştirerek daha yüksek dönüşüm oranları ve müşterileriniz için sorunsuz bir deneyim sunmanızı sağlayabilir. Otomatik tamamlama, fatura veya kargo adresi formunu otomatik olarak doldurmak için kullanılabilecek, "yazarken tahmin etme" adres tahmini özelliğine sahip tek ve hızlı bir giriş alanı sağlar.

Yer Adı Otomatik Tamamlama'yı online alışveriş sepetinize entegre ederek şunları yapabilirsiniz:

  • Adres girişi hatalarını azaltın.
  • Ödeme işlemindeki adım sayısını azaltın.
  • Mobil veya giyilebilir cihazlarda adres girişini basitleştirin.
  • Müşterinin sipariş vermesi için gereken 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 tahminlerinin listesi gösterilir:

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

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

Adres formları

Web

Android

iOS

Yer Adı Otomatik Tamamlama özelliğini kullanmaya başlama

Birkaç satır JavaScript koduyla Yer Adı Otomatik Tamamlama'yı sitenize entegre edebilirsiniz.

Harita göstermiyor olsanız bile Maps JavaScript API'yi sitenize ekleyebilir ve Yerler kitaplığını belirtebilirsiniz. Aşağıdaki örnekte, bu işlemin nasıl yapılacağı ve başlatma işlevinin nasıl yürütüleceği gösterilmektedir. 

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

Önceki örnekte, kullanıcı bir adres tahmini seçtiğinde place_changed etkinlik işleyicisi tetiklenir 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 formda görselleştirmek için 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();
}

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;

Bu verileri aldıktan sonra, kullanıcınızın eşleşen adresi olarak kullanabilirsiniz. Birkaç satırlık kodla müşterinin kısa sürede doğru adresi girmesini sağlayabilirsiniz.

Bir adres giriş formunu doldurmaya yönelik çalışan bir demoyu ve tam kaynak kodunu bu kod örneğinde inceleyin.

Yer Adı Otomatik Tamamlama'yı uygularken dikkat edilmesi gerekenler

Yer Adı Otomatik Tamamlama, yalnızca widget'ı kullanmak istemiyorsanız uygulamanızı özelleştirmenize olanak tanıyan çeşitli seçenekler sunar. Konumları doğru şekilde eşleştirmek için hizmetleri bir arada kullanabilirsiniz.

  • Bir adres formu için types parametresini address olarak ayarlayarak eşleşmeleri tam açık adreslerle sınırlayın. Yer Adı Otomatik Tamamlama isteklerinde desteklenen türler hakkında daha fazla bilgi edinin.
  • Dünya genelinde arama yapmanız gerekmiyorsa uygun kısıtlamaları ve önyargıları ayarlayın. Eşleşmeleri belirli bölgelerle sınırlamak veya bu bölgelere yönlendirmek için çeşitli parametreler kullanabilirsiniz.
    • Bir alanı sınırlamak için dikdörtgen sınırları ayarlamak üzere bounds simgesini kullanın. Yalnızca bu bölgelerdeki adreslerin döndürülmesini sağlamak için strictBounds kullanın.
    • Yanıtları belirli bir ülke grubuyla sınırlamak için componentRestrictions kullanın.
  • Eşleşmede belirli alanlar atlanırsa alanları düzenlenebilir bırakın ve gerekirse müşterilerin adresi güncellemesine izin verin. Yer Adı Otomatik Tamamlama tarafından döndürülen adreslerin çoğu, apartman dairesi, süit veya birim numaraları gibi alt bina numaralarını içermediğinden bu örnekte, gerekirse kullanıcının bu bilgileri doldurmasını teşvik etmek için odak Adres Satırı 2'ye taşınıyor.

Maps Static API ile görsel onay sağlama

Müşteriniz adresini girdikten sonra, statik bir harita ile teslimat veya teslim alma konumunun görsel onayını sağlayın. Bu sayede müşteriye adresin doğru olduğu konusunda ek güvence verilir ve başarısız teslimat veya teslim alma işlemleri azaltılır. Statik haritayı adres giriş sayfasında gösterebilir veya işlem tamamlandıktan sonra onay e-postasına ekleyebilirsiniz.

Bu kullanım alanlarının her ikisini de Maps Static API ile uygulayabilirsiniz. Bu API, 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, belirttiğiniz parametrelere göre haritanın resim sürümünü oluşturan bir web hizmeti çağrısı aracılığıyla kullanabilirsiniz. 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, 600x300 piksel boyutunda, Mountain View, CA'daki Googleplex'i merkez alan ve 13. yakınlaştırma seviyesinde bir yol haritası gösterilmektedir. Ayrıca mavi bir teslimat konumu işaretçisi ve online harita stili de belirtir. 

      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 bölüm aşağıdaki alt bölümlere ayrılmıştır:

API URL'si https://maps.googleapis.com/maps/api/staticmap?
harita merkezi center=37.422177,-122.084082
yakınlaştırma seviyesi zoom=13
image size size=600x300
harita türü maptype=roadmap
mağaza konumu işaretçileri markers=color:blue%7Clabel:C%7C37.422177,-122.084082
cloud map style map_id=8f348d1b5a61d4bb
API Anahtarı key=YOUR_API_KEY
Çözüm kanalı parametresi. Daha fazla bilgi için parametre belgelerini inceleyin. solution_channel=GMP_guides_checkout_v1_a

İstek aşağıdaki resmi döndürür:

Maps Static API seçenekleri hakkında daha fazla bilgi için belgelere bakın.

Ödeme sürecini daha da iyileştirmeye yönelik ipuçları

Yer Adı Otomatik Tamamlama'nın sunduğu bazı ileri seviye özelliklerden yararlanarak müşteri deneyiminizi daha da iyileştirebilirsiniz. Adres girişini otomatik tamamlama kutunuzu iyileştirmeye yönelik bazı ipuçlarını aşağıda bulabilirsiniz:

  • Kullanıcıların, işletme veya önemli yer adına göre adres girmesine izin verin. "Yazarken tahmin et" tahmin hizmeti yalnızca adresler için çalışmaz. İşletme veya önemli yer adlarının girilmesine de izin verebilirsiniz. Kullanıcı bir işletme adı girdikten sonra Yer Ayrıntıları'nı çağırarak adresi alabilirsiniz. Hem adreslerin hem de kuruluş adlarının girilmesine izin vermek için Otomatik Tamamlama tanımından types özelliğini kaldırın.
  • Yer Adı Otomatik Tamamlama kutusunun görünümünü web sitenizin stiline uyacak şekilde özelleştirin. Ayrıca, otomatik tamamlama widget'ını alışveriş sepetinizin görünümüne uygun şekilde biçimlendirebilirsiniz. Widget'ın görünümünü özelleştirmek için CSS sınıflarını kullanabilirsiniz. Daha fazla bilgi için Stil Otomatik Tamamlama başlıklı makaleyi inceleyin.
  • Özel bir kullanıcı arayüzü oluşturun. Google tarafından tasarlanan kullanıcı arayüzünü kullanmak yerine özel bir kullanıcı arayüzü oluşturmak istiyorsanız belirli bir girişle ilgili tahminleri almak için Yer Adı Otomatik Tamamlama hizmetini programatik olarak çağırın. Yer Adı Otomatik Tamamlama tahminlerini programatik olarak JavaScript, Android ve iOS'ta alabilir, ayrıca web hizmetleri API'sini doğrudan Places API aracılığıyla çağırabilirsiniz.