चेकआउट लागू करने की गाइड

खास जानकारी

ऑनलाइन शॉपिंग और ऑर्डर करना, हमारी ज़िंदगी का अहम हिस्सा बन गया है. ग्राहकों को अब उसी दिन डिलीवरी की सेवाओं से लेकर टैक्सी बुक करने या डिनर ऑर्डर करने तक, चेकआउट की प्रोसेस में कोई परेशानी नहीं होनी चाहिए.

हालांकि, इन सभी ऐप्लिकेशन में, बिलिंग या शिपिंग के लिए पता डालना, चेकआउट प्रोसेस में एक मुश्किल काम है. इसमें ज़्यादा समय लग सकता है और यह मुश्किल भी हो सकता है. मोबाइल की दुनिया में, चेकआउट का आसान अनुभव और भी ज़रूरी हो जाता है ऐसा इसलिए, क्योंकि छोटी स्क्रीन पर मुश्किल टेक्स्ट डालना, ग्राहकों के लिए परेशानी भरा हो सकता है और यह कन्वर्ज़न में भी रुकावट बन सकता है.

इस दस्तावेज़ में, पते के अपने-आप भरने की सुविधा को लागू करने के बारे में दिशा-निर्देश दिए गए हैं. इससे आपके ग्राहकों को चेकआउट की प्रोसेस तेज़ी से पूरी करने में मदद मिलेगी.

नीचे दिए गए डायग्राम में, चेकआउट की सुविधा लागू करने के लिए इस्तेमाल किए जाने वाले मुख्य एपीआई दिखाए गए हैं. डायग्राम को बड़ा करने के लिए, उस पर क्लिक करें.

एपीआई चालू करना

चेकआउट की सुविधा लागू करने के लिए, आपको Google Cloud कंसोल में ये एपीआई चालू करने होंगे:

• Maps JavaScript API
• Places API
• Maps Static API

सेटअप के बारे में ज़्यादा जानकारी के लिए, Google Maps Platform का इस्तेमाल शुरू करना लेख पढ़ें.

असरदार तरीके वाले सेक्शन

नीचे दिए गए सेक्शन में, चेकआउट प्रोसेस को बेहतर बनाने के लिए सुझाव और पसंद के मुताबिक बनाने के तरीके बताए गए हैं.

• check_circle_filled सही का निशान वाला आइकॉन, एक अहम तरीका है.
• stars तारे का आइकॉन, एक ऐसा विकल्प है जिसे इस्तेमाल करने का सुझाव दिया जाता है. इससे समाधान को बेहतर बनाया जा सकता है.

Place Autocomplete की मदद से, आपके ऐप्लिकेशन में पते की जानकारी डालना आसान हो जाता है. इससे कन्वर्ज़न दरें बढ़ती हैं और आपके ग्राहकों को बेहतर अनुभव मिलता है. ऑटोकंप्लीट की सुविधा में, एक ही फ़ील्ड में पते की जानकारी तेज़ी से डाली जा सकती है. इसमें "टाइप-अहेड" की सुविधा से, पते का अनुमान लगाया जाता है. इसका इस्तेमाल, बिलिंग या शिपिंग पते के फ़ॉर्म को अपने-आप भरने के लिए किया जा सकता है.

अपनी ऑनलाइन शॉपिंग कार्ट में Place Autocomplete की सुविधा शामिल करके, ये काम किए जा सकते हैं:

• पते की जानकारी डालने में होने वाली गड़बड़ियां कम करना.
• चेकआउट की प्रोसेस में लगने वाले चरणों की संख्या कम करना.
• मोबाइल या पहनने वाले डिवाइसों पर, पते की जानकारी डालने के अनुभव को आसान बनाना.
• किसी ग्राहक के ऑर्डर करने के लिए, कीस्ट्रोक और लगने वाले कुल समय को काफ़ी कम करना

जब उपयोगकर्ता, ऑटोकंप्लीट के एंट्री बॉक्स को चुनता है और टाइप करना शुरू करता है, तो पते के अनुमानों की सूची दिखती है:

जब उपयोगकर्ता, अनुमानों की सूची से कोई पता चुनता है, तो उस जवाब का इस्तेमाल करके, पते की पुष्टि की जा सकती है और जगह की जानकारी पाई जा सकती है. इसके बाद, आपका ऐप्लिकेशन, पते की जानकारी डालने वाले फ़ॉर्म के सही फ़ील्ड में जानकारी भर सकता है:

Place Autocomplete का इस्तेमाल शुरू करना

अपनी साइट में Place Autocomplete की सुविधा शामिल करने के लिए, JavaScript की कुछ लाइनें जोड़नी होंगी.

अपनी साइट में Maps JavaScript API शामिल किया जा सकता है और Places Library के बारे में बताया जा सकता है. भले ही, आपने कोई मैप न दिखाया हो. नीचे दिए गए उदाहरण में, ऐसा करने और इनिशियलाइज़ेशन फ़ंक्शन को लागू करने का तरीका बताया गया है.

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

इसके बाद, अपनी साइट पर उपयोगकर्ता के इनपुट के लिए एक टेक्स्ट बॉक्स जोड़ें:

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

आखिर में, ऑटोकंप्लीट की सुविधा को इनिशियलाइज़ करें और उसे नाम वाले टेक्स्ट बॉक्स से लिंक करें:

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

पिछले उदाहरण में, जब उपयोगकर्ता, पते के अनुमान को चुनता है, तब place_changed इवेंट लिसनर ट्रिगर होता है. साथ ही, fillInAddress फ़ंक्शन लागू होता है. नीचे दिए गए उदाहरण में दिखाया गया है कि यह फ़ंक्शन, चुने गए जवाब को लेता है और पते के कॉम्पोनेंट को निकालकर, उन्हें फ़ॉर्म में दिखाता है.

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

यह डेटा मिलने के बाद, इसका इस्तेमाल अपने उपयोगकर्ता के लिए मैच किए गए पते के तौर पर किया जा सकता है. कोड की कुछ लाइनें जोड़कर, यह पक्का किया जा सकता है कि ग्राहक कम समय में सही पता डाले.

इस कोड सैंपल में, पते की जानकारी डालने वाले फ़ॉर्म को भरने के लिए, काम करने वाला डेमो और पूरा सोर्स कोड देखें.

Place Autocomplete की सुविधा लागू करते समय ध्यान रखने वाली बातें

Place Autocomplete में कई विकल्प मिलते हैं. इनकी मदद से, विजेट के अलावा अन्य सुविधाओं का इस्तेमाल करने के लिए, अपनी ज़रूरत के हिसाब से बदलाव किए जा सकते हैं. जगहों को सटीक तरीके से मैच करने के लिए, सेवाओं के कॉम्बिनेशन का इस्तेमाल किया जा सकता है.

• पते के फ़ॉर्म के लिए, types पैरामीटर को address पर सेट करें, ताकि सिर्फ़ पूरे पते मैच हों. Place Autocomplete के अनुरोधों में इस्तेमाल किए जा सकने वाले टाइप के बारे में ज़्यादा जानें.
• अगर आपको दुनिया भर में खोज करने की ज़रूरत नहीं है, तो सही पाबंदियां और पूर्वाग्रह सेट करें. मैच को खास इलाकों तक सीमित करने या उनमें पूर्वाग्रह सेट करने के लिए, कई पैरामीटर का इस्तेमाल किया जा सकता है.
  • किसी इलाके के लिए, आयताकार सीमाएं सेट करने के लिए, bounds का इस्तेमाल करें. का इस्तेमाल करके, यह पक्का करें कि सिर्फ़ उन इलाकों के पते दिखाए जाएं.strictBounds
  • जवाबों को कुछ देशों तक सीमित करने के लिए, componentRestrictions का इस्तेमाल करें.
• फ़ील्ड को एडिट किया जा सकने वाला छोड़ें, ताकि अगर मैच में कुछ फ़ील्ड छूट जाएं, तो ग्राहक ज़रूरत पड़ने पर पते को अपडेट कर सकें. Place Autocomplete से मिलने वाले ज़्यादातर पतों में, अपार्टमेंट, सुइट या यूनिट नंबर जैसे सबप्रमाइस नंबर शामिल नहीं होते. इसलिए, इस उदाहरण में, फ़ोकस को पता लिखने की दूसरी लाइन पर ले जाया जाता है, ताकि उपयोगकर्ता ज़रूरत पड़ने पर वह जानकारी डाल सके.

जब आपका ग्राहक अपना पता डालता है, तो उसे स्टैटिक मैप की मदद से, डिलीवरी या पिकअप की जगह की विज़ुअल पुष्टि दिखाएं. इससे ग्राहक को यह भरोसा मिलता है कि पता सही है. साथ ही, डिलीवरी या पिकअप में होने वाली गड़बड़ियां कम होती हैं. स्टैटिक मैप को, पते की जानकारी डालने वाले पेज पर दिखाया जा सकता है. इसके अलावा, लेन-देन पूरा होने के बाद, इसे पुष्टि करने वाले ईमेल में भी शामिल किया जा सकता है.

Maps Static API की मदद से, इन दोनों इस्तेमाल के उदाहरणों को लागू किया जा सकता है. इससे किसी पेज या ईमेल में मौजूद किसी भी इमेज टैग में, मैप का इमेज वर्शन जोड़ा जा सकता है.

Maps Static API का इस्तेमाल शुरू करना

Maps Static API का इस्तेमाल, वेब सेवा कॉल के ज़रिए किया जा सकता है. इससे आपके बताए गए पैरामीटर के आधार पर, मैप की इमेज वाला वर्शन बनता है. डाइनैमिक मैप की तरह, मैप का टाइप तय किया जा सकता है. साथ ही, क्लाउड पर आधारित वही स्टाइल इस्तेमाल की जा सकती हैं और जगह की पहचान करने के लिए मार्कर जोड़े जा सकते हैं.

नीचे दिए गए कॉल में, रोडमैप दिखाया गया है. इसका साइज़ 600x300 पिक्सल है. यह कैलिफ़ोर्निया के माउंटेन व्यू में मौजूद Googleplex पर केंद्रित है. साथ ही, इसमें ज़ूम करने का लेवल 13 है. इसमें, डिलीवरी की जगह के लिए नीले रंग का मार्कर और ऑनलाइन मैप की स्टाइल भी तय की गई है.

      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
      

इसे इन सेक्शन में बांटा गया है:

अनुरोध के जवाब में, यह इमेज मिलती है:

Maps Static API के विकल्पों के बारे में ज़्यादा जानकारी के लिए, दस्तावेज़ देखें.

Place Autocomplete की कुछ ऐडवांस सुविधाओं का फ़ायदा उठाकर, ग्राहकों के अनुभव को और बेहतर बनाया जा सकता है. पते की जानकारी डालने वाले ऑटोकंप्लीट बॉक्स को बेहतर बनाने के लिए यहां कुछ सुझाव दिए गए हैं:

• stars उपयोगकर्ताओं को किसी कारोबार या दिलचस्पी की जगह के नाम के आधार पर पता डालने की अनुमति दें. "टाइप अहेड" की सुविधा, सिर्फ़ पतों के लिए काम नहीं करती. इसके अलावा, कारोबार या लैंडमार्क के नाम डालने की अनुमति भी दी जा सकती है. जब कोई उपयोगकर्ता, कारोबार का नाम डालता है, तो Place Details को कॉल करके, पता वापस पाया जा सकता है. पते और जगह के नाम, दोनों को डालने की अनुमति देने के लिए, ऑटोकंप्लीट की परिभाषा से types प्रॉपर्टी हटाएं.
• stars अपनी वेबसाइट की स्टाइल के हिसाब से, Place Autocomplete बॉक्स के लुक और स्टाइल में बदलाव करें. शॉपिंग कार्ट के लुक और स्टाइल के हिसाब से, ऑटोकंप्लीट विजेट की स्टाइल भी बदली जा सकती है. विजेट के दिखने के तरीके में बदलाव करने के लिए, सीएसएस क्लास का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, ऑटोकंप्लीट की स्टाइल बदलना देखें.
• stars कस्टम यूज़र इंटरफ़ेस (यूआई) बनाना. अगर Google के डिज़ाइन किए गए यूआई के बजाय, कस्टम यूआई बनाना है, तो दिए गए इनपुट के लिए अनुमान पाने के लिए, Place Autocomplete की सुविधा को प्रोग्राम के ज़रिए कॉल करें. Place Autocomplete के अनुमानों को JavaScript, Android, और iOS में प्रोग्राम के ज़रिए पाया जा सकता है. साथ ही, Places API के ज़रिए, वेब सेवाओं के एपीआई को सीधे कॉल किया जा सकता है.