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.
Starting the checkout
Add a container element to your HTML and call .start() after the SDK has loaded:
<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.
| Meaning |
|---|---|
| Successful new purchase. Use the |
| Customer already owns this product. Show appropriate messaging. |
| Product cannot be purchased based on configured rules. |
// 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();// 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).
// 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();Important!
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 is 253 chars long and this will be too long.
plenigo.Error
Fired for unrecoverable errors where the user cannot continue without reloading.
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.
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:
// 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:
location.href = "/success-page/?order=" + e.detail.orderId +"&session=" + e.detail.customerSession;
Full HTML example
<!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>