รูปแบบการชำระเงินมักเป็นขั้นตอนสุดท้ายก่อนทำการซื้อ ตรวจสอบว่ารูปแบบการชำระเงินที่ใช้ง่ายและปลอดภัยเพื่อเพิ่มจำนวน Conversion สูงสุด
ตรวจสอบว่าผู้ใช้ทราบว่าต้องกรอกข้อมูลใด
ทำให้รูปแบบการชำระเงินเรียบง่ายที่สุดเท่าที่จะเป็นไปได้ แสดงเฉพาะช่องที่ต้องกรอก
ระบุจำนวนเงินที่ชำระ ปุ่มส่งจะเหมาะสมที่สุด
<button>Pay $300.00</button>
ใช้คำที่เข้าใจตัวเองสำหรับองค์ประกอบ <label>
ตัวอย่างเช่น ใช้ "รหัสความปลอดภัย"
แทนตัวย่อ เช่น "CVV" ที่มีผู้ใช้งานเพียงบางแบรนด์เท่านั้น
ช่วยให้ผู้ใช้ป้อนรายละเอียดการชำระเงิน
เพื่อเพิ่มจำนวน Conversion สูงสุด โปรดให้ผู้ใช้กรอกแบบฟอร์มการชำระเงินของคุณโดยเร็วที่สุด
ใช้ inputmode="numeric" สำหรับช่องหมายเลขบัตรและรหัสความปลอดภัย
เพื่อแสดงแป้นพิมพ์บนหน้าจอที่เพิ่มประสิทธิภาพสำหรับการป้อนตัวเลข
เพิ่มค่า autocomplete ที่เหมาะสมสำหรับการควบคุมรูปแบบการชำระเงินเพื่อให้มั่นใจว่าเบราว์เซอร์จะป้อนข้อความอัตโนมัติ
ใช้ autocomplete="cc-name" สำหรับชื่อ
autocomplete="cc-number"สำหรับหมายเลขบัตร และ autocomplete="cc-exp"สำหรับวันที่หมดอายุ
ตรวจสอบว่าผู้ใช้ป้อนข้อมูลในรูปแบบที่ถูกต้อง
ใช้แอตทริบิวต์ required กับ <input> ทุกรายการเพื่อให้ผู้ใช้กรอกแบบฟอร์ม
รหัสความปลอดภัยของบัตรสำหรับชำระเงินอาจมีตัวเลข 3 หรือ 4 หลัก
ใช้ minlength="3" และ maxlength="4" เพื่ออนุญาตเฉพาะตัวเลข 3-4 หลัก
ตรวจสอบว่าผู้ใช้ป้อนเฉพาะหมายเลขสำหรับหมายเลขบัตรและรหัสความปลอดภัย
ใช้ pattern="[0-9 ]+" เพื่ออนุญาตให้ผู้ใช้เพิ่มช่องว่างเมื่อป้อนหมายเลขบัตร
เพราะนี่คือการแสดงหมายเลขบนบัตรจริง