Los monederos electrónicos con redireccionamientos, como PayPal, Klarna y Skrill, redirigen al usuario al sitio web del sistema de pago para autorizar y confirmar el pago; después, los usuarios vuelven al sitio web del vendedor. Este método garantiza la seguridad del pago, ya que el vendedor no puede acceder a los datos de pago del usuario.

Las instrucciones que se indican abajo describen la configuración del Headless checkout para aceptar pagos mediante monederos electrónicos con redireccionamientos usando, por ejemplo, PayPal.

1. Cree una página de estado de pago a la cual se redirigirá al usuario tras el pago mediante PayPal. Por ejemplo, https://example.com/return-page.html.

2. Agregue el componente psdk-status al marcado HTML de la interfaz de pago para mostrar un estado de pago.

Ejemplo:

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

3. Cree una página para mostrar el formulario de PayPal. Por ejemplo, https://example.com/form-page.html.

4. Inicialice la interfaz de pago indicando el ID del método de pago y la URL de la página de estado.

Ejemplo:

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

5. Agregue el control del evento redirect para redirigir al usuario a una página externa para realizar el pago mediante PayPal. Tras finalizar el pago, al usuario se le redirige a la página de estado del pago (https://example.com/return-page.html).

Ejemplo:

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