requestAutocomplete

मेरा समय बर्बाद न करें, पैसे ले लें

Jake Archibald

परिचय

मुझे वेब पसंद है. कुल मिलाकर, मुझे लगता है कि यह एक अच्छा आइडिया है. इसलिए, मुझे वेब बनाम नेटिव ऐप्लिकेशन के बारे में बहुत सारी बहसों में हिस्सा लेना पड़ता है. स्थानीय सिस्टम से पेमेंट करने की आसानी के बारे में, दूसरे व्यक्ति को बताने में ज़्यादा समय नहीं लगता. आम तौर पर, मैं धुएं वाला बम फेंककर, हंसते-हंसते कमरे से बाहर भाग जाती हूं. ऐसा इसलिए, क्योंकि इस बातचीत में मैं जीत नहीं सकती. मोबाइल वेब पर शॉपिंग कार्ट छोड़ने की दर 97%तक हो सकती है. असल दुनिया में इसकी कल्पना करें. कल्पना करें कि किसी सुपरमार्केट में 97% लोग, अपनी पसंद की चीज़ों से भरा कार्ट लेकर, उसे पलटकर बाहर निकल रहे हैं. अब, उनमें से कुछ लोग सिर्फ़ सामान की कीमत बढ़ा रहे हैं और उनका कभी भी खरीदारी करने का इरादा नहीं था. हालांकि, वेब पर खरीदारी करने के खराब अनुभव की वजह से, ऐसा हो सकता है. हम उपयोगकर्ताओं की संवेदनशीलता पर टैक्स लगा रहे हैं. वेब पर, खास तौर पर मोबाइल पर पेमेंट करने के अपने अनुभव के बारे में सोचें. यह एक ऐप स्टोर है, है ना? इसके अलावा, आपके पास कम से कम ऐसा क्लोज़्ड सिस्टम होना चाहिए जिसमें पहले से ही आपके पेमेंट का तरीका सेव हो. यह एक समस्या है. इसके लिए, साइटों को किसी ऐसे पेमेंट प्रोवाइडर के साथ काम करने की ज़रूरत होती है जिसका खाता उपयोगकर्ता के पास पहले से हो और उसमें लॉग इन किया गया हो. इसके अलावा, साइटों को किसी ऐसे प्लैटफ़ॉर्म के साथ भी काम करना पड़ सकता है जिसके लिए उपयोगकर्ताओं को किसी पेमेंट प्रोवाइडर में लॉग इन करना पड़े. जैसे, ऐप्लिकेशन स्टोर, जिसके लिए आपको सिर्फ़ उस प्लैटफ़ॉर्म के लिए कोड बनाना पड़ता है. अगर इनमें से कोई एक काम नहीं किया जाता है, तो उपयोगकर्ता को अपनी स्क्रीन या कीबोर्ड पर तब तक टैप करना पड़ेगा, जब तक उसकी उंगलियों की त्वचा पूरी तरह से नहीं उतर जाती या वह टैप करना बंद नहीं कर देता. हमें इसे ठीक करना होगा.

requestAutocomplete

WebGL, WebRTC, और “Web” से शुरू होने वाले अन्य शानदार वेब एपीआई की दुनिया में, requestAutocomplete काफ़ी सामान्य है. हालांकि, यह एक सुपरहीरो है, जिसने बेज रंग के कपड़े पहने हैं. एक छोटा और बोरिंग एपीआई, जो वेब पेमेंट के समय-पिशाच के दिल में एक डंडा डाल सकता है.

यह साइट, पेमेंट की सेवा देने वाली किसी खास कंपनी पर भरोसा करने के बजाय, ब्राउज़र से पेमेंट की जानकारी का अनुरोध करती है. ब्राउज़र, उपयोगकर्ता की ओर से इस जानकारी को सेव करता है. requestAutocomplete() के Chrome वर्शन को भी Google Wallet के साथ इंटिग्रेट किया गया है. हालांकि, यह सुविधा फ़िलहाल सिर्फ़ अमेरिका के उपयोगकर्ताओं के लिए उपलब्ध है. हमारी टेस्ट साइट पर इसे आज़माएं.

form.requestAutocomplete

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

button.addEventListener('click', function(event) {
  form.requestAutocomplete();
  event.preventDefault();
});

// TODO: listen for autocomplete events on the form

इवेंट देखने से पहले, हमें यह पक्का करना होगा कि ब्राउज़र आपके फ़ॉर्म फ़ील्ड को समझता हो…

फ़ॉर्म से जुड़ी ज़रूरी शर्तें

जब इंटरनेट का इस्तेमाल ब्लैक ऐंड व्हाइट में किया जाता था, तब Internet Explorer 5 ने फ़ॉर्म इनपुट एलिमेंट पर एक नया एट्रिब्यूट, autocomplete इस्तेमाल किया था. ब्राउज़र को सुझाव देने से रोकने के लिए, इसे “बंद” पर सेट किया जा सकता था. इस एपीआई को बढ़ाया गया था, ताकि आप “name” एट्रिब्यूट में बदलाव किए बिना, फ़ील्ड के अनुमानित कॉन्टेंट की जानकारी दे सकें. requestAutocomplete, फ़ॉर्म फ़ील्ड को उपयोगकर्ता के डेटा से लिंक करने के लिए इसका इस्तेमाल करता है.

<input name="fullname" autocomplete="name">

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

फ़िलहाल, Chrome में requestAutocomplete इन चीज़ों को पहचानता है:

पेमेंट

• ईमेल
• cc-name - कार्ड पर मौजूद नाम
• cc-number - कार्ड नंबर
• cc-exp-month - कार्ड की समयसीमा खत्म होने का महीना, दो अंकों में
• cc-exp-year - कार्ड की समयसीमा खत्म होने की तारीख, चार अंकों में
• cc-csc - कार्ड का तीन से चार अंकों का सुरक्षा कोड

<input type="email" autocomplete="email" name="email">
<input type="text" autocomplete="cc-name" name="card-name">
<input type="text" autocomplete="cc-number" name="card-num">
<input type="text" autocomplete="cc-exp-month" name="card-exp-month">
<input type="text" autocomplete="cc-exp-year" name="card-exp-year">
<input type="text" autocomplete="cc-csc" name="card-csc">

मैंने ऊपर “name” एट्रिब्यूट के लिए जो वैल्यू इस्तेमाल की हैं वे सिर्फ़ उदाहरण हैं. किसी खास वैल्यू का इस्तेमाल करना ज़रूरी नहीं है. अगर आपको requestAutocomplete के बिना उपयोगकर्ताओं के लिए इस फ़ॉर्म का फिर से इस्तेमाल करना है, तो आपको लेबल, लेआउट, और एचटीएमएल5 की बुनियादी पुष्टि जोड़नी होगी. यह सबसे सही तरीका है.

आपको इनपुट एलिमेंट के अलावा, किसी भी तरह के फ़ॉर्म इनपुट का इस्तेमाल करने की अनुमति है. उदाहरण के लिए, कार्ड की समयसीमा खत्म होने की तारीख वाले फ़ील्ड के लिए <select> का इस्तेमाल किया जा सकता है.

पता

• name - पूरा नाम. पूरे नाम को एक फ़ील्ड के तौर पर सेव करना, एक से ज़्यादा फ़ील्ड के तौर पर सेव करने से काफ़ी बेहतर है. पहला नाम और उपनाम जैसे कई फ़ील्ड, पश्चिमी संस्कृति के हिसाब से होते हैं. हो सकता है कि ये अन्य संस्कृतियों के हिसाब से सही न हों. साथ ही, एक ही फ़ील्ड में टाइप करना आसान होता है

• tel - देश कोड के साथ पूरा टेलीफ़ोन नंबर, इसे इनमें बांटा जा सकता है

  • tel-country-code - उदाहरण के लिए, +44
  • tel-national - बाकी

• street-address - कॉमा लगाकर अलग किए गए कॉम्पोनेंट वाला पूरा पता, जिसे इनमें बांटा जा सकता है

  • address-line1
  • address-line2 - यह फ़ील्ड खाली हो सकता है

• इलाका - शहर/कस्बा

• क्षेत्र - राज्य का कोड, काउंटी या कांटोन

• postal-code - पिन कोड, पिन कोड, पिन कोड

• country

ऊपर दिए गए एट्रिब्यूट का इस्तेमाल इनके साथ किया जाना चाहिए: - बिलिंग - शिपिंग

<input type="text" autocomplete="billing name" required name="billing-name">
<input type="tel" autocomplete="billing tel" required name="billling-tel">
<input type="text" autocomplete="billing address-line1" required name="billing-address1">
<input type="text" autocomplete="billing address-line2" required name="billing-address2">
<input type="text" autocomplete="billing locality" required name="billing-locality">
<input type="text" autocomplete="billing region" required name="billing-region">
<input type="text" autocomplete="billing postal-code" required name="billing-postal-code">
<select autocomplete="billing country" required name="billing-country">
  <option value="US">United States</option>
  …
</select>

<input type="text" autocomplete="shipping name" name="shipping-name">
…

फिर से बता दें कि नाम एट्रिब्यूट के लिए दिए गए उदाहरण हैं. आपके पास अपनी पसंद का नाम इस्तेमाल करने का विकल्प है. यह ज़रूरी नहीं है कि सभी फ़ॉर्म में शिपिंग पते का अनुरोध किया जाए. उदाहरण के लिए, मुझसे यह न पूछें कि मुझे होटल का कमरा कहां डिलीवर करना है, क्योंकि अक्सर होटल की मौजूदा जगह ही उसकी खास बात होती है. ठीक है, तो हमें अपना फ़ॉर्म मिल गया है और हमें autocompletion का अनुरोध करने का तरीका पता है. हालांकि…

requestAutocomplete को कब कॉल किया जाना चाहिए?

आम तौर पर, चेकआउट फ़ॉर्म दिखाने वाले पेज को लोड करने के बजाय, requestAutocomplete डायलॉग दिखाना बेहतर होता है. अगर सब कुछ ठीक से काम करता है, तो उपयोगकर्ता को फ़ॉर्म नहीं दिखेगा.

आम तौर पर, कार्ट पेज पर “चेकआउट” बटन होता है. इस बटन पर क्लिक करने पर, आपको पेमेंट की जानकारी वाले फ़ॉर्म पर ले जाया जाता है. इस स्थिति में, आपको कार्ट पेज पर अपना बिलिंग फ़ॉर्म लोड करना है, लेकिन उपयोगकर्ता से उसे छिपाना है. साथ ही, जब उपयोगकर्ता “चेकआउट” बटन दबाए, तो उस पर requestAutocomplete को कॉल करना है. याद रखें, Skeletor चेतावनी से बचने के लिए, आपको अपने कार्ट पेज को एसएसएल के ज़रिए दिखाना होगा. सबसे पहले, हमें अपना चेकआउट बटन छिपाना चाहिए, ताकि उपयोगकर्ता तब तक उस पर क्लिक न कर सके, जब तक हम तैयार न हो जाएं. हालांकि, हम ऐसा सिर्फ़ उन उपयोगकर्ताओं के लिए करना चाहते हैं जिनके पास JavaScript है. इसलिए, अपने पेज के हेडर में:

<script>document.documentElement.className += ' js';</script>

साथ ही, अपनी सीएसएस में:

.js #checkout-button,
#checkout-form.for-autocomplete {
  display: none;
}

हमें अपने कार्ट पेज पर बिलिंग फ़ॉर्म शामिल करना होगा. इसे कहीं भी रखा जा सकता है. ऊपर दी गई सीएसएस यह पक्का करती है कि यह उपयोगकर्ता को न दिखे.

<form id="checkout-form" class="for-autocomplete" action="/checkout" method="post">
  …fields for payment, billing address &amp; shipping if relevant…
</form>

अब हमारा JavaScript, सब कुछ सेट अप करना शुरू कर सकता है:

function enhanceForm() {
  var button = document.getElementById('checkout-button');
  var form = document.getElementById('checkout-form');

  // show the checkout button
  button.style.display = 'block';

  // exit early if there's no requestAutocomplete support
  if (!form.requestAutocomplete) {
    // be sure to show the checkout button so users can
    // access the basic payment form!
    return;
  }

  button.addEventListener('click', function(event) {
    form.requestAutocomplete();
    event.preventDefault();
  });

  // TODO: listen for autocomplete events on the form
}

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

आपने requestAutocomplete को कॉल किया है, अब क्या करना है?

अपने-आप पूरा होने की प्रोसेस असिंक्रोनस होती है. requestAutocomplete तुरंत दिखता है. यह जानने के लिए कि यह कैसे हुआ, हम कुछ नए इवेंट सुनते हैं:

form.addEventListener('autocomplete', function() {
  // hurrah! You got all the data you needed
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    // the form was populated, but it failed html5 validation
    // eg, the data didn't match one of your pattern attributes
  }
  else if (event.reason == 'cancel') {
    // the user aborted the process
  }
  else if (event.reason == 'disabled') {
    // the browser supports requestAutocomplete, but it's not
    // available at this time. Eg, it wasn't called from an
    // interaction event or the page is insecure
  }
});

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

form.addEventListener('autocomplete', function() {
  form.submit();
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    form.submit();
  }
  else if (event.reason != 'cancel') {
    window.location = '/checkout-page/';
  }
});

ब्राउज़र मेरा डेटा कहां सेव करता है?

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

आसानी से पेमेंट करना

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

बोनस राउंड: एक से ज़्यादा पेजों वाले फ़ॉर्म मैनेज करना

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

checkoutButton.addEventListener('click', function() {
  requestUserData({
    billing: true,
    shipping: true
  }, function(response) {
    if (response.err == 'cancel') {
      // exit silently
      return;
    }
    if (response.err) {
      // fall back to normal form
      window.location.href = '/normal-checkout-form/';
      return;
    }

    // the rest is just made-up pseudo code as an example
    postToServer(data.shipping).then(function() {
      return postToServer(data.billing);
    }).then(function() {
      return postToServer(data.cc);
    }).catch(function() {
      // handle error
    });
  });
});