---
title: "Checkout"
slug: "checkout-1"
updated: 2026-06-10T09:14:22Z
published: 2026-06-23T10:52:16Z
canonical: "help.frisbii.com/checkout-1"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout

The Frisbii Media checkout runs inside an iframe embedded in your page. You start it with `new plenigo.Checkout(purchaseId, config).start()` and react to the outcome via JavaScript events.

Before you can start the checkout on the frontend, you need a `purchaseId` from a server-side `preparePurchase` API call. See [Checkout: Prepare a Purchase](/frisbii-media/docs/checkout-prepare-purchase).

---

## Starting the checkout

Add a container element to your HTML and call `.start()` after the SDK has loaded:

```xml
<div id="plenigoCheckout"></div>
<script>
    document.addEventListener("plenigo.PurchaseSuccess", function(e) {
        if (e.type !== "plenigo.PurchaseSuccess") return false;
        let orderId = parseInt(e.detail.orderId);
        console.info("Purchase data:", e.detail);
        if (orderId > 0) {
            location.href = "/success-page/?order=" + orderId;
        } else {
            location.href ="/customer-came-again-page/";
        }
    });
    document.addEventListener("plenigo.PurchaseFailed", function(e) {
        if (e.type !== "plenigo.PurchaseFailed") return false;
        console.info("Checkout failed:", e.detail);
        location.href = "/customer-came-again-page/";
    });
    // purchaseId comes from your server-side preparePurchase call
    new plenigo.Checkout(purchaseId, { elementId: "plenigoCheckout" }).start();
</script>
```

---

## Events

### `plenigo.PurchaseSuccess`

Fired when the checkout flow completes — either after a successful payment or when the user exits a non-fatal state (already bought, or empty checkout). Always check `orderId` to determine the actual outcome.

| `orderId` value | Meaning |
| --- | --- |
| `&gt; 0` | Successful new purchase. Use the `orderId` to look up the order. |
| `-1` | Customer already owns this product. Show appropriate messaging. |
| `-2` | Product cannot be purchased based on configured rules. |

```javascript
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.PurchaseFailed", function(e) {
     // debugging Code:
     if (e.type !== "plenigo.PurchaseFailed") {
       return false;
     }
     console.info("Checkout failed! Custom data is: ", e.detail);
     // here we redirect to a new page         
      location.href = "/customer-came-again-page/";
   });

document.addEventListener("plenigo.PurchaseSuccess", function(e) {
     // debugging Code:
     if (e.type !== "plenigo.PurchaseSuccess") {
       return false;
     }
     let orderId = parseInt(e.detail.orderId);
     console.info("Custom data is: ", e.detail);
     // here we redirect to a new page
      if (orderId > 0) {
      // Solution from example before
         location.href = "/success-page/?order=" + orderId;
      } else {
         location.href ="/customer-came-again-page/";
      }
   });
// start Checkout
// put in purchaseId and elementId to start checkout
new plenigo.Checkout(purchase.purchaseId, { elementId: "plenigoCheckout" }).start();
```

```javascript
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.PurchaseFailed", function(e) {
        // debugging Code:
        if (e.type !== "plenigo.PurchaseFailed") {
          return false;
        }
        console.info("Checkout failed! Custom data is: ", e.detail);
        // here we redirect to a new page         
         location.href = "/customer-came-again-page/";
      });

document.addEventListener("plenigo.PurchaseSuccess", function(e) {
        // debugging Code:
        if (e.type !== "plenigo.PurchaseSuccess") {
          return false;
        }
        let orderId = parseInt(e.detail.orderId);
        console.info("Custom data is: ", e.detail);
        // here we redirect to a new page
         if (orderId > 0) {
         // Solution from example before
            location.href = "/success-page/?order=" + orderId;
         } else {
            location.href ="/customer-came-again-page/";
         }
      });
// start Checkout
// put in purchaseId and elementId to start checkout
new plenigo.Checkout(purchase.purchaseId, { elementId: "plenigoCheckout" }).start();
```

### `plenigo.PurchaseFailed`

Fired when a payment provider communication error causes the checkout to fail. Frisbii Media tries to recover from errors internally — `PurchaseFailed` is only triggered when recovery is not possible. **Recommendation: restart the checkout** in this case (e.g. reload the page).

```javascript
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.PurchaseFailed", function(e) {
        // debugging Code:
        if (e.type !== "plenigo.PurchaseFailed") {
          return false;
        }
        console.info("Checkout failed! Custom data is: ", e.detail);
        // here we redirect to a new page         
         location.href = "/customer-came-again-page/";
      });
document.addEventListener("plenigo.PurchaseSuccess", function(e) {
        // debugging Code:
        if (e.type !== "plenigo.PurchaseSuccess") {
          return false;
        }
        let orderId = parseInt(e.detail.orderId);
        console.info("Custom data is: ", e.detail);
        // here we redirect to a new page
         if (orderId > 0) {
         // Solution from example before
            location.href = "/success-page/?order=" + orderId;
         } else {
            location.href ="/customer-came-again-page/";
         }
      });
// start Checkout
// put in purchaseId and elementId to start checkout
new plenigo.Checkout(purchase.purchaseId, { elementId: "plenigoCheckout" }).start();
```

> [!CAUTION]
> **I****mportant!**
> 
> If you are using dynamic urls for the page to include the checkout, take care about the maximum length of its url. The url of the page containing a checkout should not be longer than 220 chars, including protocols, ports and all query parameters.
> 
> An example: [https://www.example.com/news/architecture/park-and-garden/why-everybody-needs-to-have-oaks-behind-the-house.0a2937db-e3f1-471f-8a5d-80212929ee30.html?utm_source=homepage&utm_medium=web&utm_campaign=summer_sale&utm_term=architecture&utm_content=gardening](https://www.example.com/news/architecture/park-and-garden/why-everybody-needs-to-have-oaks-behind-the-house.0a2937db-e3f1-471f-8a5d-80212929ee30.html?utm_source=homepage&amp;utm_medium=web&amp;utm_campaign=summer_sale&amp;utm_term=architecture&amp;utm_content=gardening) is 253 chars long and this will be too long.

### `plenigo.Error`

Fired for unrecoverable errors where the user cannot continue without reloading.

```javascript
document.addEventListener("plenigo.Error", function(e) {
    if (e.type !== "plenigo.Error") return false;
    console.info("Error message:", e.detail.errorMsg);
    // Reload the page to restart the checkout
    location.reload(true);
});
```

---

## Passing additional data through the checkout

You can pass arbitrary data through the checkout and read it back in the `PurchaseSuccess` event. This is useful, for example, to carry a redirect URL through the checkout flow.

```javascript
document.addEventListener("plenigo.PurchaseSuccess", function(e) {
    if (e.type !== "plenigo.PurchaseSuccess") return false;
    // Access your custom data via e.detail.data
    console.info("Additional data:", e.detail.data);
    if (typeof e.detail.orderId !== "undefined") {
        location.href = e.detail.data.redirectUrl;
        return;
    }
    location.href = "/success-page/?order=" + e.detail.orderId;
});
new plenigo.Checkout(purchaseId, {
    elementId:"plenigoCheckout",
    redirectUrl: "https://www.example.com/link/to/article.html"
}).start();
```

Any extra properties you add to the config object beyond the standard attributes are passed through as `e.detail.data` in the success event.

---

## Starting checkout with Frisbii Media SSO

If you are using Frisbii Media's own SSO, use `.login()` or `.register()` instead of `.start()`. This opens the checkout with an integrated login or registration step:

```javascript
// Opens checkout with login step
new plenigo.Checkout(purchaseId, { elementId: "plenigoCheckout" }).login();
// Opens checkout with registration step
new plenigo.Checkout(purchaseId, { elementId: "plenigoCheckout" }).register();
```

When using SSO, the `plenigo.PurchaseSuccess` event also includes a `customerSession` in `e.detail`:

```javascript
location.href = "/success-page/?order=" + e.detail.orderId +"&session=" + e.detail.customerSession;
```

---

## Full HTML example

```xml
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
</head>
<body>

    <header class="main">
        <h1>My 1st Checkout</h1>
    </header>

        <div id="plenigoCheckout"></div>
    
    
<!-- please replace {your_companyId} with your companyId -->
   <script src="https://static.frisbii-media-stage.com/web/v1/frisbii_media.min.js"
                                    data-company-id="{your_companyId}"
                                    data-lang="en"></script>   
   <script>
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.PurchaseSuccess", function(e) {
        // debugging Code:
        if (e.type !== "plenigo.PurchaseSuccess") {
          return false;
        }
        console.info("Event is: " + e.type);
        console.info(e);
        console.info("Custom data is: ", e.detail);
        // here we redirect to a new page
        location.href = "/success-page/?order=" + e.detail.orderId ;
      });
// start Checkout
// put in purchaseId and elementId to start checkout
new plenigo.Checkout("$purchase.purchaseId", { elementId: "plenigoCheckout" }).start();
    </script>

</body>
</html>
```

---