Enhance your checkout

After embedding your checkout, you can fine-tune its behavior or integrate it with your fulfillment workflow. The following enhancements are optional and help improve your buyer experience and data validation flow.

Redirect guidance

Embedded checkouts complete within the same page and do not currently support built-in redirect events through the Store Builder Library. However, you can control post-purchase navigation using your own website logic.

Common approaches:

• Include a thank-you or confirmation message on the same page after the order completes.

• Use your own front-end code to navigate users after confirming order success through the Orders API.

• If you need an automated redirect workflow, consider using the popup checkout, which supports the order.completed event. For details, see Redirecting to a custom page following popup checkout completion.

  Note: The redirect methods documented for popup checkouts are not compatible with embedded checkouts.

Validate orders

If your site grants product access or fulfillment immediately after checkout, validate the order data to confirm payment before delivering the product or license.

You can retrieve the order ID in two ways:

• In the FastSpring app, go to Sales > Orders, then click an order to open its details page.
• Use the List all orders endpoint (GET /orders) to return a list of all orders, then locate the specific order ID.

Once you have the order ID, you can retrieve the full order details and confirm completion by calling the Retrieve an order endpoint (GET /orders/{order_id}).

Example API request:

curl --request GET \
     --url https://api.fastspring.com/orders/abcDEFgHiJklM1N-3OP9q \
     --header 'accept: application/json'

Example API response (trimmed for clarity):

{
  "order": "abcDEFgHiJklM1N-3OP9q",
  "id": "abcDEFgHiJklM1N-3OP9q",
  "reference": "ABO251107-5140-60151",
  "completed": true,
  "currency": "USD",
  "total": 10.0,
  "totalDisplay": "$10.00",
  "invoiceUrl": "https://yourexamplestore.onfastspring.com/account/order/ABO251107-5140-60151/invoice/IVHJ7CXPH5IVEK7EIWLA5WBYNWSU",
  "customer": {
    "first": "Jane",
    "last": "Doe",
    "email": "[email protected]"
  },
  "items": [
    {
      "product": "furious-falcon",
      "display": "Furious Falcon",
      "quantity": 1,
      "subtotalDisplay": "$10.00"
    }
  ],
  "payment": {
    "type": "test",
    "cardEnding": "4242"
  }
}

The most important fields to check are:

Tip: Validate the order before granting access or fulfilling products to ensure the transaction is complete and legitimate.

Spinner placement

While the embedded checkout loads, a spinner appears by default in the middle of the page. You can reposition it to appear centered within the checkout container for a more polished layout.

To adjust spinner placement:

<div id="fsc-embedded-checkout-container" style="position: relative;">
</div>

This ensures the spinner aligns visually with your checkout container rather than the entire webpage.

Tip: Positioning the spinner within your checkout container improves perceived load time and keeps focus on the checkout area.