Collapse Menu
Docs Home
Extensibility Options
Contact Support

Redirecting to a Custom Page Following Popup Storefront Order Completion

Overview

This article explains how you can redirect customers to a specific page on your site (such as a custom "thank you" page) following a completed Popup Storefront transaction.

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.

 Note

The following example is provided for illustration only, and is provided "as is." You must modify it (including the target URL at the very least) before deploying it on your webpage. Knowledge of JavaScript is helpful 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://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.

 Caution

If you plan to grant access to a product or service immediately upon completion of transaction processing, you should validate the order data first. To do this, make a GET call to the /orders endpoint of the FastSpring API using the order ID returned via this event. Doing so allows you 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 or order-specific details.

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 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.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.

Try FastSpring

Get a free account and see why FastSpring is the ecommerce partner of choice for software providers around the world. Try our full-service ecommerce solution today to unlock revenue growth for your online company.