Интеграция SDK на стороне приложения

После установки и инициализации SDK:

1. Инициализируйте платежный интерфейс с указанием ID способа оплаты и URL-адреса для редиректа:
   • Метод headlessCheckout.form.init возвращает объект, который используется для дальнейшей работы с платежным интерфейсом.
   • URL-адрес для редиректа используется для перенаправления пользователя, например, после прохождения проверки 3-D Secure.

await headlessCheckout.form.init({
  paymentMethodId: ID,
  returnUrl: 'returnUrl',
});

2. Добавьте следующие компоненты в HTML-разметку платежного интерфейса:
   • Обязательные компоненты:
     • psdk-legal — для отображения информации о юридических документах.
     • psdk-total — для отображения общей стоимости покупки.
   • Компоненты платежной формы. Вы можете использовать встроенный компонент psdk-payment-form или вручную создать элементы платежного интерфейса, например, используя готовые компоненты.
   • Компонент кнопки оплаты psdk-submit-button.

<psdk-legal></psdk-legal>
<psdk-total></psdk-total>


<psdk-payment-form></psdk-payment-form>
<psdk-submit-button text="Pay"></psdk-submit-button>

3. Добавьте обработку события смены статуса платежа check_status.

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'check_status': {
      showStatus = true;
    }
  }
});

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

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