이 페이지는 Cloud Translation API를 통해 번역되었습니다.

결제 양식 권장사항 Codelab

Sam Dutton

이 Codelab에서는 안전하고 접근성이 높으며 사용하기 쉬운 결제 수단을 빌드하는 방법을 보여줍니다.

1단계: HTML을 의도한 대로 사용

작업을 위해 빌드된 요소 사용:

<form>
<section>
<label>
<input>, <select>, <textarea>
<button>

보시다시피 이러한 요소는 내장 브라우저 기능을 활성화하고 접근성을 개선하며 마크업에 의미를 더할 수 있습니다.

수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.

index.html에서 양식의 HTML을 살펴보세요.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

카드 번호, 카드의 이름, 만료일, 보안 코드에 관한 <input> 요소가 있습니다. 모두 <section> 요소로 래핑되며 각 요소에는 라벨이 있습니다. 결제 완료 버튼은 HTML 형식이며 <button>입니다. 이 Codelab의 후반부에서는 지정할 수 있습니다.

참고: <input> 요소에는 닫는 태그가 없습니다. 이는 void (빈) 요소이기 때문입니다. 즉, 이 요소 자체에는 콘텐츠가 없습니다. '/' void 요소 끝에 있는 문자는 선택사항입니다. <input> 또는 <input />는 괜찮습니다.

앱 보기를 클릭하여 결제 양식을 미리 봅니다.

양식이 현재 상태 그대로 잘 작동하나요?
작동을 개선하기 위해 변경하고 싶은 점이 있으신가요?
모바일에서는 어떨까요?

소스 보기를 클릭하여 소스 코드로 돌아갑니다.

2단계: 모바일 및 데스크톱을 고려한 디자인

추가한 HTML은 유효하지만 기본 브라우저 스타일로 인해 특히 양식이 사용하기 어렵습니다. 볼 수 있습니다. 그것도 그다지 좋아 보이지는 않습니다.

패딩과 여백을 조정하여 양식이 다양한 기기에서 잘 작동하도록 해야 합니다. 선택할 수 있습니다.

아래의 모든 CSS를 복사하여 자체 css/main.css 파일에 붙여넣습니다.

정말 많은 CSS입니다. 크기 변경에 대해 알아야 할 주요 사항은 다음과 같습니다.

padding 및 margin가 입력에 추가됩니다.
font-size 및 기타 값은 표시 영역 크기에 따라 다릅니다.

준비가 되면 앱 보기를 클릭하여 스타일이 지정된 양식을 확인합니다. 또한, 테두리가 조정되고 display: block;가 라벨에 사용되므로 라벨이 단독으로 배치될 수 있습니다. 입력은 전체 너비일 수 있습니다. 로그인 양식 권장사항 에서는 이 접근 방식의 이점을 보다 자세히 설명합니다.

:invalid 선택기는 입력에 잘못된 값이 있는 경우 이를 나타내는 데 사용됩니다. 이 이 Codelab 뒷부분에서 다룹니다.)

CSS는 모바일 중심입니다.

기본 CSS는 너비가 400px 미만인 표시 영역에 사용됩니다.
미디어 쿼리는 너비가 400px 이상인 표시 영역의 기본값을 재정의하고 너비가 500px 이상인 표시 영역 소형 휴대전화, 휴대기기에 적합합니다. 더 큰 화면과 데스크톱에서 사용할 수 있습니다

웹용으로 빌드할 때마다 다양한 기기와 표시 영역 크기에서 테스트해야 합니다. 바로 작은 결함으로 인해 사용할 수 없게 될 수 있기 때문에 양식의 경우 특히 더 그렇습니다. 사용자는 항상 CSS 중단점을 사용하여 CSS 중단점에서 타겟 기기에 광고를 게재할 수 있습니다.

전체 양식이 표시되나요?
양식 입력이 충분히 큰가요?
모든 텍스트를 읽을 수 있나요?
실제 휴대기기를 사용할 때와 Chrome DevTools의 기기 모드?
중단점을 조정해야 했나요?

다양한 기기에서 양식을 테스트하는 방법에는 여러 가지가 있습니다.

Chrome DevTools 기기 모드 사용 휴대기기를 시뮬레이션할 수 있습니다.
컴퓨터에서 휴대전화로 URL을 보냅니다.
BrowserStack과 같은 서비스를 사용하여 범위에 대해 테스트합니다. 다양한 기기 및 브라우저입니다.

3단계: 사용자의 데이터 입력에 도움이 되는 속성 추가

브라우저에서 입력 값을 저장 및 자동 완성하고 안전한 기본 제공에 대한 액세스 권한을 제공하도록 사용 설정합니다. 결제 및 확인 기능을 제공합니다.

다음과 같이 index.html 파일의 양식에 속성을 추가합니다.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

앱을 다시 확인한 후 카드 번호 입력란을 탭하거나 클릭합니다. 기기 및 아래와 같이 브라우저에 저장된 결제 수단을 보여주는 선택기가 표시될 수 있습니다.

Android 휴대전화에 설치된 Chrome의 결제 양식 스크린샷 두 개. 하나는 브라우저에 내장된 결제 카드 선택기를 보여 줍니다. 다른 하나는 자리표시자 자동 완성 값을 보여줍니다 — 기본 제공되는 브라우저 결제 선택기 및 자동 완성

결제 수단을 선택하고 보안 코드를 입력하면 브라우저가 양식에 입력한 결제 카드의 autocomplete 값:

cc-number
cc-name
cc-exp
cc-csc

또한 대부분의 브라우저는 신용카드 번호와 보안 코드의 유효성을 검사하고 확인합니다.

또한 휴대기기에서는 키를 탭하자마자 숫자 키보드가 Card number(카드 번호) 입력란이 표시됩니다. inputmode="numeric"를 사용했기 때문입니다. 숫자 필드의 경우 숫자를 입력하기가 쉬워지고 숫자가 아닌 문자를 입력할 수 없게 되어 사용자가 입력하는 데이터 유형을 기억할 수 없습니다

사용 가능한 모든 autocomplete 값을 결제 양식에 올바르게 추가하는 것이 매우 중요합니다. 그것은 사이트에서 카드 만료일의 autocomplete 값을 놓치는 경우가 많습니다. 있습니다. 단일 autofill 값이 잘못되었거나 누락된 경우 사용자는 실제 값을 가져와야 합니다. 카드를 사용하여 카드 데이터를 직접 입력할 수 있으며, 이 경우 할인 기회를 놓칠 수 있습니다. 결제 양식이 자동 완성되는 경우 사용자가 휴대전화에 결제 카드 세부정보를 기록해 둘 수도 있습니다. 컴퓨터는 매우 안전하지 않습니다.

입력란이 비어 있는 결제 양식을 제출해 보세요. 브라우저에 누락을 완료하라는 메시지가 표시됨 데이터를 수집하는 데 사용됩니다 이제 카드 번호 입력란의 값에 문자를 추가하고 양식을 제출해 봅니다. 이 브라우저에서 값이 잘못되었다는 경고 메시지가 표시됩니다. 이는 pattern 속성을 사용하여 필드에 유효한 값을 지정할 수 없습니다. maxlength 및 기타 정책도 마찬가지입니다. 검증 제약 조건 JavaScript가 필요하지 않습니다.

이제 결제 양식이 다음과 같이 표시됩니다.

autocomplete 값을 삭제하고 결제 양식을 작성해 보세요. 어떤 어려움이 있나요? 어떻게 해야 할까요?
온라인 상점에서 결제 양식을 사용해 보세요. 무엇이 효과적이고 무엇이 잘못되었는지 생각해 보세요. 있니 따라야 할 일반적인 문제나 권장사항이 있나요?

4단계: 양식 제출 후 결제 버튼 사용 중지

사용자가 버튼을 탭하거나 클릭한 경우, 특히 다음과 같은 경우에는 제출 버튼을 사용 중지하는 것이 좋습니다. 확인할 수 있습니다. 많은 사용자가 버튼을 반복적으로 탭하거나 클릭하는 경우 잘 작동하더라도 말이죠 이로 인해 결제 처리에 문제가 발생하고 서버 부하가 가중될 수 있습니다.

js/main.js 파일에 다음 JavaScript를 추가합니다.

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

결제 양식을 제출하고 어떻게 되는지 확인해 보세요.

이 시점에서 몇 가지 주석과 validate() 함수:

JavaScript에는 데이터 유효성 검사를 위해 주석 처리된 코드가 포함되어 있습니다. 이 코드는 Constraint Validation API를 통해 (널리 지원됨) 커스텀 기본 제공 브라우저 UI에 액세스하여 포커스를 설정하고 프롬프트를 표시합니다. 코드의 주석 처리를 삭제하고 한 번 사용해 보세요. someregex 및 message에 적절한 값을 설정하고 someField입니다.
애널리틱스 및 실제 사용자 모니터링 데이터는 양식을 개선하는 방법을 파악하기 위해 모니터링해야 할까요?

이제 완성된 결제 양식이 다음과 같이 표시됩니다.

다양한 기기에서 양식을 사용해 보세요. 사용 중인 기기 및 브라우저 무엇인가요? 양식을 어떻게 개선할 수 있을까요?

추가 정보

이 Codelab에서 다루지 않는 다음과 같은 중요한 양식 기능을 고려하세요.

서비스 약관 및 개인정보처리방침 문서 링크: 사용자에게 서비스 약관 및 정책을 중요하게 생각합니다.
스타일 및 브랜딩: 사이트의 나머지 부분과 어울리도록 만드세요. 이름과 주소를 입력할 때 결제를 할 때 사용자는 자신이 있는 것이라는 믿음을 가지고 안심할 수 있어야 합니다.
분석 및 실제 사용자 모니터링: 실제 사용자를 위해 양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있습니다.