Redirecting to a Custom Page Following Popup Storefront Order Completion

Overview

When an order is completed using a Popup Storefront, by default the modal dialog will close and the window shade will vanish, returning customers to the page on your website that launched the Popup Storefront. However, you may prefer to redirect customers to a different page on your site (such as a custom "thank you" page) instead.

This can be accomplished by creating a JavaScript function to handle the redirect, and adding a single line to the Store Builder Library code that loads the Popup Storefront.
 

Example JavaScript function

The following example of a JavaScript function - which would be embedded in the body of the webpage that loads the Popup Storefront, after the Store Builder Library code - is designed to redirect customers who have purchased successfully to a custom page.

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

The example above checks for an order reference returned via the data-popup-closed event. If an order reference is present, it is logged to the browser's console and the customer is redirected to a custom page. If no order reference is present when the popup is closed, that indicates that popup was closed before reaching the completion page, implying that no order has been processed. In that case, the example above writes a simple message ("no order ID") to the browser's console log.

Assigning a JavaScript function to the popup closed event

The data-popup-closed method of the Store Builder Library can invoke a custom JavaScript function upon closure of the Popup Storefront modal dialog by the customer - either when the customer clicks Continue or clicks the "X" to close the dialog. If the transaction has been processed successfully, the method delivers an object containing the order reference and the internal order ID to the specified JavaScript function.  For example:

popup closed: Object {id: "cbhpinwOS52LKQ5SMoU812", reference: "FUR161216-8786-75309"}

If the purchase has not been completed successfully (e.g. if the customer closes the dialog without purchasing), these values will be null.

To assign your custom JavaScript function to the data-popup-closed event, simply add a line to the Store Builder Library code you have copied and pasted from Dashboard. For example, if your custom JavaScript function is named "onFSPopupClosed", you would add this:

data-popup-closed="onFSPopupClosed"
 

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

For more information, please see Getting Started with Store Builder Library.