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

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

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

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

Пример:

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

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

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

Пример:

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

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

Пример:

 1headlessCheckout.form.onNextAction((nextAction) => {
 2  switch (nextAction.type) {
 3    case 'redirect':
 4      this.handleRedirectAction(nextAction);
 5  }
 6});
 7
 8private handleRedirectAction(redirectAction: RedirectAction): void {
 9  const url = this.buildRedirectUrl(redirectAction);
10  window.location.href = url; // redirect to PayPal page
11}
12
13private buildRedirectUrl(redirectAction: RedirectAction): string {
14  const url = new URL(redirectAction.data.redirect.redirectUrl);
15  const params = Object.entries(redirectAction.data.redirect.data);
16  params.forEach((entry) => {
17    const [key, value] = entry;
18    url.searchParams.append(key, value);
19  });
20  return url.toString();
21}