Carteiras eletrônicas com redirecionamento, como o PayPal, Klarna e Skrill, redirecionam o usuário ao site do sistema de pagamento para autorizar e confirmar o pagamento, após o qual eles retornam ao site do vendedor. Esse método garante a segurança do pagamento, pois o vendedor não tem acesso aos dados de pagametno do usuário.

A instrução abaixo descreve a configuração da Headless checkout para aceitar pagamentos via carteiras eletrônicas com redirecionamento, usando o PayPal como um exemplo.

1. Crie uma página de status de pagamento onde o usuário será redirecionado após o pagamento PayPal. Por exemplo, https://example.com/return-page.html.

2. Adicione o componente psdk-status à marcação HTML da interface de pagamento para exibir um status de pagamento.

Exemplo:

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

3. Crie uma página para exibir o formulário PayPal. Por exemplo, https://example.com/form-page.html.

4. Inicialize a interface de pagamento especificando o ID do método de pagamento e o URL da página de status.

Exemplo:

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

5. Adicione a manipulação do evento redirect para redirecionar o usuário a uma página externa para fazer o pagamento via PayPal. Depois de concluir a compra, o usuário será redirecionado para a página de status de pagamento (https://example.com/return-page.html).

Exemplo:

 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}