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

खास जानकारी

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

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

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

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

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

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

• Maps JavaScript API
• Location API
• Maps का स्टैटिक एपीआई

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

तरीके सेक्शन

नीचे कुछ सलाह और कस्टमाइज़ेशन दिए गए हैं, जिन पर हम इस विषय में चर्चा करेंगे.

• check_circle_filled अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है सही के निशान का आइकॉन, आम तौर पर इस्तेमाल किया जाता है.
• stars अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है स्टार आइकॉन का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, इसे अपनी पसंद के मुताबिक बनाने का सुझाव दिया जाता है समाधान को बेहतर बनाना.

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

अपने ऑनलाइन खरीदारी कार्ट में स्थान ऑटोकंप्लीट शामिल करके, आप ये कर सकते हैं:

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

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

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

स्थान ऑटोकंप्लीट के साथ शुरू करना

इसमें शामिल करने के लिए JavaScript कोड की कुछ ही लाइनों की ज़रूरत होती है आपकी साइट.

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

<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

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

इसमें पता प्रविष्टि फ़ॉर्म को भरने के लिए एक चालू डेमो और पूरा सोर्स कोड देखें कोड नमूना.

स्थान ऑटोकंप्लीट लागू करते समय ध्यान रखने वाली बातें

ऑटोकंप्लीट की सुविधा में ऐसे कई विकल्प मौजूद हैं जिनकी मदद से, इसे अपने हिसाब से बनाया जा सकता है लागू करें. एक से ज़्यादा विकल्प इस्तेमाल करने के लिए, सेवाओं का इस्तेमाल कर सकें, ताकि आपको जगह के हिसाब से सही जानकारी मिल सके.

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

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

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

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

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

नीचे दिया गया कॉल, Googleplex पर 600x300px के साइज़ वाला एक रोडमैप दिखाता है में ज़ूम लेवल 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 स्टैटिक एपीआई के विकल्पों के बारे में ज़्यादा जानने के लिए, दस्तावेज़.

इनमें से कुछ ऐडवांस सेटिंग का इस्तेमाल करके, ग्राहक के अनुभव को और बेहतर बनाया जा सकता है ऐसी सुविधाएं जो स्थान ऑटोकंप्लीट की सुविधा देनी चाहिए. आपकी साइट को बेहतर बनाने के लिए यहां कुछ सलाह दी गई हैं ऑटोकंप्लीट पता एंट्री बॉक्स:

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