पेमेंट फ़ॉर्म, चेकआउट की प्रोसेस का सबसे अहम हिस्सा होते हैं. पेमेंट फ़ॉर्म का डिज़ाइन खराब होने की वजह से, अक्सर लोग शॉपिंग कार्ट में सामान छोड़कर चले जाते हैं.
एक ऐसा फ़ॉर्म बनाएं जिससे उपयोगकर्ताओं के लिए, डेस्कटॉप और मोबाइल पर पेमेंट की जानकारी डालना आसान हो. पक्का करें कि फ़ॉर्म में, ब्राउज़र में पहले से मौजूद सुविधाओं का ज़्यादा से ज़्यादा इस्तेमाल किया गया हो. जैसे, ऑटोमैटिक तरीके से भरने, पुष्टि करने, और डेटा डालने से जुड़ी पाबंदियां.
इन्हें कैसे लागू करें
पेमेंट फ़ॉर्म को बेहतर बनाने के लिए, यहां सबसे ज़रूरी दिशा-निर्देश दिए गए हैं.
सही और मान्य एचटीएमएल का इस्तेमाल करना
फ़ॉर्म बनाने के लिए, एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा इस्तेमाल करें:
<form>,<input>,<label>, और<button>type,autocomplete, औरinputmode
इनसे ब्राउज़र में पहले से मौजूद सुविधाएं चालू होती हैं, सुलभता बेहतर होती है, और मार्कअप को बेहतर तरीके से समझा जा सकता है.
डेटा डालने के लिए, फ़ॉर्म फ़ील्ड को लेबल करने के लिए <label> एलिमेंट का इस्तेमाल करना
किसी <input>, <select> या <textarea> को लेबल करने के लिए, <label> का इस्तेमाल करें. लेबल के for एट्रिब्यूट को इनपुट के id एट्रिब्यूट की वैल्यू के बराबर वैल्यू देकर, लेबल को इनपुट से जोड़ें.
एचटीएमएल एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना
उपयोगकर्ताओं के लिए डेटा डालना आसान बनाएं. इसके लिए, सही <input> एलिमेंट <type> एट्रिब्यूट का इस्तेमाल करें, ताकि मोबाइल पर सही कीबोर्ड उपलब्ध कराया जा सके. साथ ही, ब्राउज़र से पहले से मौजूद बुनियादी पुष्टि की सुविधा चालू करें.
ईमेल पतों के लिए हमेशा type="email" और फ़ोन नंबर के लिए type="tel" का इस्तेमाल करें.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
हर <input>, <select>, और <textarea> एलिमेंट में सही autocomplete एट्रिब्यूट होना चाहिए. इससे सुलभता को बेहतर बनाने और उपयोगकर्ताओं को डेटा फिर से डालने से बचने में मदद मिलती है.
बटनों को मददगार बनाएं
बटन के लिए <button> का इस्तेमाल करें. <input type="submit"> का भी इस्तेमाल किया जा सकता है. हालांकि, बटन के तौर पर div या किसी अन्य एलिमेंट का इस्तेमाल न करें. बटन एलिमेंट, सुलभता से जुड़ी सुविधाएं देते हैं. इनमें फ़ॉर्म सबमिट करने की सुविधा पहले से मौजूद होती है. साथ ही, इन्हें आसानी से स्टाइल किया जा सकता है.
फ़ॉर्म सबमिट करने वाले हर बटन को एक ऐसी वैल्यू दें जिससे पता चले कि वह क्या करता है. चेकआउट की प्रोसेस के हर चरण के लिए, जानकारी देने वाले कॉल-टू-ऐक्शन का इस्तेमाल करें. इससे खरीदार को अपनी प्रोग्रेस दिखती है और अगले चरण के बारे में साफ़ तौर पर पता चलता है. उदाहरण के लिए, डिलीवरी के पते वाले फ़ॉर्म पर मौजूद 'सबमिट करें' बटन को जारी रखें या सेव करें के बजाय, पेमेंट के लिए आगे बढ़ें के तौर पर लेबल करें.
जहां हो सके वहां नाम के लिए एक ही इनपुट फ़ील्ड का इस्तेमाल करें
अपने उपयोगकर्ताओं को एक ही इनपुट का इस्तेमाल करके अपना नाम डालने की अनुमति दें. हालांकि, अगर आपके पास नाम, सरनेम, सम्मानसूचक शब्द या नाम के अन्य हिस्सों को अलग-अलग सेव करने की कोई ठोस वजह है, तो ऐसा किया जा सकता है. नाम के लिए एक ही फ़ील्ड का इस्तेमाल करने से, फ़ॉर्म भरना आसान हो जाता है. इससे कट-ऐंड-पेस्ट करने की सुविधा चालू हो जाती है और ऑटोमैटिक तरीके से भरने की सुविधा का इस्तेमाल करना आसान हो जाता है.
अंतरराष्ट्रीय नामों को अनुमति दें. पुष्टि करने के लिए, ऐसे रेगुलर एक्सप्रेशन का इस्तेमाल करने से बचें जो सिर्फ़ लैटिन वर्णों से मैच करते हों. 'सिर्फ़ लैटिन' विकल्प चुनने पर, उन उपयोगकर्ताओं को शामिल नहीं किया जाता जिनके नाम या पते में ऐसे वर्ण शामिल होते हैं जो लैटिन वर्णमाला में नहीं हैं. इसके बजाय, यूनिकोड लेटर मैचिंग की अनुमति दें. साथ ही, पक्का करें कि आपका बैकएंड, इनपुट और आउटपुट, दोनों के तौर पर यूनिकोड को सुरक्षित तरीके से इस्तेमाल करता हो. मॉडर्न ब्राउज़र, रेगुलर एक्सप्रेशन में यूनिकोड का इस्तेमाल करने की सुविधा देते हैं.
अलग-अलग फ़ॉर्मैट में पते डालने की अनुमति दें
पेमेंट फ़ॉर्म में पते के लिए फ़ॉर्म फ़ील्ड जोड़ते समय, पते के अलग-अलग फ़ॉर्मैट का ध्यान रखें. ऐसा तब भी करें, जब पता एक ही देश का हो. "सामान्य" पतों के बारे में अनुमान न लगाएं.
अगर आपके डेटा की ज़रूरी शर्तों के मुताबिक ऐसा करना संभव है, तो पते के लिए एक ही <textarea> एलिमेंट का इस्तेमाल करें. यह स्थानीय और अंतरराष्ट्रीय पतों के अलग-अलग फ़ॉर्मैट के लिए सबसे सही विकल्प है.
बिलिंग पते के लिए ऑटोकंप्लीट की सुविधा का इस्तेमाल करना
डिफ़ॉल्ट रूप से, बिलिंग पते को डिलीवरी पते के तौर पर सेट करें. बिलिंग पते को फ़ॉर्म में दिखाने के बजाय, बिलिंग पते में बदलाव करने के लिए लिंक दें या खास जानकारी और जानकारी वाले एलिमेंट का इस्तेमाल करें. इससे विज़ुअल क्लटर कम होता है.
बिलिंग पते के लिए, अपने-आप पूरा होने वाली सही वैल्यू का इस्तेमाल करें. ठीक वैसे ही जैसे शिपिंग पते के लिए किया जाता है. इससे उपयोगकर्ता को एक से ज़्यादा बार डेटा डालने की ज़रूरत नहीं पड़ती. अगर आपके पास अलग-अलग सेक्शन में एक ही नाम के इनपुट के लिए अलग-अलग वैल्यू हैं, तो ऑटोकंप्लीट एट्रिब्यूट में प्रीफ़िक्स जोड़ें. उदाहरण के लिए:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
चेकआउट की प्रोग्रेस दिखाना
पेमेंट के हर चरण के लिए, पेज के हेडिंग और बटन की जानकारी देने वाली वैल्यू का इस्तेमाल करें. इससे यह साफ़ तौर पर पता चलता है कि अब क्या करना है और चेकआउट का अगला चरण क्या है.
मोबाइल कीबोर्ड के Enter बटन का लेबल सेट करने के लिए, फ़ॉर्म इनपुट पर enterkeyhint एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए, कई पेजों वाले फ़ॉर्म में enterkeyhint="previous" और enterkeyhint="next" का इस्तेमाल करें. फ़ॉर्म में आखिरी इनपुट के लिए enterkeyhint="done" और खोज इनपुट के लिए enterkeyhint="search" का इस्तेमाल करें.
उपयोगकर्ताओं को पेमेंट की जानकारी फिर से डालने से बचाना
पेमेंट कार्ड के फ़ॉर्म में, autocomplete की सही वैल्यू जोड़ें. ऑटोकंप्लीट की सुविधा के बिना, उपयोगकर्ता पेमेंट के लिए इस्तेमाल होने वाले कार्ड की जानकारी का फ़िज़िकल रिकॉर्ड रख सकते हैं या उसे असुरक्षित तरीके से सेव कर सकते हैं.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
इनपुट के ऊपर फ़ॉर्मैट के संकेत दिखाएं
अगर किसी फ़ील्ड के लिए कोई फ़ॉर्मैट ज़रूरी है (उदाहरण के लिए, MM/YY की समयसीमा खत्म होने की तारीख), तो इनपुट के ऊपर दिखने वाले एलिमेंट में हिंट डालें. साथ ही, दोनों को aria-describedby से लिंक करें, जैसा कि ऊपर दिए गए cc-exp उदाहरण में दिखाया गया है. इनपुट के नीचे मौजूद हिंट, मोबाइल कीबोर्ड या जानकारी अपने-आप भरने की सुविधा के पॉपओवर से आसानी से छिप जाते हैं. ऐसा तब होता है, जब उपयोगकर्ता को उनकी ज़रूरत होती है.
फ़ॉर्मैट के बारे में बताने के लिए, सिर्फ़ placeholder एट्रिब्यूट पर भरोसा न करें. साथ ही, इसे कभी भी <label> के बजाय इस्तेमाल न करें: उपयोगकर्ता के टाइप करना शुरू करते ही प्लेसहोल्डर टेक्स्ट छिप जाता है. इसलिए, बदलाव करते समय इसकी जांच नहीं की जा सकती. लेबल और हमेशा दिखने वाले हिंट के साथ, प्लेसहोल्डर का इस्तेमाल अतिरिक्त संकेत के तौर पर किया जा सकता है.
सुरक्षा कोड को न छिपाएं
कार्ड के सुरक्षा कोड के लिए, type="password" के बजाय inputmode="numeric" के साथ type="text" का इस्तेमाल करें. उपयोगकर्ता, मास्क किए गए तीन या चार अंकों के कोड में टाइपिंग की गड़बड़ियां नहीं देख सकते. इसलिए, टाइपिंग की गड़बड़ी का पता तब तक नहीं चलता, जब तक पेमेंट अस्वीकार नहीं हो जाता. साथ ही, मास्क करने से थोड़ी सुरक्षा मिलती है, क्योंकि कोड उस कार्ड पर प्रिंट होता है जो उपयोगकर्ता के पास होता है.
पेमेंट कार्ड और फ़ोन नंबर के लिए, एक ही इनपुट का इस्तेमाल करें
पेमेंट के लिए इस्तेमाल होने वाले कार्ड और फ़ोन नंबर के लिए, एक ही इनपुट का इस्तेमाल करें: नंबर को अलग-अलग हिस्सों में न बांटें. इससे उपयोगकर्ताओं के लिए डेटा डालना आसान हो जाता है. साथ ही, पुष्टि करना आसान हो जाता है और ब्राउज़र, जानकारी अपने-आप भर पाते हैं. पिन और बैंक कोड जैसे अन्य न्यूमेरिक डेटा के लिए भी ऐसा ही करें.
ध्यान से पुष्टि करें
आपको रीयल टाइम में और फ़ॉर्म सबमिट करने से पहले, डेटा एंट्री की पुष्टि करनी चाहिए. ऐसा करने का एक तरीका यह है कि पेमेंट के लिए इस्तेमाल होने वाले कार्ड के इनपुट में, पैटर्न एट्रिब्यूट जोड़ा जाए. अगर उपयोगकर्ता, अमान्य वैल्यू के साथ पेमेंट फ़ॉर्म सबमिट करने की कोशिश करता है, तो ब्राउज़र चेतावनी वाला मैसेज दिखाता है और इनपुट पर फ़ोकस सेट करता है.
हालांकि, आपके पैटर्न का रेगुलर एक्सप्रेशन इतना फ़्लेक्सिबल होना चाहिए कि वह पेमेंट कार्ड नंबर की रेंज को हैंडल कर सके: 14 अंकों (या इससे कम) से लेकर 20 अंकों (या इससे ज़्यादा) तक. कार्ड सुरक्षा कोड (इन्हें CSC, CVC, CVV या अन्य नामों से भी जाना जाता है) में तीन या चार अंक होते हैं.
उपयोगकर्ताओं को पेमेंट के लिए इस्तेमाल होने वाले नए कार्ड का नंबर डालते समय स्पेस शामिल करने की अनुमति दें. ऐसा इसलिए, क्योंकि प्लास्टिक कार्ड पर नंबर इसी तरह दिखाए जाते हैं. यह उपयोगकर्ता के लिए ज़्यादा आसान है. आपको उन्हें यह नहीं बताना होगा कि "उन्होंने कुछ गलत किया है". साथ ही, इससे कन्वर्ज़न फ़्लो में रुकावट आने की संभावना कम हो जाती है. इसके अलावा, प्रोसेस करने से पहले नंबरों के बीच से स्पेस हटाना आसान हो जाता है.
उपयोगकर्ताओं को गलती से डेटा फ़ील्ड छूटने से बचाने में मदद करना
ज़रूरी फ़ील्ड में required एट्रिब्यूट जोड़ें. मॉडर्न ब्राउज़र, छूटे हुए डेटा के लिए अपने-आप प्रॉम्प्ट देते हैं और फ़ोकस सेट करते हैं.
फ़ॉलबैक रणनीतियां
जानकारी अपने-आप भरने की सुविधा, परतदार वृद्धि है. जिन ब्राउज़र में जानकारी ऑटोमैटिक भरने की सुविधा काम नहीं करती उनमें उपयोगकर्ताओं को पेमेंट की जानकारी मैन्युअल तरीके से डालनी होगी. सिमैंटिक एचटीएमएल की पाबंदियां (जैसे, type, inputmode, pattern, और required) अब भी सही तरीके से काम करेंगी, ताकि उपयोगकर्ता के इनपुट की पुष्टि की जा सके और सही वर्चुअल कीबोर्ड उपलब्ध कराए जा सकें.