Help center / Adding Checkout Page to Super

Adding Checkout Page to Super

Use Checkout Page to sell digital products, physical products, services and more on your Super site.

Super is an amazing tool to build websites with Notion.

Here’s how you can sell digital downloads, subscriptions, products & services directly on your Super site with Checkout Page’s customizable checkouts.

After signing up for Checkout Page and creating a checkout, follow these steps to add checkouts to your Super site.

There are 3 ways you can add checkouts to Super:

  1. Embed a checkout on your site
  2. Open a checkout in a pop-up
  3. Link to a checkout with a link or button

View demo

Embed a checkout on your site

Super.so checkout embed example

To embed a checkout on a Super site, we need to be able to add some Custom HTML. Super makes this possible by creating a super-embed: block.

  • Open your Super site in the dashboard and click Code.
  • In the Head tab, paste the following code:
<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>
  • Open Notion and navigate to the page you’re adding the checkout to
  • Add a Code block
  • On the first line, write super-embed:
  • Go to the Checkout Page dashboard and locate your checkout
  • Click Share
  • Go to Embed > Custom website
  • Copy ‘Embed code’
  • Go back to Notion. In the code block, paste the Embed code.

Super.so checkout embed code

  • Go back to Super & refresh your site!

Open your checkout in a pop-up

Super.so checkout popup example

To add a checkout pop-up to a Super site, we need to be able to add some Custom HTML. Super makes this possible by creating a super-embed: block.

  • Open your Super site in the dashboard and click Code.
  • In the Head tab, paste the following code:
<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>
  • Open Notion and navigate to the page you’re adding the checkout to
  • Add a Code block
  • On the first line, write super-embed:
  • Go to the Checkout Page dashboard and locate your checkout
  • Click Share
  • Go to Pop up > Custom website
  • Copy ‘Link code to open pop-up’
  • Go back to Notion. In the code block, paste the Link code.

Super.so checkout popup code

  • Go back to Super & refresh your site. Click the link to open the checkout pop-up!
  • Add Custom CSS to style your link or button, for example:
.cp-button {
  display: inline-block;
  background: rgba(0,0,0,1);
  color: white;
  padding: 1em;
  border-radius: 8px;
  text-decoration: none;
  transition: all 300ms ease;
}

.cp-button:hover {
  background: rgba(0,0,0,0.8);
}

Super.so checkout link example

  • Open Notion and navigate to the page you’re adding the checkout to
  • Add a Callout block from The Super Builder
  • Go to checkoutpage.co and locate your checkout in the dashboard
  • Click Share
  • On the tab ‘Payment link’, click Copy
  • Go back to Notion
  • Replace the link with the payment link you copied

Super.so checkout link settings

  • Go back to Super & refresh your site. Click the link to open the checkout pop-up!

Start selling online
in minutes

No credit card needed

2018 - 2022 © Checkout Page. All rights reserved.