은행 카드

은행 카드를 사용하여 결제를 설정하려면 기본 설정 지침을 따르십시오. 브라질 카드로 결제할 때와 같이 결제를 완료하기 위해 추가 데이터를 입력하거나 3D 보안 인증을 통과해야 하는 경우 아래 안내를 따르십시오.

추가 사용자 데이터 입력

결제 UI 양식을 위한 컨테이너를 추가합니다.

예:

Copy

Full screen

Small screen

<div id="form-container"></div>

새 필드 표시를 위한 show_fields 이벤트의 처리를 추가합니다.

예:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'show_fields':
      this.handleShowFieldsAction(nextAction);
  }
});

카드 소지인 이름이나 청구지 주소 등 추가 데이터를 입력할 수 있는 결제 UI 필드를 생성합니다.

예:

Copy

Full screen

Small screen

private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
  this.form.fields = nextAction.data.fields;
  this.updateForm(this.form);
}

private updateForm(form: Form): void {
  const visibleFields = form.fields.filter((field) => {
    return field.isVisible === '1';
  });

  const controls = visibleFields.map((field) => {
    if (field.type === 'select') {
      return this.getSelectControl(field);
    }

    if (field.type === 'check') {
      return this.getCheckboxControl(field);
    }

    if (field.type === 'text') {
      if (field.name === 'card_number') {
        return this.getCardNumberControl(field);
      }

      if (field.name === 'phone') {
        return this.getPhoneControl(field);
      }

      return this.getTextControl(field);
    }

    return null;
  });

  this.renderForm(controls);
}

private getSelectControl(field: Field): HTMLElement {
  const control = new SelectComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCheckboxControl(field: Field): HTMLElement {
  const control = new CheckboxComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCardNumberControl(field: Field): HTMLElement {
  const control = new CardNumberComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('icon', 'true');
  return control;
}

private getPhoneControl(field: Field): HTMLElement {
  const control = new PhoneComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('showFlags', 'true');
  return control;
}

private getTextControl(field: Field): HTMLElement {
  const control = new TextComponent();
  control.setAttribute('name', field.name);
  return control;
}

private renderForm(controls: Array<HTMLElement | null>): void {
  const formContainer = document.querySelector('#form-container');
  formContainer.nativeElement.innerHTML = '';

  controls.forEach((control) => {
    if (!control) return;
    formContainer.nativeElement.append(control);
  });
}

3-D 보안 인증

3D 보안 인증을 통과한 후 사용자가 리디렉션되는 결제 상태 페이지를 생성합니다. 예: https://example.com/return-page.html.
결제 UI의 HTML 마크업에 psdk-status 구성 요소를 추가하여 결제 상태를 표시합니다.

예:

Copy

Full screen

Small screen

@if (showStatus) {
  <psdk-status></psdk-status>
}

결제 UI를 표시할 페이지를 생성합니다. 예: https://example.com/form-page.html.
결제 수단 ID와 상태 페이지 URL을 지정하여 결제 UI를 초기화합니다.

예:

Copy

Full screen

Small screen

await headlessCheckout.form.init({
  paymentMethodId: 1380, // Bank card payment ID
  returnUrl: 'http://example.com/return-page.html',
});

3D 보안 인증을 위해 사용자를 외부 페이지로 리디렉션하는 redirect 이벤트 처리를 추가합니다. 인증에 성공하면 사용자가 결제 상태 페이지(https://example.com/return-page.html)로 리디렉션됩니다.

예:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'redirect':
      this.handleRedirectAction(nextAction);
  }
});

private handleRedirectAction(redirectAction: RedirectAction): void {
  const url = this.buildRedirectUrl(redirectAction);
  window.location.href = url; // redirect to 3-D Secure page
}

private buildRedirectUrl(redirectAction: RedirectAction): string {
  const url = new URL(redirectAction.data.redirect.redirectUrl);
  const params = Object.entries(redirectAction.data.redirect.data);
  params.forEach((entry) => {
    const [key, value] = entry;
    url.searchParams.append(key, value);
  });
  return url.toString();
}

3D 보안 인증에 대한 3DS 이벤트 처리를 추가합니다.

예:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    ...
    case '3DS': {
      show3DS = true;
    }
  }
});

결제 UI의 HTML 마크업에 psdk-3ds 구성 요소를 추가하여 3D 보안 인증을 처리합니다.

예:

Copy

Full screen

Small screen

@if (show3DS) {
  <psdk-3ds></psdk-3ds>
}

의견을 보내 주셔서 감사드립니다!

메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

마지막 업데이트: 2025년 3월 3일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

Your browser is not supported. Please try a different browser

헤드리스 체크아웃

은행 카드

추가 사용자 데이터 입력

3-D 보안 인증