Банковские карты
Для настройки оплаты с помощью банковских карт вы можете использовать инструкцию по базовой настройке. Если при оплате пользователю необходимо вводить дополнительные данные, например при оплате бразильскими картами, или проходить проверку 3-D Secure, используйте инструкции, описанные ниже.
Ввод дополнительных данных пользователей
- Добавьте контейнер для формы платежного интерфейса.
- html
1<div id="form-container"></div>
- Добавьте обработку события отображения новых полей
show_fields.
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- Создайте поля платежного интерфейса для ввода дополнительной информации, например, имени держателя карты или адреса.
submitButtonText для каждого шага платежной формы вы также можете добавить отображение текста по умолчанию, например, Продолжить.- typescript
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 Secure
Проверка 3-D Secure может выполняться либо встроенным механизмом эквайера, либо через внешний программный модуль Merchant Plug-In (MPI), который аутентифицирует держателя карты и передает результат эквайеру.
Когда проверка выполняется встроенным механизмом эквайера, пользователь перенаправляется на внешний URL-адрес. Для работы этого сценария вам необходимо настроить обработку события redirect.
Проверка через MPI реализована компонентом psdk-3ds, в котором используются веб-сокеты. Для корректной работы challenge flow — проверки, когда для подтверждения транзакции необходимо дополнительное действие со стороны пользователя — вам необходимо настроить обработку события 3DS.
Выбор механики проверки зависит от банка пользователя.
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
