Redirecting to a Custom Page After Checkout

When a customer completes an order in your popup storefront, the modal dialog closes, returning the customer to your webpage. However, you can redirect customers to a different page on your website. 

To implement the redirect, create a JavaScript function to handle the redirect. Add a single line to the Store Builder Library code that loads the popup storefront. 

Assign a JavaScript Function to the data-popup-closed Event

The data-popup-closed callback can invoke a custom JavaScript function when a customer exits the popup storefront. When they complete their translation, data-popup-closed delivers an object which contains the order reference and internal order ID to the specified JavaScript function. Incomplete transactions result in null values. 

1. Create a JavaScript function to redirect customers. See the example below. 
2. In your SBL Script, add one line. 
3. Enter data-popup-closed=” followed by the function name in the line. In the example below, the function is called onFSPopupClosed. 

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

Example JavaScript 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 storefront.

<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 Order Information

If you plan to share access to the product or service immediately after FastSpring processes the transaction, we recommend that you validate the data. To do so, use the associated order ID to make a GET call to the /orders endpoint.