> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Handle redirects & deep links

<Note>
  This guide is only relevant for the Web integration.
</Note>

Handling redirects is required for Payment Methods like iDeal that present a webpage for the customer to enter their credentials and validate their payment.

When the user selects such a Payment Method, Universal Checkout will first attempt to show the webpage in a popup or a browser tab to maintain the context, and will then safely bring the user back to the initial page to continue the flow.

This however does not work properly in the following scenario:

* The Payment Method opens a third-party banking app like *Revolut* through deep linking

## Set up redirects

If creating a popup or tab is not possible, Universal Checkout will automatically redirect the user back to the `returnUrl` provided in the checkout options.

```typescript TYPESCRIPT theme={"dark"}
const options = {
  // Other options

  redirect: {
    returnUrl: "https://mystore.com/checkout",
  },
};

Primer.showUniversalCheckout(clientToken, options);
```

<Note>
  Feel free to pass additional query parameters to the `returnUrl`. They will be automatically forwarded when the user is brought back.
</Note>

## Handle redirects

When the user is redirected back to `returnUrl`, a `clientToken` is passed as a query parameter:

```URL URL theme={"dark"}
https://mystore.com/checkout?clientToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...
```

Grab the `clientToken` from the query parameters and use it to render Universal Checkout. The checkout will automatically continue the payment flow.

```typescript TYPESCRIPT theme={"dark"}
// Grab all the query parameters using raw JS
const queryParameters = Object.fromEntries(
  new URLSearchParams(window.location.search).entries()
);

// If a client token is available in the query parameters, grab it
// Otherwise, fetch a client token from your backend to start a new client session
let clientToken;
if (queryParameters.clientToken) {
  clientToken = queryParameters.clientToken();
} else {
  // clientToken = await getClientToken();
}

// Initialize Primer as usual
Primer.showUniversalCheckout(clientToken, options);
```

Universal Checkout will automatically resume the payment. If the payment was successfully completed, the callback `onCheckoutComplete` will be called like for any other payment methods.

If the payment failed, or if the user cancelled their payment, an error message will be shown and Universal Checkout will once again present the configured payment methods to the user. At this point, the flow has been restarted and the user will be able to attempt another payment with a payment method of their choice.

You can use `onCheckoutFail` to listen to the cancellation and restore your UI to its initial state.

## Testing

For testing purposes, you can force a redirect by setting `redirect.forceRedirect` to true.

```typescript TYPESCRIPT theme={"dark"}
const options = {
  // Other options

  redirect: {
    returnUrl: "https://mystore.com/checkout",
    forceRedirect: true,
  },
};

Primer.showUniversalCheckout(clientToken, options);
```

<Note>
  We encourage not forcing redirects in production in order to provide the best experience to your user.\
  Universal Checkout will seamlessly fallback to a redirect if needed!
</Note>