แบบฟอร์มการชำระเงิน

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

รูปแบบการชำระเงินมักเป็นขั้นตอนสุดท้ายก่อนทำการซื้อ ตรวจสอบว่ารูปแบบการชำระเงินที่ใช้ง่ายและปลอดภัยเพื่อเพิ่มจำนวน 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 ]+" เพื่ออนุญาตให้ผู้ใช้เพิ่มช่องว่างเมื่อป้อนหมายเลขบัตร เพราะนี่คือการแสดงหมายเลขบนบัตรจริง

แหล่งข้อมูล

• แนวทางปฏิบัติแนะนำเกี่ยวกับแบบฟอร์มการชำระเงินและที่อยู่
• การชำระเงินผ่านเว็บ