은행 카드
은행 카드를 사용하여 결제를 설정하려면 기본 설정 지침을 따르십시오. 브라질 카드로 결제할 때와 같이 결제를 완료하기 위해 추가 데이터를 입력하거나 3D 보안 인증을 통과해야 하는 경우 아래 안내를 따르십시오.
추가 사용자 데이터 입력
- 결제 UI 양식을 위한 컨테이너를 추가합니다.
Copy
- html
<div id="form-container"></div>
- 새 필드 표시를 위한
show_fields이벤트의 처리를 추가합니다.
Copy
- typescript
headlessCheckout.form.onNextAction((nextAction) => {
switch (nextAction.type) {
case 'show_fields':
this.handleShowFieldsAction(nextAction);
}
});
- 카드 소지인 이름이나 청구지 주소 등 추가 데이터를 입력할 수 있는 결제 UI 필드를 생성합니다.
Copy
- typescript
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
- html
@if (showStatus) {
<psdk-status></psdk-status>
}
결제 UI를 표시할 페이지를 생성합니다. 예:
https://example.com/form-page.html.결제 수단 ID와 상태 페이지 URL을 지정하여 결제 UI를 초기화합니다.
예:
Copy
- typescript
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
- typescript
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();
}
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
