Headless Redirects: Sample Flows

This article provides common use cases and sample flows for redirecting site visitors to different pages on your Wix Headless site or app. Redirects are often relevant when integrating with the various Wix business solutions.

Redirect to a Wix-managed checkout page

  1. Decide which page you want visitors to see after they finish the Wix-managed checkout. This is called the post flow URL. For example, you might show an order confirmation page at https://your-site.com/order-confirmation.

  2. Add the domain of your post flow URL as an allowed redirect domain in your Headless settings. Wix will only redirect to URLs under authorized domains for security reasons.

  3. Call Create Checkout. The response contains the checkoutId, which you'll need in the next steps.

  4. Call the Redirects API and include the ecomCheckout and callbacks properties in the request body. Pass in the checkoutId from the previous step as ecomCheckout.checkoutId, and your post flow URL as callbacks.postFlowUrl. The response contains a single-use redirect session URL in redirectSession.fullURL.

    Here's an example minimal request body:

    Copy

  5. Redirect your site visitor to the redirect session URL. The URL contains the information needed for Wix to process the checkout. After checkout, Wix sends the visitor back to your post flow URL.

Redirect to a Wix-managed login page

  1. Choose a page that you want your site visitor to be redirected to after login and authorize it as an allowed authorization redirect URI.

  2. Create a PKCE code verifier and code challenge. These are used to prevent CSRF attacks and authorization code injection attacks.

  3. Create a OAuth2 state parameter used to mitigate CSRF attacks.

  4. Store the code verifier, code challenge, and state parameter in local storage or a cookie. When a site visitor is redirected back to your site, you'll need this data to verify a successful login.

  5. Get the Client ID of your OAuth app, which can be found in your Headless Settings.

  6. Call the Redirects API and include the auth property in the request body. Pass in the values from the previous steps into the relevant auth.authRequest fields. Set responseMode to "fragment", responseType to "code", and scope to "offline_access". It should look like the following example:

Copy

The response will contain a full redirect URL in redirectSession.fullURL.

  1. Redirect your site visitor to the Wix-managed login page with the returned fullUrl.

Redirect to an external thank you page after an event checkout

  1. Create a thank you page on your website that you want visitors to see after they finish the Wix-managed events checkout. This page is your thankYouPageUrl. Also, define a postFlowUrl, which the site visitors will be redirected to if the checkout flow is abandoned or interrupted.

  2. Add the full URL's for your thankYouPageUrl and postFlowUrl as allowed redirect domains in your Wix Headless settings. Wix only redirects to URLs under authorized domains for security reasons.

  3. Call Create Reservation and save the returned reservationId.

  4. Call Get Event with the eventId and save the returned eventSlug. To get your eventId, click CMS in your dashboard menu, select Wix App Collections, then Events, and open your events collection. Then, copy the relevant event ID.

  5. Call the Redirects API and include the eventsCheckout and callbacks properties in the request body. Pass in the values from the previous steps into the relevant fields of eventsCheckout.reservationId, eventsCheckout.eventSlug, callbacks.postFlowUrl, and your callbacks.thankYouPageUrl. The response will contain a single-use redirect session URL in redirectSession.fullURL.

    Example minimal request body:

    Copy

  6. Redirect your site visitor to the redirect session URL. The URL contains the information needed for Wix to process the checkout. After checkout, Wix sends the visitor back to your thankYouPageUrl. If the process is abandoned or interrupted, the visitor is redirected to the URL specified in postFlowUrl instead.

Did this help?