은행 카드
은행 카드를 사용하여 결제를 설정하려면 기본 설정 지침을 따르십시오. 브라질 카드로 결제할 때와 같이 결제를 완료하기 위해 추가 데이터를 입력하거나 3D 보안 인증을 통과해야 하는 경우 아래 안내를 따르십시오.
추가 사용자 데이터 입력
- 결제 UI 양식을 위한 컨테이너를 추가합니다.
Copy
- html
1<div id="form-container"></div>
- 새 필드 표시를 위한
show_fields이벤트의 처리를 추가합니다.
Copy
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- 카드 소지인 이름이나 청구지 주소 등 추가 데이터를 입력할 수 있는 결제 UI 필드를 생성합니다.
Copy
- typescript
1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
2 this.form.fields = nextAction.data.fields;
3 this.updateForm(this.form);
4}
5
6private updateForm(form: Form): void {
7 const visibleFields = form.fields.filter((field) => {
8 return field.isVisible === '1';
9 });
10
11 const controls = visibleFields.map((field) => {
12 if (field.type === 'select') {
13 return this.getSelectControl(field);
14 }
15
16 if (field.type === 'check') {
17 return this.getCheckboxControl(field);
18 }
19
20 if (field.type === 'text') {
21 if (field.name === 'card_number') {
22 return this.getCardNumberControl(field);
23 }
24
25 if (field.name === 'phone') {
26 return this.getPhoneControl(field);
27 }
28
29 return this.getTextControl(field);
30 }
31
32 return null;
33 });
34
35 this.renderForm(controls);
36}
37
38private getSelectControl(field: Field): HTMLElement {
39 const control = new SelectComponent();
40 control.setAttribute('name', field.name);
41 return control;
42}
43
44private getCheckboxControl(field: Field): HTMLElement {
45 const control = new CheckboxComponent();
46 control.setAttribute('name', field.name);
47 return control;
48}
49
50private getCardNumberControl(field: Field): HTMLElement {
51 const control = new CardNumberComponent();
52 control.setAttribute('name', field.name);
53 control.setAttribute('icon', 'true');
54 return control;
55}
56
57private getPhoneControl(field: Field): HTMLElement {
58 const control = new PhoneComponent();
59 control.setAttribute('name', field.name);
60 control.setAttribute('showFlags', 'true');
61 return control;
62}
63
64private getTextControl(field: Field): HTMLElement {
65 const control = new TextComponent();
66 control.setAttribute('name', field.name);
67 return control;
68}
69
70private renderForm(controls: Array<HTMLElement | null>): void {
71 const formContainer = document.querySelector('#form-container');
72 formContainer.nativeElement.innerHTML = '';
73
74 controls.forEach((control) => {
75 if (!control) return;
76 formContainer.nativeElement.append(control);
77 });
78}
3-D 보안 인증
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
