Банковские карты

Для настройки оплаты с помощью банковских карт вы можете использовать инструкцию по базовой настройке. Если при оплате пользователю необходимо вводить дополнительные данные, например при оплате бразильскими картами, или проходить проверку 3-D Secure, используйте инструкции, описанные ниже.

Ввод дополнительных данных пользователей

Добавьте контейнер для формы платежного интерфейса.

Пример:

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);
  }
});

Создайте поля платежного интерфейса для ввода дополнительной информации, например, имени держателя карты или адреса.

Пример:

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 Secure

Создайте страницу отображения статуса платежа, на которую пользователь будет перенаправлен после прохождения проверки 3-D Secure. Например, https://example.com/return-page.html.
Добавьте компонент psdk-status в HTML-разметку платежного интерфейса для отображения статуса платежа.

Пример:

Copy

Full screen

Small screen

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

Создайте страницу для отображения формы оплаты. Например, https://example.com/form-page.html.
Инициализируйте платежный интерфейс с указанием ID способа оплаты и URL-адресом страницы статуса.

Пример:

Copy

Full screen

Small screen

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

Добавьте обработку события redirect, чтобы перенаправить пользователя на внешнюю страницу для прохождения проверки 3-D Secure. После прохождения проверки пользователь будет перенаправлен на страницу статуса платежа (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();
}

Добавьте обработку события проверки 3-D Secure 3DS.

Пример:

Copy

Full screen

Small screen

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

Добавьте компонент psdk-3ds в HTML-разметку платежного интерфейса для прохождения проверки 3-D Secure.

Пример:

Copy

Full screen

Small screen

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

Спасибо за обратную связь!

Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.

Последнее обновление: 3 марта 2025

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Your browser is not supported. Please try a different browser

Headless checkout

Банковские карты

Ввод дополнительных данных пользователей

Проверка 3-D Secure