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

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

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

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

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

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-submit-button text="Pay"></psdk-submit-button>

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

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

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

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