Redirecting to a Custom Page Following Popup Storefront Order Completion

When a customer completes an order using a Popup Storefront, by default, the modal dialog closes, and the window shade disappears. The customer returns 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 redirection 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 redirects customers who have purchased successfully to a custom page. You could embed this example in the body of your webpage that loads the Popup Storefront, after the Store Builder Library code.

<script>
    function onFSPopupClosed(orderReference) {
      if (orderReference)
      {
           console.log(orderReference.reference);
           fastspring.builder.reset();
           window.location.replace("http://yourexamplestore.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, the event logs it to the browser's console, and the customer is redirected to a custom page. If no order reference is present when the popup closes, that indicates that the customer closed the popup before reaching the completion page. The implication is that no successful 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 data-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 succeeded, 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: "YES201216-8786-75309"}

If the purchase has not succeeded (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, add a line to the Store Builder Library code you have copied and pasted from the FastSpring App. 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.3/fastspring-builder.min.js""
type="text/javascript"
data-popup-closed="onFSPopupClosed"
data-storefront="yourexamplestore.onfastspring.com/popup-example">;
</script>

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