은행 카드

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

추가 사용자 데이터 입력

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

예:

Copy

Full screen

Small screen

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

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

예:

Copy

Full screen

Small screen

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

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

submitButtonText 필드를 사용하면 각 결제 양식 단계별로 기본 버튼 문구를 설정할 수 있습니다. 예: 계속.

예:

Copy

Full screen

Small screen

 1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
 2  this.form.fields = nextAction.data.fields;
 3  if (nextAction.data.submitButtonText) {
 4    this.updateSubmitButton(nextAction.data.submitButtonText);
 5  }
 6  this.updateForm(this.form);
 7}
 8
 9private updateForm(form: Form): void {
10  const visibleFields = form.fields.filter((field) => {
11    return field.isVisible === '1';
12  });
13
14  const controls = visibleFields.map((field) => {
15    if (field.type === 'select') {
16      return this.getSelectControl(field);
17    }
18
19    if (field.type === 'check') {
20      return this.getCheckboxControl(field);
21    }
22
23    if (field.type === 'text') {
24      if (field.name === 'card_number') {
25        return this.getCardNumberControl(field);
26      }
27
28      if (field.name === 'phone') {
29        return this.getPhoneControl(field);
30      }
31
32      return this.getTextControl(field);
33    }
34
35    return null;
36  });
37
38  this.renderForm(controls);
39}
40
41private getSelectControl(field: Field): HTMLElement {
42  const control = new SelectComponent();
43  control.setAttribute('name', field.name);
44  return control;
45}
46
47private getCheckboxControl(field: Field): HTMLElement {
48  const control = new CheckboxComponent();
49  control.setAttribute('name', field.name);
50  return control;
51}
52
53private getCardNumberControl(field: Field): HTMLElement {
54  const control = new CardNumberComponent();
55  control.setAttribute('name', field.name);
56  control.setAttribute('icon', 'true');
57  return control;
58}
59
60private getPhoneControl(field: Field): HTMLElement {
61  const control = new PhoneComponent();
62  control.setAttribute('name', field.name);
63  control.setAttribute('showFlags', 'true');
64  return control;
65}
66
67private getTextControl(field: Field): HTMLElement {
68  const control = new TextComponent();
69  control.setAttribute('name', field.name);
70  return control;
71}
72
73private renderForm(controls: Array<HTMLElement | null>): void {
74  const formContainer = document.querySelector('#form-container');
75  formContainer.nativeElement.innerHTML = '';
76
77  controls.forEach((control) => {
78    if (!control) return;
79    formContainer.nativeElement.append(control);
80  });
81}

3-D 보안 인증

3-D 보안 인증은 카드 소유자를 인증하고 결과를 인수자에게 전달하는 외부 판매자 플러그인 (MPI)를 통해 처리하거나 인수자의 기본 메커니즘으로 처리할 수 있습니다.

인증 과정이 결제사의 내장 메커니즘을 통해 처리될 경우, 사용자는 외부 URL로 리디렉션됩니다. 이 시나리오에서는 redirect 이벤트 처리를 반드시 구성해야 합니다.

MPI를 통한 인증은 psdk-3ds 구성 요소(WebSocket 사용)로 구현됩니다. 이 인증 과정은 거래 확인을 위해 추가 사용자 조치를 요구하므로, 챌린지 플로우가 올바르게 작동하려면 3DS 이벤트 처리를 반드시 구성해야 합니다.

인증 유형 선택은 사용자의 은행에 따라 달라집니다.

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

예:

Copy

Full screen

Small screen

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

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

예:

Copy

Full screen

Small screen

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

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

예:

Copy

Full screen

Small screen

 1headlessCheckout.form.onNextAction((nextAction) => {
 2  switch (nextAction.type) {
 3    case 'redirect':
 4      this.handleRedirectAction(nextAction);
 5  }
 6});
 7
 8private handleRedirectAction(redirectAction: RedirectAction): void {
 9  const url = this.buildRedirectUrl(redirectAction);
10  window.location.href = url; // redirect to 3-D Secure page
11}
12
13private buildRedirectUrl(redirectAction: RedirectAction): string {
14  const url = new URL(redirectAction.data.redirect.redirectUrl);
15  const params = Object.entries(redirectAction.data.redirect.data);
16  params.forEach((entry) => {
17    const [key, value] = entry;
18    url.searchParams.append(key, value);
19  });
20  return url.toString();
21}

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

3DS 이벤트는 챌린지 절차가 시작될 때만 트리거됩니다. 이 확인 프로세스에는 SMS를 통해 수신한 코드 입력과 같은 거래를 확인하기 위한 추가적인 사용자 조치가 필요합니다.

예:

Copy

Full screen

Small screen

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    ...
4    case '3DS': {
5      show3DS = true;
6      challenge = JSON.stringify(nextAction.data.data);
7    }
8  }
9});

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

예:

Copy

Full screen

Small screen

1@if (show3DS) {
2  <psdk-3ds [attr.data-challenge]="challenge" text="Continue"></psdk-3ds>
3}

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

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

마지막 업데이트: 2026년 4월 30일

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

콘텐츠

추가 사용자 데이터 입력
3-D 보안 인증