JavaScript SDK client side integration
The Frisbii Media JavaScript-SDK offers tools to implement Frisbii Media interfaces into any website.
Checkout with API v3.0
Frisbii Media started its APIv3.0 in late 2019. It comes with several new API-calls.
Installation
The installation is equal to Frisbii Media Javascript-SDK and needs no changes. You can copy this code with matching company id from you Frisbii Media backend in section settings / developer. Please note, that javascript embeds may slow down your page. Thats why we designed our sdk to be embeded at the end of your html code. Please also note, that your Frisbii Media stage account has a different company id to your live account. Working against Frisbii Media stage also means, to load the sdk from a different domain.
<div id="plenigoCheckout"></div>
<!-- please replace {your_companyId} with your companyId -->
<!-- for implementing in production environment -->
<script src="https://static.plenigo.com/static_resources/javascript/{your_companyId}/plenigo_sdk.min.js"
data-disable-redirect="true"
data-companyId="{your_companyId}"
data-lang="en"></script>
<!-- for implementing in stage environment only -->
<script src="https://static.plenigo-stage.com/static_resources/javascript/{your_companyId}/plenigo_sdk.min.js"
data-disable-redirect="true"
data-companyId="{your_companyId}"
data-lang="en"></script>
Starting checkout
To start a Frisbii Media Checkout you need to obtain a purchaseId Frisbii Media Checkout starts in an iframe and needs some Javascript to 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();
Dealing with already bought products
If customer starts a checkout with a product he has already bought, checkout will display a message and a next button. Next button will trigger plenigo.PurchaseSuccess-Event too, but not with the original orderId. It will use -1 instead:
// 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();
Empty Checkout
If customer starts a checkout with a product he can’t buy based on rules, checkout will show an error message. If user wants to proceed, checkout calls
plenigo.PurchaseSuccess-Event too, but not with the original orderId. It will use -2 instead:
// 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();
Deal with errors
The Frisbii Media checkout tries to finish every checkout successfully. But during communication with payment providers there are rare cases checkout may fail. In these cases additional event plenigo.PurchaseFailed is used.
We recommend to restart checkout in these cases.
// 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.
Example with full html
Just put the Frisbii Media Javascript call somewhere in your html.
<!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.plenigo.com/static_resources/javascript/{your_companyId}/plenigo_sdk.min.js" data-disable-redirect="true" data-lang="de"></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>
Dealing with errors
If there are Errors in the checkout, user gets displayed error message and steps, how to proceed. If there are errors, the customer can not fix, checkout will stop with an error message. If customer is not able to restart the checkout process by simply reloading the whole page, you should implement some error handling here. You should start by listening to error events:
<script>
// Checkout breaks with a javascript-Event one have to listen to
document.addEventListener("plenigo.Error", function(e) {
// debugging Code:
if (e.type !== "plenigo.Error") {
return false;
}
console.info("Event is: " + e.type);
console.info(e);
console.info("Custom data is: ", e.detail);
// here we display error message in console:
console.info(e.detail.errorMsg);
// reload the page to restart checkout
location.reload(true);
});
</script>
Configuration
var config = { elementId: "plenigoCheckout" };
new plenigo.Checkout(purchase.purchaseId, config).start();
config can have the following attributes:
| Attribute name | is mandatory? | example | description |
|---|---|---|---|
| elementId | mandatory | "plenigoCheckout" | Value of the id-attribute of an existing HTML-Element in current DOM. It should be accessible with document.getElementById |
| returnUrl | "https://example.com/checkout" | If it comes to a return from a external payment page like PayPal, PayOne, Stripe, AmazonPay or similar, plenigo checkout will use url of current page (location.href) or attribute returnUrl, if provided. Length of `returnUrl` is limited to 220 characters including protocols, ports and all query parameters. | |
| restartUrl | "https://example.com/products" | If it comes to an error during checkout process, some error pages offer your customer ability to restart the process. This normally reloads the whole page. If this doesn't fit to your application, you can provide an url, where the customer can restart the process. | |
| supportedCardTypes | ['V','M','J','A'] | If you are using PayOne as PSP you can configure card types. Use [PayOne documentation](https://docs.payone.com/pages/releaseview.action?pageId=1214523). | |
| filterSalutations | ['DIVERSE'] | Use `filterSalutations` if you want to filter salutation values. It's value has to be of type array. Avaiable values are `DIVERSE`, `NONE`, `MR`, `MRS` | |
| address | { postbox: true, phoneNumber: true } | Use `address` if you want to display additional input fields in address forms. It's value has to be of type object. Avaiable keys are `postbox`, `phoneNumber`. Value has to be of type `bool`. | |
| customCSS | https://example.com/assets/checkout.css | Use `customCSS` if you want to overwrite checkout styles. You have to use complete https url of your custom css file. This file will be loaded as last source. Please take care of CORS Headers. | |
| checkoutDesignId | CD_R0MWF7YXMJ13TNDED | Use `checkoutDesignId` if you want to overwrite checkout design variant. |
Passing additional data through the checkout
You can pass some additional data through the checkout. This would be usable for example to have a redirect url after the checkout.
// 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);
console.info("additional data is: ", e.detail.data);
if (typeof e.detail.orderId !== "undefined") {
location.href = e.detail.data.redirectUrl;
return;
}
// 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", redirectUrl: "https://www.example.com/link/to/article.html" }).start();
If there are Errors in the checkout, user gets displayed error message and steps, how to proceed. If there are errors, the customer can not fix, checkout will stop with an error message. If customer is not able to restart the checkout process by simply reloading the whole page, you should implement some error handling here. You should start by listening to error events:
<script>
// Checkout breaks with a javascript-Event one have to listen to
document.addEventListener("plenigo.Error", function(e) {
// debugging Code:
if (e.type !== "plenigo.Error") {
return false;
}
console.info("Event is: " + e.type);
console.info(e);
console.info("Custom data is: ", e.detail);
// here we display error message in console:
console.info(e.detail.errorMsg);
// reload the page to restart checkout
location.reload(true);
});
</script>
Work with custom css
In the Frisbii Media backend, or with additional configration customCSS you simply can override Frisbii Media styles to provide your own style by using the logic of cascading style sheets. Checkout at the moment shows most common information and hides some very specific information. As there are:
Cancelation information
.price-list table tr.cancel-rules {
display: inherit;
}
Using Frisbii Media SSO
The code above shows, how to start a Frisbii Media checkout with you own user provider. Frisbii Media itself offers you an outstanding SSO functionality to enable you using users credentials on every website.
Starting it is quite easy. The Frisbii Media Javascript comes with its SSO object: plenigo.SSO.
The login or registration process is completely in an iframe. To start it, you can chose between one of these functions: login, register, forgotPassword.
Installation
The installation is equal to Frisbii Media Javascript-SDK.
<div id="plenigoLogin"></div>
<!-- please replace {your_companyId} with your companyId -->
<script src="https://static.plenigo.com/static_resources/javascript/{your_companyId}/plenigo_sdk.min.js"
data-disable-redirect="true"
data-sso="true"
data-companyId="{your_companyId}"
data-lang="de"></script>
Starting Registration
To start a Frisbii Media SSO Registration you need to the following code. Frisbii Media SSO starts in an iframe and needs some Javascript to start:
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
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 = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId: "plenigoLogin" // the DOM element you want to put the iframe in
};
new plenigo.SSO(config).register();
Starting Login
To start a Frisbii Media SSO Login you need to the following code. Frisbii Media SSO starts in an iframe and needs some Javascript to start:
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
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 = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId: "plenigoLogin" // the DOM element you want to put the iframe in
};
new plenigo.SSO(config).login();
Additional configuration examples
Javascript methods know some more configuration
// start the process
var config = {
elementId: "plenigoLogin", // the DOM element you want to put the iframe in
email: "john.doe@example.com", // default: '' -> prefill email address in forms
source: "news-website", // default: 'plenigoSSO' -> source for registration, to filter users by their origin
showTabs: true, // show registration and login as tabs on top of the page
};
new plenigo.SSO(config).login();
Starting Registration with connect feature (loginIdentifier)
If you import subscriptions into Frisbii Media system there may be some users without an e-mail address. To enable these users to login into Frisbii Media SSO they have to connect their imported account with their e-mail address. Frisbii Media connect feature will lead you customer through this process.
You have to enable and configure this feature in checkout settings in the Frisbii Media backend. To start the process you should create an additional registration process with the following settings:
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
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 = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId: "plenigoLogin", // the DOM element you want to put the iframe in
loginIdentifier: true
};
new plenigo.SSO(config).register();
To display the connect feature in registration screen you can use property showLoginIdentifier:
// start the process
var config = {
elementId: "plenigoLogin", // the DOM element you want to put the iframe in
showLoginIdentifier: true // show link to connect feature in registration screen
};
new plenigo.SSO(config).register();
You can use custom text for the link:
// start the process
var config = {
elementId: "plenigoLogin", // the DOM element you want to put the iframe in
showLoginIdentifier: "Click here to connect with an existing subscription" // show link to connect feature in registration screen
};
new plenigo.SSO(config).register();
Starting Registration without using Frisbii Media token process
You may wonder about the token process: If you register as a new user, you have to validate email address with a token Frisbii Media sends to the new registered email. If you want to implement a different process, you can use your own implementation. Simply add a verification url to the process. You will find this url in the email templates in Frisbii Media backend to be able to start your very own process right here. Frisbii Media SSO starts in an iframe and needs some Javascript to start:
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
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 = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId: "plenigoLogin", // the DOM element you want to put the iframe in
verificationUrl: "https://www.example.com/start-email-verification" // url that points to verification process on your site
};
new plenigo.SSO(config).register();
Implementation
If configured Frisbii Media adds two parameters to verification URL: verificationToken and token. You simply grab these two parameters and call: https://api.plenigo-stage.com/#operation/validateRegistration to verify user.
Starting Password forgot
To start a Frisbii Media SSO Login you need to the following code. Frisbii Media SSO starts in an iframe and needs some Javascript to start:
// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
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 = "/start-session/?session=" + e.detail.customerSession;
});
// start the process
var config = {
elementId: "plenigoLogin" // the DOM element you want to put the iframe in
};
new plenigo.SSO(config).forgotPassword();
If you want to set the email address before starting password forgot process you have to change your code in the following way:
// start the process
var config = {
elementId: "plenigoLogin", // the DOM element you want to put the iframe in
email: "john.doe@example.com" // use config attribute email to set the email address in password forgot form
};
new plenigo.SSO(config).forgotPassword();
Starting a Checkout with Frisbii Media SSO
To start a Frisbii Media Checkout you need to obtain a purchaseId Frisbii Media Checkout starts in an iframe and needs some Javascript to start:
// 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 + "&session=" + e.detail.customerSession;
});
// start Checkout
// put in purchaseId and elementId to start checkout
new plenigo.Checkout("$purchase.purchaseId", { elementId: "plenigoCheckout" }).login();
To start with registration instead of login, please use new plenigo.Checkout("$purchase.purchaseId", { elementId: "plenigoCheckout" }).register();.
Multi user products
Frisbii Media enables you to sell products for families or B2B customers. These products work with an invitation. Once a multi user product is bought, customer can invite people to use it together with himself. You can start invitation process with Frisbii Media javascript SDK.
Start invitation
The invitation process is called connection. You connect a permission to use a product with a person. The process itself will start either login or registration process. Thats why it is an enhancement of these already known processes. Connect process starts like this:
// starting with login
new plenigo.SSO({
elementId: 'plenigoCheckout',
connect: 'USER',
}).login();
// starting with registration
new plenigo.SSO({
elementId: 'plenigoCheckout',
connect: 'USER',
}).register();
You can prefill the token for your customers to skip this step in the process:
// starting with registration, prefill process and skip token form
new plenigo.SSO({
elementId: 'plenigoCheckout',
connect: 'USER',
connectToken: 'E97876wef8EFGRWR',
}).register();
If customer is already logged in, you can skip login during connection process. You need to create a transferToken to pass it into the javascript method:
// starting with registration, prefill process and skip token form
new plenigo.SSO({
elementId: 'plenigoCheckout',
connect: 'USER',
transferToken: 'Jhge6jhgIRBMkjhe9'
}).register();
Using Web-Analytics
Since the Frisbii Media checkout is running in an iFrame, you can’t track the whole process in your analytics tool. We offer the ability to track all page loads inside of the iFrame by using Javascript Events.
// All page loads trigger this event
document.addEventListener("plenigo.WebAnalyticsLoad", function (e) {
// debugging Code:
console.group("ANALYTICS");
console.info("Event is: ", e);
console.info("Custom data is: ", e.detail);
console.groupEnd();
});
The different pages are:
| Eventname |
Checkout |
SSO |
Description |
category |
|---|---|---|---|---|
| defaultAddressesForm |
x |
|
Enter an address |
data |
| defaultAddressesSelect |
x |
|
Select an existing address |
data |
| defaultPaymentAmazonForm |
x |
|
Start amazon payment |
payment |
| defaultPaymentAmazonSuccess |
x |
|
Submit amazon payment |
payment |
| defaultPaymentCreditcardPayoneForm |
x |
|
Start PayOne Payment with credit card |
payment |
| defaultPaymentCreditcardStripeForm |
x |
|
Start Stripe Payment with credit card |
payment |
| defaultPaymentCreditcardSubmit |
x |
|
Submit credit card form |
payment |
| defaultCrossSellingForm |
x |
|
Cross Selling formular |
Subscription |
| defaultCrossSellingSubmit |
x |
|
Cross Selling submit |
Subscription |
| defaultPaymentExistingSubmit |
x |
|
Existing payment submit |
payment |
| defaultPaymentIdealSubmit |
x |
|
iDeal payment submit |
payment |
| defaultPaymentIdealForm |
x |
|
iDeal payment form |
payment |
| defaultPaymentInvoiceSubmit |
x |
|
Invoice payment submit |
payment |
| defaultPaymentInvoiceForm |
x |
|
Invoice payment form |
payment |
| defaultPaymentAddressForm |
x |
|
Enter an address |
data |
| defaultPaymentPaypalForm |
x |
|
PayPal payment form |
payment |
| defaultPaymentPaypalSuccess |
x |
|
PayPal payment submit |
payment |
| defaultPaymentSepaSubmit |
x |
|
Sepa payment submit |
payment |
| defaultPaymentSepaForm |
x |
|
Sepa payment form |
payment |
| defaultVoucherForm |
x |
|
Voucher input form |
voucher |
| defaultPaymentZeroSubmit |
x |
|
Zero payment submit |
payment |
| defaultConnectForm |
x |
|
Corporate Account connecting form |
Corporate account |
| defaultConnectSkip |
x |
|
Corporate Account skip connect process |
Corporate account |
| defaultConnectValidate |
x |
|
Corporate Account validate connect key |
Corporate account |
| defaultLoginForm |
|
x |
Login form |
sso |
| defaultLoginLoginVerifyTwoFactor |
|
x |
Two factor form |
sso |
| defaultPasswordForgottenResendMail |
|
x |
Resend mail in password forgotten process |
sso |
| defaultPasswordForgottenPasswordReset |
|
x |
Reset password form |
sso |
| defaultPasswordForgottenVerificationCode |
|
x |
Reset password verification code form |
sso |
| defaultPasswordForgottenPasswordSet |
|
x |
Reset password form |
sso |
| defaultPasswordForgottenVerifyTwoFactor |
|
x |
Two factor form in password forgotten process |
sso |
| defaultRegisterForm |
|
x |
Register process form |
Sso |
| defaultRegisterResendMail |
|
x |
Register process resend mail |
sso |
| defaultStepAdditonalDataForm |
|
x |
Additional data form, called, if company account needs some more data from customer |
sso |
| defaultLoginStepSessionForm |
|
x |
Verify sessions after login |
sso |
| defaultLoginStepSessionRemoveAll |
|
x |
Remove alle sessions after login |
sso |
| defaultStepSuccessRegister |
|
x |
Successfully registered |
sso |
| defaultStepSuccessLogin |
|
x |
Successfully logged in |
sso |
Using Selfservice with API v3.0
Frisbii Media offers a complete customer selfservice portal, where users can manage their SSO profiles, payment methods and orders.
You can embed this selfservice portal into your website with a single Javascript method: new plenigo.Snippets(plenigoTransferToken, {elementId: "plenigoSnippets"}).start();. Where plenigoTransferToken represents a secure transfer token for a Frisbii MediaSessionString.
Create a session
If you are using Frisbii Media SSO you should already have a Frisbii Media session string. Otherwise you have to create a Frisbii Media session with an api call https://api.plenigo-stage.com/#operation/createCustomerSession. You can limit sessions in the Frisbii Media backend, the default limit is 2 sessions per user. If you then create a 3rd session, you will get an error message and have to delete one of the existing sessions.
Create a transfer token
For security reasons it is not recommended to work directly with this session string in any frontend application, javascript or html, since 3rd parties will have access to it. Thats why Frisbii Media uses a mechanism called Frisbii Media transfer token. It is used to generate a single one time token out of a session to be able to share it. To create a transfer token use the following call: https://api.plenigo-stage.com/#operation/createTransferToken.
Starting Snippets
<div id="plenigoSnippets"></div>
<!-- please replace {your_companyId} with your companyId -->
<script src="https://static.plenigo.com/static_resources/javascript/{your_companyId}/plenigo_sdk.min.js"
data-disable-redirect="true"
data-sso="true"
data-companyId="{your_companyId}"
data-lang="de"></script>
<script>
// use Frisbii Media session to create transfer token: https://api.plenigo-stage.com/#operation/createTransferToken
new plenigo.Snippets(plenigoTransferToken, {elementId: "plenigoSnippets"}).start();
</script>
Starting Snippets with special pages
If you want to display only one page of the selfservice, you can control it by using method
new plenigo.Snippets(plenigoTransferToken, {elementId: "plenigoSnippets"}).open(plenigo.CONSTS.SNIPPETS.PAYMENT_METHODS);
The available constants are the following:
PERSONAL_DATA: 'PERSONAL_DATA',
PERSONAL_DATA_ADDRESS: 'PERSONAL_DATA_ADDRESS',
PERSONAL_DATA_SETTINGS: 'PERSONAL_DATA_SETTINGS',
ADDRESS_DATA: 'ADDRESS_DATA',
PERSONAL_DATA_PASSWORD: 'PERSONAL_DATA_PASSWORD',
ORDER: 'ORDER',
INVOICE: 'INVOICE',
DASHBOARD: 'DASHBOARD',
SUBSCRIPTION: 'SUBSCRIPTION',
PAYMENT_METHODS: 'PAYMENT_METHODS',
BILLING_ADDRESS_DATA: 'BILLING_ADDRESS_DATA',
DELIVERY_ADDRESS_DATA: 'DELIVERY_ADDRESS_DATA',
CREDIT_CARD: 'CREDIT_CARD',
BANK_ACCOUNT: 'BANK_ACCOUNT',
PERSONAL_DATA_PROTECTION: 'PERSONAL_DATA_PROTECTION',
TERMS_AND_CONDITIONS: 'TERMS_AND_CONDITIONS',
NEWSLETTER: 'NEWSLETTER',
MULTI_USER_ACCOUNTS: 'MULTI_USER_ACCOUNTS',
OPT_IN: 'OPT_IN'
Show a subscription detail page only
If you want to provide the shortest possible way to a customers subscription, you can start self service just in a detail view:
new plenigo.Snippets(plenigoTransferToken, {elementId: "plenigoSnippets", subscriptionId: 123456}).start();
manipulate or hide Snippets navigation
You can hide navigation or toggle navigation type
new plenigo.Snippets(plenigoTransferToken, {elementId: "plenigoSnippets", navigation: plenigo.CONSTS.SNIPPET_NAVIGATION.DEFAULT}).open(plenigo.CONSTS.SNIPPETS.PAYMENT_METHODS);
The available constants are the following:
OFF: 'OFF', // hide navigation
HORIZONTAL: 'HORIZONTAL', // display navigation on top of the page
VERTICAL: 'VERTICAL', // display navigation on the left side of the page
DEFAULT: 'HORIZONTAL', // the default setting
Disable User Data to prevent changes
If Frisbii Media is not your SSO, customers should change their user data as there are e-mail address, password or 2-factor settings directly in your SSO. In this case you can disable or hide managing user data in self service. You simply have to enhance the configuration a bit:
{
elementId: "plenigoSnippets",
displaySettings: {
SSO: {
personalDetails: 'VIEW',
twoFactor: 'HIDE'
}
}
}
You can chose from these values: SHOW, HIDE and EDIT. Here is the complete example:
let snippetConfig = {
elementId: "plenigoSnippets",
displaySettings: {
SSO: {
personalDetails: 'VIEW',
twoFactor: 'HIDE'
}
}
};
new plenigo.Snippets(plenigoTransferToken, snippetConfig).start();