পেশাদার পদ্ধতি অনুসরণ করে এমন পেমেন্ট ফর্ম তৈরি করা

চেক-আউট প্রসেসের সবচেয়ে গুরুত্বপূর্ণ অংশ হল পেমেন্ট ফর্ম। পেমেন্ট ফর্মের ডিজাইন খারাপ হলে, শপিং কার্ট ছেড়ে চলে যাওয়ার ঘটনা প্রায়ই ঘটে।

এমন একটি ফর্ম তৈরি করুন যা ডেস্কটপ এবং মোবাইলে ব্যবহারকারীদের জন্য পেমেন্টের বিবরণ লেখা যতটা সম্ভব সহজ করে তোলে। অটোফিল, যাচাইকরণ এবং ডেটা এন্ট্রি সংক্রান্ত সীমাবদ্ধতার জন্য ফর্মটি যাতে বিল্ট-ইন ব্রাউজার ফিচারের সর্বাধিক ব্যবহার করে তা নিশ্চিত করুন।

কীভাবে প্রয়োগ করতে হয়

পেমেন্ট ফর্ম সফলভাবে তৈরি করার জন্য সবচেয়ে গুরুত্বপূর্ণ নির্দেশিকা নিচে উল্লেখ করা হল।

অর্থপূর্ণ, সঠিক HTML ব্যবহার করুন

ফর্ম তৈরি করার জন্য তৈরি করা এলিমেন্ট ও অ্যাট্রিবিউটের সবচেয়ে বেশি ব্যবহার করুন:

• <form>, <input>, <label> ও <button>
• type, autocomplete ও inputmode

এগুলি বিল্ট-ইন ব্রাউজার কার্যকারিতা চালু করে, অ্যাক্সেসিবিলিটি উন্নত করে এবং মার্কআপে অর্থ যোগ করে।

ডেটা এন্ট্রির জন্য ফর্ম ফিল্ড লেবেল করতে <label> এলিমেন্ট ব্যবহার করুন

<input>, <select> বা <textarea> লেবেল করতে, <label> ব্যবহার করুন। ইনপুটের id-এর মতো একই ভ্যালু লেবেলের for অ্যাট্রিবিউটকে দিয়ে ইনপুটের সাথে লেবেল যুক্ত করুন।

HTML অ্যাট্রিবিউটের সর্বাধিক সুবিধা নিন

মোবাইলে সঠিক কীবোর্ড প্রদান করতে এবং ব্রাউজারের মাধ্যমে প্রাথমিক বিল্ট-ইন যাচাইকরণ চালু করতে, উপযুক্ত <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-এর মেয়াদ শেষ হওয়ার তারিখ), সেখানে ইনপুটের উপরে দৃশ্যমান এলিমেন্টে ইঙ্গিত দিন এবং উপরে cc-exp-এর উদাহরণের মতো aria-describedby-এর মাধ্যমে দুটিকে লিঙ্ক করুন। ইনপুটের নিচে থাকা ইঙ্গিতগুলি মোবাইল কীবোর্ড বা অটোফিল পপওভারের মাধ্যমে সহজেই লুকানো যায়, যখন ব্যবহারকারীর সেগুলি প্রয়োজন হয়।

একমাত্র ফর্ম্যাট হিন্ট হিসেবে placeholder অ্যাট্রিবিউটের উপর নির্ভর করবেন না এবং <label>-এর পরিবর্তে এটি কখনও ব্যবহার করবেন না: ব্যবহারকারী টাইপ করা শুরু করলেই প্লেসহোল্ডার টেক্সট লুকানো থাকে, তাই এডিট করার সময় এটি চেক করা যায় না। লেবেল ও পারসিস্টেন্ট হিন্টের পাশাপাশি অতিরিক্ত ইঙ্গিত হিসেবে প্লেসহোল্ডার ব্যবহার করা যেতে পারে।

নিরাপত্তা কোড মাস্ক করবেন না

কার্ডের নিরাপত্তা কোডের জন্য type="password" নয়, inputmode="numeric"-এর সাথে type="text" ব্যবহার করুন। ব্যবহারকারীরা মাস্ক করা তিন বা চার সংখ্যার কোডে টাইপো চেক করতে পারেন না, তাই পেমেন্ট বাতিল না হওয়া পর্যন্ত ভুল টাইপ করা সংখ্যা ধরা পড়ে না এবং মাস্কিং খুব কম সুরক্ষা যোগ করে কারণ ব্যবহারকারীর হাতে থাকা কার্ডে কোডটি প্রিন্ট করা থাকে।

পেমেন্ট কার্ড ও ফোন নম্বরের জন্য একটি ইনপুট ব্যবহার করুন

পেমেন্ট কার্ড ও ফোন নম্বরের জন্য একটি ইনপুট ব্যবহার করুন: নম্বরটি বিভিন্ন অংশে ভাগ করবেন না। এটি ব্যবহারকারীদের ডেটা এন্ট্রি করা সহজ করে তোলে, যাচাইকরণ সহজ করে এবং ব্রাউজারগুলিকে অটোফিল করতে সক্ষম করে। পিন ও ব্যাঙ্ক কোডের মতো অন্যান্য সংখ্যাসূচক ডেটার ক্ষেত্রেও একই কাজ করার কথা বিবেচনা করুন।

ভালো করে যাচাই করুন

রিয়েল-টাইমে এবং ফর্ম জমা দেওয়ার আগে, উভয় ক্ষেত্রেই আপনার ডেটা এন্ট্রি যাচাই করা উচিত। এটি করার একটি উপায় হল পেমেন্ট কার্ড ইনপুটে প্যাটার্ন অ্যাট্রিবিউট যোগ করা। ব্যবহারকারী ভুল ভ্যালু দিয়ে পেমেন্ট ফর্ম জমা দেওয়ার চেষ্টা করলে, ব্রাউজার একটি সতর্কতামূলক মেসেজ দেখায় এবং ইনপুটে ফোকাস সেট করে।

তবে, আপনার প্যাটার্ন রেগুলার এক্সপ্রেশনটি পেমেন্ট কার্ড নম্বরের দৈর্ঘ্যের রেঞ্জ ম্যানেজ করার জন্য যথেষ্ট ফ্লেক্সিবল হতে হবে: ১৪টি সংখ্যা (বা সম্ভবত কম) থেকে ২০টি (বা তার বেশি)। কার্ডের নিরাপত্তা কোড (CSC, CVC, CVV বা অন্য নামেও পরিচিত) ৩ বা ৪ সংখ্যার হয়।

ব্যবহারকারীদের নতুন পেমেন্ট কার্ড নম্বর লেখার সময় স্পেস দেওয়ার অনুমতি দিন, কারণ ফিজিক্যাল কার্ডে নম্বর এভাবেই দেখানো হয়। এটি ব্যবহারকারীর জন্য আরও সুবিধাজনক (আপনাকে তাদের বলতে হবে না যে "তারা কিছু ভুল করেছে"), কনভার্সন ফ্লোতে বাধা দেওয়ার সম্ভাবনা কম এবং প্রসেস করার আগে নম্বরে স্পেস থাকলে তা সরিয়ে দেওয়া সহজ।

ব্যবহারকারীদের ভুলবশত ডেটা ফিল্ড মিস করা থেকে বাঁচাতে সাহায্য করুন

বাধ্যতামূলক ফিল্ডে required অ্যাট্রিবিউট যোগ করুন। আধুনিক ব্রাউজারগুলি অনুপস্থিত ডেটার জন্য অটোমেটিক প্রম্পট করে এবং ফোকাস সেট করে।

ফলব্যাক স্ট্র্যাটেজি

অটোফিল হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে অটোফিল কাজ করে না, সেখানে ব্যবহারকারীকে ম্যানুয়ালি পেমেন্টের বিবরণ লিখতে হবে। ব্যবহারকারীর ইনপুট যাচাই করতে এবং সঠিক ভার্চুয়াল কীবোর্ড প্রদান করতে সিম্যান্টিক HTML কনস্ট্রেন্ট (যেমন type, inputmode, pattern এবং required) এখনও যথাযথভাবে কাজ করবে।