결제 양식은 구매 완료 전 마지막 단계인 경우가 많습니다. 전환수를 최대화하려면 사용자 친화적이고 안전한 결제 수단을 사용해야 합니다.
사용자에게 무엇을 작성할지 알려주세요.
결제 수단을 최대한 간단하게 만들고 필수 입력란만 표시
결제 금액을 표시합니다. 이 경우 Submit 버튼이 가장 적합합니다.
<button>Pay $300.00</button>
<label> 요소에 설명이 필요 없는 문구를 사용합니다.
예를 들어 '보안 코드'를 사용하고
와 같은 약어를 사용하면 안 됩니다. 일부 브랜드에서만 사용합니다.
사용자가 결제 세부정보를 입력하도록 지원
전환수를 극대화하려면 사용자가 결제 양식을 최대한 빨리 작성할 수 있도록 하세요.
카드 번호 및 보안 코드 필드에 inputmode="numeric" 사용
숫자 입력에 최적화된 터치 키보드를 표시합니다.
브라우저가 자동 완성을 제공할 수 있도록 결제 양식 컨트롤에 적절한 autocomplete 값을 추가하세요.
이름으로 autocomplete="cc-name" 사용
카드 번호에는 autocomplete="cc-number", 만료일에는 autocomplete="cc-exp"입니다.
사용자가 올바른 형식으로 데이터를 입력했는지 확인합니다.
모든 <input>에 required 속성을 사용하여 사용자가 양식을 작성하도록 합니다.
결제 카드의 보안 코드는 3자리 또는 4자리 숫자일 수 있습니다.
minlength="3" 및 maxlength="4"를 사용하여 3자리 및 4자리만 허용합니다.
사용자가 카드 번호와 보안 코드에 숫자만 입력하도록 합니다.
pattern="[0-9 ]+"를 사용하여 사용자가 카드 번호를 입력할 때 공백을 포함할 수 있도록 합니다.
실제 카드에 숫자가 표시되는 방식이기 때문입니다.