Ödeme uygulama kılavuzu

Genel Bakış

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:

• Maps JavaScript API
• Yerler API'si
• Haritalar Statik API

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.

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

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:

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.

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

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.

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:

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.

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:

• stars. 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.
• stars. 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.
• stars. Ö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.