Redirect to a Custom Page after a Completed Popup Storefront Order

When a consumer completes an order using a Popup Storefront, the modal dialog closes, and the window shade disappears. The consumer returns to the page on your website that launched the Popup Storefront. However, you may prefer to redirect consumers to a different page on your site (such as a custom "thank you" page).

To implement this redirect, create a JavaScript function to handle the redirect and 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 Store Builder Library method can invoke a custom JavaScript function when a consumer exits the Popup Storefront dialog. This can occur when they select X to close the dialog, or Continue. When the transaction is completed, 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 is incomplete, 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"

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, see Get Started with Store Builder Library.
 

Example JavaScript Function

This example of a JavaScript function redirects consumers 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>

First, the redirect function 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 consumer is redirected to a custom page. If no order reference is present when the popup closes, that indicates that the consumer closed the popup before completing the order. In that case, the example above writes a simple message ("no order ID") to the browser's console log.

Grant Immediate Access to Fulfillments

If you plan to grant access to a product or service immediately after completion of transaction processing, you should validate 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. This allows your to validate the transaction details before granting access to the user. For more information, see Validating Popup Storefronts.