Электронные кошельки с редиректом, такие как PayPal, Klarna и Skrill, перенаправляют пользователя на сайт платежной системы для авторизации и подтверждения платежа, после чего он возвращается на сайт продавца. Такой способ обеспечивает безопасность платежей, так как продавец не получает доступ к платежным данным пользователей.

Инструкция ниже описывает настройку Headless checkout для приема платежей с помощью электронных кошельков с редиректом на примере PayPal.

1. Создайте страницу отображения статуса платежа, на которую пользователь будет перенаправлен после оплаты в PayPal. Например, https://example.com/return-page.html.

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

Пример:

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

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

4. Инициализируйте платежный интерфейс с указанием ID способа оплаты и URL-адресом страницы статуса.

Пример:

await headlessCheckout.form.init({
  paymentMethodId: 24, // PayPal payment ID
  returnUrl: 'https://example.com/return-page.html',
});

5. Добавьте обработку события redirect, чтобы перенаправить пользователя на внешнюю страницу для оплаты на стороне PayPal. После совершения оплаты пользователь будет перенаправлен на страницу статуса платежа (https://example.com/return-page.html).

Пример:

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