결제 양식은 종종 구매를 완료하기 전의 마지막 단계입니다. 전환수를 최대화하려면 결제 양식이 사용자 친화적이고 안전한지 확인하세요.
사용자가 작성할 내용을 알려주세요.
결제 양식은 필수 입력란만 표시하여 최대한 간단하게 만드세요
결제 금액을 표시합니다. 이러한 경우에는 제출 버튼이 적합합니다.
<button>Pay $300.00</button>
<label> 요소에는 설명이 필요 없는 문구를 사용합니다.
예를 들어 일부 브랜드에서만 사용하는 'CVV'와 같은 약어 대신 '보안 코드'를 사용하세요.
사용자가 결제 세부정보를 입력하도록 지원
전환수를 극대화하려면 사용자가 최대한 빨리 결제 양식을 작성할 수 있게 하세요.
카드 번호 및 보안 코드 필드에 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 ]+"를 사용합니다. 공백이 실물 카드에 표시되는 방식입니다.