Ödeme uygulama kılavuzu

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Genel bakış

web iOS API

Google Haritalar Platformu; web (JS, TS), Android ve iOS platformlarının yanı sıra yerler, yol tarifleri ve mesafeler hakkında bilgi almak için web hizmetleri API'leri sunar. Bu kılavuzdaki örnekler bir platform için yazılmıştır ancak diğer platformlarda uygulanması için belge bağlantıları sağlanmıştır.

Hemen derleyin!

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

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

Ancak tüm bu uygulamalarda faturalandırma veya gönderim için adres girişi, ödeme akışında hem zahmetli hem de zahmetli olabilecek tek bir engel olarak kalmaya devam eder. Mobil cihazlarda, sorunsuz bir ödeme deneyimi daha da önemli hale geliyor. Mobil cihazlarda, küçük ekranda karmaşık metin girişi can sıkıcı olabilir ve müşteri dönüşümü için başka bir engel oluşturur.

Bu konu, tahmine dayalı adres girişiyle müşterilerinizin ödeme işlemi sırasında hız kazanmasına yardımcı olmak için uygulama rehberliği sağlar.

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

API'ler etkinleştiriliyor

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

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

Uygulama bölümleri

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

  • Onay işareti simgesi temel bir uygulamadır.
  • Yıldız simgesi isteğe bağlı olsa da çö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şuyla adres doğruluğunu iyileştirmek için kullandıkça kullan işlevi ekleyin.
Maps Static API ile görsel onay sağlama Belirli bir adresteki enlem/boylam koordinatlarını (coğrafi kodlama) bulun veya bir coğrafi konumun enlem/boylam koordinatlarını bir adrese (ters coğrafi kodlama) dönüştürün.
Google Checkout'u daha da geliştirmeye yönelik ipuçları Ödeme deneyimini daha da iyileştirmek için Yer Otomatik Tamamlama gelişmiş özelliklerini kullanın.

Giriş alanlarına otomatik tamamlama ekleme

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

Otomatik Yer Tamamlama, uygulamanızdaki adres girişini basitleştirerek daha yüksek dönüşüm oranları ve müşteriler için sorunsuz bir deneyim sağlar. Otomatik tamamlama, bir fatura veya gönderim adresi formunu otomatik olarak doldurmak için kullanılabilecek "type-pre-type" adres tahminine sahip tek bir hızlı giriş alanı sağlar.

Yer Otomatik Tamamlama özelliğini online alışveriş sepetinize dahil ederek:

  • Adres girişi hatalarını azaltın.
  • Ödeme işlemindeki adım sayısını azaltın.
  • Mobil veya giyilebilir cihazlarda adres girişi deneyimini kolaylaştırın.
  • Tuş vuruşlarını ve müşterinin sipariş vermesi için gereken 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ı, tahmin listesinden bir adres seçtiğinde, adresi doğrulamak ve konumu almak için yanıtı kullanabilirsiniz. Ardından, uygulamanız adres girişi formunun doğru alanlarını doldurabilir:

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 sitenize eklemek için yalnızca birkaç satır JavaScript kodu gerekir.

En kolay yöntem, sitenize Maps JavaScript API'yi eklemek (bir harita görüntülemiyor olsanız bile) ve ilk kullanıma hazırlama işlevini de yürüten aşağıdaki örnekte gösterildiği gibi Yerler kitaplığını belirtmektir.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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şleyici tetiklenir ve fillInAddress işlevi yürütülür. İşlev, aşağıdaki örnekte gösterildiği gibi, seçilen yanıtı alır ve form içinde görselleştirmek için 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();
}

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. Yalnızca birkaç satır kod kullanarak, müşterinin doğru adresi kısa sürede girdiğinden emin olabilirsiniz.

Bu kod örneğinde adres girişi formunu doldurmak için çalışan bir demoyu ve tam kaynak kodunu inceleyin.

Otomatik Yer Tamamlama özelliğiyle ilgili dikkat edilmesi gereken noktalar

Otomatik Widget'ın yalnızca widget'tan daha fazlasını kullanmak istiyorsanız esnek bir şekilde uygulanmasına olanak tanıyan çeşitli seçenekleri vardır. Bir konumu tam olarak doğru şekilde eşleştirmek için ihtiyacınız olanı almak üzere hizmetlerin bir kombinasyonunu kullanabilirsiniz.

  • Eşleşmelerin tam adresle sınırlandırılması için adres formunda types parametresini address olarak ayarlayın. Yer Otomatik Tamamlama isteklerinde desteklenen türler hakkında daha fazla bilgi edinin.
  • Dünya genelinde arama yapmanız gerekmiyorsa uygun kısıtlamaları ve ön yargıları ayarlayın. Herhangi bir eşleşmeyi ön plana çıkarmak veya yalnızca belirli bölgelerle sınırlamak için kullanılabilecek birkaç parametre vardır.
    • Bir alanı sınırlamak için dikdörtgen sınırları oluşturmak üzere bounds öğesini, yalnızca bu alanlardaki adreslerin döndürülmesini sağlamak için strictBounds değerini kullanın.
    • Yanıtları belirli bir ülke grubuyla sınırlamak için componentRestrictions özelliğini kullanın.
  • Bazı alanlar eşleşme olmaması durumunda alanları düzenlenebilir olarak bırakın ve gerekirse müşterilerin adresi güncellemesine izin verin. Yer Otomatik Tamamlama tarafından döndürülen çoğu adres apartman, daire veya daire numarası gibi alt temel numaraları içermediğinden, bu örnekte odak, kullanıcının gerekirse bu bilgileri doldurmasını teşvik etmek için Adres Satırı 2'ye taşınır.

Maps Static API ile görsel onay sağlama

Adres girdikten sonra basit bir statik haritayla kullanıcıya teslimat veya teslim alma yerinin görsel onayını sağlayın. Bu sayede, müşterilere adresin doğru olduğuna dair ek güvence sağlanır ve teslimat/teslim alma hataları azaltılır. Statik harita, adresi girdikleri sayfada gösterilebilir ve hatta işlemi tamamladıklarında onay e-postası içinde gönderilebilir.

Bu kullanım alanlarının her ikisi de Maps Static API ile gerçekleştirilebilir. Bu işlem, bir sayfa veya e-postadaki resim etiketlerine haritanın görsel sürümünü ekler.

Maps Static API'yi kullanmaya başlama

Maps Static API'yi, belirttiğiniz parametrelere bağlı olarak bir haritanın resim sürümünü oluşturacak olan bir web hizmeti çağrısı kullanarak 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ı, Mountain View, CA'daki yakınlaştırma kompleksi 13'te bulunan Googleplex'i merkez alan 600x300 piksel boyutunda bir yol haritası göstermektedir. Ayrıca mavi renkli bir teslimat konumu işaretçisi ve çevrimiçi 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, 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
yakınlaştırma düzeyi zum=13
resim boyutu boyut=600x300
harita türü eşleme türü=yol haritası
mağaza konumu işaretçileri işaretçileri=renk:mavi%7Cetiket:C%7C37.422177,-122.084082
bulut harita stili Map_id=8f348d1b5a61d4bb
API Anahtarı key=API_ANAHTARINIZ
Çözüm kanal parametresi (Parametre dokümanlarına bakın) Solutions_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 belgelere bakın.

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

Otomatik Tamamlama özelliğinin sunduğu bazı gelişmiş özelliklerden yararlanarak müşteri deneyiminizi daha da iyileştirebilirsiniz. Otomatik tamamlama adres girişi kutunuzu iyileştirmek için bazı ipuçlarını burada bulabilirsiniz:

  • Kullanıcıların bir işletme veya önemli nokta adına göre bir adres girmelerine izin verin. "Önceden yaz" tahmin hizmeti yalnızca adresler için değil, işletme veya önemli nokta adlarının girilmesine de izin vermeyi seçebilirsiniz. Kullanıcı bir işletme adı girdikten sonra, Yer Ayrıntıları çağrısıyla adresi almak kolaydır. Hem adreslerin hem de kuruluş 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ü, web sitenizin stiline uyacak şekilde özelleştirin. Ayrıca, otomatik tamamlama widget'ının stilini alışveriş sepetinizin görünümüne ve tarzına uyacak şekilde ayarlayabilirsiniz. Özelleştirebileceğiniz bir dizi CSS sınıfı vardır. Otomatik tamamlama kutunuzun stilini nasıl belirleyeceğiniz hakkında daha fazla bilgi için belgeleri 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ü oluşturmak için Yer Otomatik Tamamlama hizmetini programatik olarak çağırarak belirli bir girişle ilgili tahminleri alın. Otomatik Yer Bulma tahminlerini programatik olarak JavaScript, Android ve iOS'ta almanın yanı sıra web hizmetleri API'sini doğrudan Places API'den çağırabilirsiniz.