Redirect to a Custom Page after a Completed Popup Storefront Order

Results in FastSpring Documentation:

Overview

How to redirect consumers to a specific page on your site (such as a custom "thank you" page) following a completed Popup Storefront transaction.

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>

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.id);
           fastspring.builder.reset();
           window.location.replace("http://yourexamplestore.com/?orderId="" + orderReference.id);
      } 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.

This example is for illustrative purposes only. You must modify it (with at least the Target URL) before deploying the code to your webpage. Knowledge of Javascript is useful in implementing this.

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.

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