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:

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

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:

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

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:

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