इस पेज का अनुवाद Cloud Translation API से किया गया है.

पेमेंट फ़ॉर्म के लिए सबसे सही तरीकों के लिए कोडलैब

Sam Dutton

इस कोडलैब से आपको पेमेंट का ऐसा तरीका बनाने का तरीका पता चलता है जो सुरक्षित, ऐक्सेस करने लायक, और इस्तेमाल करने में आसान हो.

पहला चरण: एचटीएमएल का सही तरीके से इस्तेमाल करना

जॉब के लिए बनाए गए एलिमेंट का इस्तेमाल करें:

<form>
<section>
<label>
<input>, <select>, <textarea>
<button>

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

प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

index.html में अपने फ़ॉर्म के एचटीएमएल को देखें.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

कार्ड नंबर, कार्ड पर मौजूद नाम, खत्म होने की तारीख, और सिक्योरिटी कोड के लिए <input> एलिमेंट हैं. ये सभी एलिमेंट, <section> एलिमेंट में रैप किए गए हैं और हर एलिमेंट का एक लेबल होता है. पेमेंट पूरा करें बटन, एचटीएमएल <button> है. इस कोडलैब में आगे, आपको ब्राउज़र की उन सुविधाओं के बारे में पता चलेगा जिन्हें इन एलिमेंट का इस्तेमाल करके ऐक्सेस किया जा सकता है.

ध्यान दें: <input> एलिमेंट के लिए क्लोज़िंग टैग नहीं होते. ऐसा इसलिए होता है, क्योंकि ये खाली एलिमेंट होते हैं: इनमें कोई कॉन्टेंट नहीं होता. किसी खाली एलिमेंट के आखिर में "/" वर्ण डालना ज़रूरी नहीं है: <input> या <input /> में से कोई भी वर्ण डाला जा सकता है.

पेमेंट फ़ॉर्म की झलक देखने के लिए, ऐप्लिकेशन देखें पर क्लिक करें.

क्या फ़ॉर्म ठीक से काम कर रहा है?
क्या आपको इसमें कुछ बदलाव करना है, ताकि यह बेहतर तरीके से काम कर सके?
मोबाइल पर क्या होगा?

अपने सोर्स कोड पर वापस लौटने के लिए, सोर्स देखें पर क्लिक करें.

दूसरा चरण: मोबाइल और डेस्कटॉप के लिए डिज़ाइन करना

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

आपको पैडिंग, मार्जिन, और फ़ॉन्ट साइज़ में बदलाव करके, यह पक्का करना होगा कि आपके फ़ॉर्म कई तरह के डिवाइसों पर ठीक से काम करें.

नीचे दी गई सभी सीएसएस को कॉपी करें और अपनी css/main.css फ़ाइल में चिपकाएं.

यह कई तरह की सीएसएस है! साइज़ में हुए बदलावों के बारे में आपको पता होना चाहिए:

padding और margin को इनपुट में जोड़ा गया है.
font-size और अन्य वैल्यू, व्यूपोर्ट के अलग-अलग साइज़ के लिए अलग-अलग होती हैं.

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

:invalid सिलेक्टर का इस्तेमाल करके, यह बताया जाता है कि किसी इनपुट में अमान्य वैल्यू कब है. (इसे बाद में कोडलैब में इस्तेमाल किया जा सकता है.)

सीएसएस, मोबाइल-फ़र्स्ट है:

डिफ़ॉल्ट सीएसएस, 400px से कम चौड़ाई वाले व्यूपोर्ट के लिए है.
मीडिया क्वेरी का इस्तेमाल, कम से कम 400px चौड़ाई वाले व्यूपोर्ट के लिए डिफ़ॉल्ट वैल्यू को बदलने के लिए किया जाता है. इसके बाद, कम से कम 500px चौड़ाई वाले व्यूपोर्ट के लिए भी ऐसा किया जाता है. यह छोटे फ़ोन, बड़ी स्क्रीन वाले मोबाइल डिवाइसों, और डेस्कटॉप पर अच्छी तरह से काम करना चाहिए.

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

क्या पूरा फ़ॉर्म दिख रहा है?
क्या फ़ॉर्म के इनपुट का साइज़ काफ़ी बड़ा है?
क्या सारा टेक्स्ट पढ़ा जा सकता है?
क्या आपको किसी असली मोबाइल डिवाइस का इस्तेमाल करने और Chrome DevTools में डिवाइस मोड में फ़ॉर्म देखने के बीच कोई अंतर दिख रहा है?
क्या आपको ब्रेकपॉइंट में बदलाव करने की ज़रूरत पड़ी?

अलग-अलग डिवाइसों पर अपने फ़ॉर्म की जांच करने के कई तरीके हैं:

मोबाइल डिवाइसों को सिम्युलेट करने के लिए, Chrome DevTools के डिवाइस मोड का इस्तेमाल करें.
यूआरएल को कंप्यूटर से अपने फ़ोन पर भेजें.
कई तरह के डिवाइसों और ब्राउज़र पर जांच करने के लिए, BrowserStack सेवा का इस्तेमाल करें.

तीसरा चरण: डेटा डालने में उपयोगकर्ताओं की मदद करने के लिए एट्रिब्यूट जोड़ना

ब्राउज़र में इनपुट वैल्यू को सेव और ऑटोमैटिक भरने की सुविधा चालू करें. साथ ही, पहले से मौजूद पेमेंट और पुष्टि करने की सुरक्षित सुविधाओं का ऐक्सेस दें.

अपनी index.html फ़ाइल में फ़ॉर्म में एट्रिब्यूट जोड़ें, ताकि यह इस तरह दिखे:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

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

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

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

cc-number
cc-name
cc-exp
cc-csc

कई ब्राउज़र, क्रेडिट कार्ड नंबर और सुरक्षा कोड की पुष्टि भी करते हैं.

मोबाइल डिवाइस पर यह भी दिखेगा कि कार्ड नंबर फ़ील्ड पर टैप करते ही, आपको अंकों वाला एक कीबोर्ड दिखने लगेगा. ऐसा इसलिए हुआ, क्योंकि आपने inputmode="numeric" का इस्तेमाल किया था. ऐसा करने से संख्या वाले फ़ील्ड में संख्याएं डालना आसान हो जाता है और बिना संख्या वाले वर्ण डालना आसान हो जाता है. साथ ही, इससे उपयोगकर्ता याद रख पाते हैं कि वे किस तरह का डेटा डाल रहे हैं.

पेमेंट फ़ॉर्म में, autocomplete की सभी उपलब्ध वैल्यू को सही तरीके से जोड़ना बहुत ज़रूरी है. कार्ड की समयसीमा खत्म होने की तारीख और दूसरे फ़ील्ड के लिए, autocomplete की वैल्यू का न होना आम बात है. अगर autofill एट्रिब्यूट की कोई वैल्यू गलत है या मौजूद नहीं है, तो उपयोगकर्ताओं को कार्ड का डेटा मैन्युअल तरीके से डालने के लिए, अपना असल कार्ड वापस लाना होगा. इससे, आपको बिक्री में कमी आ सकती है. अगर पेमेंट फ़ॉर्म में ऑटोमैटिक भरने की सुविधा ठीक से काम नहीं करती है, तो उपयोगकर्ता अपने फ़ोन या कंप्यूटर पर पेमेंट कार्ड की जानकारी का रिकॉर्ड भी रख सकते हैं. हालांकि, यह तरीका काफ़ी असुरक्षित है.

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

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

आपका पेमेंट फ़ॉर्म अब ऐसा दिखेगा:

autocomplete वैल्यू हटाकर, पेमेंट फ़ॉर्म भरकर देखें. आपको क्या समस्याएं आ रही हैं?
ऑनलाइन स्टोर पर पैसे चुकाने के फ़ॉर्म आज़माएं. देखें कि कौनसी चीज़ें अच्छी तरह से काम करती हैं और कौनसी नहीं. क्या आपको कोई सामान्य समस्या आ रही है या आपको कोई सबसे सही तरीका अपनाना चाहिए?

चौथा चरण: फ़ॉर्म सबमिट होने के बाद, पेमेंट बटन बंद करना

उपयोगकर्ता के टैप या क्लिक करने के बाद, सबमिट बटन को बंद कर देना चाहिए. ऐसा खास तौर पर तब करना चाहिए, जब उपयोगकर्ता पेमेंट कर रहा हो. कई उपयोगकर्ता बटन पर बार-बार टैप या क्लिक करते हैं, भले ही वे ठीक से काम कर रहे हों. इससे पेमेंट प्रोसेस करने में समस्याएं आ सकती हैं और सर्वर पर लोड बढ़ सकता है.

अपनी js/main.js फ़ाइल में यह JavaScript जोड़ें:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

पेमेंट फ़ॉर्म सबमिट करके देखें कि क्या होता है.

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

कुछ टिप्पणियों और validate() फ़ंक्शन के साथ, इस समय आपका कोड ऐसा दिखेगा:

आपको पता चलेगा कि JavaScript में डेटा की पुष्टि करने के लिए, टिप्पणी वाला कोड शामिल है. यह कोड, Constraint Validation API का इस्तेमाल करके, कस्टम पुष्टि करने की सुविधा जोड़ता है. यह एपीआई काफ़ी लोकप्रिय है. यह फ़ोकस सेट करने और प्रॉम्प्ट दिखाने के लिए, ब्राउज़र के पहले से मौजूद यूज़र इंटरफ़ेस (यूआई) को ऐक्सेस करता है. कोड से टिप्पणी हटाएं और इसे आज़माएं. आपको someregex और message के लिए सही वैल्यू सेट करनी होंगी. साथ ही, someField के लिए भी वैल्यू सेट करनी होगी.
अपने फ़ॉर्म को बेहतर बनाने के तरीकों की पहचान करने के लिए, आपको किस Analytics और रीयल यूज़र मॉनिटरिंग डेटा पर नज़र रखनी होगी?

आपका पूरा पेमेंट फ़ॉर्म अब कुछ ऐसा दिखेगा:

अपने फ़ॉर्म को अलग-अलग डिवाइसों पर आज़माएं. किन डिवाइसों और ब्राउज़र को टारगेट किया जा रहा है? फ़ॉर्म को कैसे बेहतर बनाया जा सकता है?

आगे बढ़ना

नीचे दी गई ज़रूरी फ़ॉर्म सुविधाओं के बारे में सोचें, जो इस कोडलैब में शामिल नहीं हैं:

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