E-wallets with redirects, such as PayPal, Klarna and Skrill, redirect the user to the payment system website to authorize and confirm the payment, after which they return to the seller’‎s website. This method ensures payment security, as the seller doesn’‎t have access to the user payment data.

The instruction below describes the Headless checkout configuration to accept payments via e-wallets with redirects using PayPal as an example.

1. Create a payment status page where the user will be redirected after PayPal payment. For example, https://example.com/return-page.html.

2. Add the psdk-status component to the HTML markup of the payment UI to display a payment status.

Example:

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

3. Create a page to display the PayPal form. For example, https://example.com/form-page.html.

4. Initialize the payment UI specifying the payment method ID and status page URL.

Example:

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

5. Add the handling of the redirect event to redirect the user to an external page to make payment via PayPal. After completing the purchase, the user is redirected to the payment status page (https://example.com/return-page.html).

Example:

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