Adding Checkout Page to Super

Sell digital products, professional services, subscriptions and more directly from your Super site.

Checkout Page lets you add customizable checkouts to your Super.so site. You can sell with checkout embeds, checkout pop-ups and checkout links.

Check out a demo of each option below. For detailed install instructions, click the ‘Install instructions’ button in the top-right corner.

1. Sell with a checkout embed on your Super.so site

Plan your financial future

Keep track of your expenses, savings and investments, all from within Notion.

super-embed:
<div class="cp-checkout" data-checkout="https://checkoutpage.co/c/checkoutpage/notion-financial-planner" style="width: 100%; max-width: 480px;"></div>
<script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

Below is a callout block showing what content is in the Code block above

💡
super-embed: <div class="cp-checkout" data-checkout="https://checkoutpage.co/c/checkoutpage/notion-financial-planner" style="width: 100%; max-width: 480px;"></div> <script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

2. Sell with a checkout pop-up on your Super.so site

Plan your financial future

Keep track of your expenses, savings and investments, all from within Notion.

super-embed:
<a href="https://checkoutpage.co/c/checkoutpage/notion-financial-planner" class="cp-button">Buy now</a>
<script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

Below is a callout block showing what content is in the Code block above

💡
super-embed: <a href="https://checkoutpage.co/c/checkoutpage/notion-financial-planner" class="cp-button">Buy now</a> <script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

3. Sell with a checkout link or button on your Super.so site

Plan your financial future

Keep track of your expenses, savings and investments, all from within Notion.

Adding the super-embed: code block

This code needs to be put in the Head section of global code (In Super, go to Code > Head).

You can then use a code block, and pre-fix it with "super-embed:” to automatically insert the contents as HTML.

For detailed install instructions, click the ‘Install instructions’ button in the top-right corner.

<script>

function clearBlock(el) {
        const node = el.parentElement.parentElement;
        node.innerHTML = '';
        return node;
    }

const SELECTOR = 'code:not([super-embed-seen])';
function setupEmbeds() {

    document.querySelectorAll(SELECTOR).forEach((node) => {
    node.setAttribute('super-embed-seen', 1);
    if (node.innerText.startsWith('super-embed:')) {
        const code = node.innerText.replace('super-embed:', '');
            const parentNode = clearBlock(node);
            parentNode.innerHTML = code;
            parentNode.querySelectorAll('script').forEach((script) => {
                if (!script.src && script.innerText) {
                    eval(script.innerText);
                } else {
                    const scr = document.createElement('script');
                    scr.src = script.src;
                    document.body.appendChild(scr);
                }
            })
        }
    })
}

setupEmbeds();

var observer = new MutationObserver(function(mutations) {
   if (document.querySelector(SELECTOR)) {
      setupEmbeds();
    }
});
observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

</script>