Redirecting to a Custom Page Following Popup Storefront Order Completion

Last modified June 29, 2017

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.

Note

The following example is provided for illustration only, and is provided "as is". You will need to modify it (including the target URL at the very least) before deploying it on your web page. Knowledge of JavaScript is recommended when implementing this.
Example of a JavaScript redirect function
<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.

Caution

If you plan to grant access to a product or service immediately upon completion of transaction processing, we recommend that you call the /orders endpoint of the FastSpring API using the order ID returned via this event, to validate the transaction details before granting access to the user. For more information, please see Validating Popup Storefront Orders.

Tip

You can also use the /orders endpoint of the FastSpring API to retrieve transaction details and populate your custom landing page with customer-specific and / or order-specific details.

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"
 

Example of a Popup Storefront with a data-popup-closed function assigned
<script
id="fsc-api"
src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.7.4/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.