Redirect after checkout

When a customer completes an order in your popup checkout, the modal closes and returns them to your webpage. You can override this behavior by assigning a JavaScript callback that redirects the customer to a custom page.

Compatible store types: Redirects on this page work for popup checkouts and are not compatible with embedded checkouts.

The sections below walk through the full redirect setup. Select a section or use the TOC on the right to jump ahead.

Add a redirect

Assign a function to the close event of your popup checkout.

The data-popup-closed callback triggers a JavaScript function when the popup closes. If the checkout is completed successfully, the callback passes an object containing the order reference and internal order ID. If the transaction is incomplete, the values are null.

Set data-popup-closed to the name of your JavaScript function. In the example below, the callback function is onFSPopupClosed.

<script
id="fsc-api"
src="https://sbl.onfastspring.com/sbl/1.0.6/fastspring-builder.min.js"
type="text/javascript"
data-popup-closed="onFSPopupClosed"
data-storefront="yourexamplestore.onfastspring.com/popup-example">;
</script>

Example function

The example below redirects customers to a custom page after a successful transaction. First, it checks for an order reference. If the order reference is present, the event logs it to the browser’s console and redirects the customer to a new page. You can embed a similar example in the body of the webpage that loads the popup checkout.

<script>
    function onFSPopupClosed(orderReference) {
      if (orderReference)
      {
           console.log(orderReference.id);
           fastspring.builder.reset();
           window.location.replace("http://yourexamplestore.com/?orderId="" + orderReference.id);
      } else {
           console.log("no order ID");
          }
    }
</script>

Validate the order

If your post-checkout experience provides immediate access to features, content, or services, validate the order details before granting access.

Use the returned order ID to make a GET request to the /orders endpoint and confirm the transaction. For more information, see the Orders API.