Super is an amazing tool to create websites with Notion.

In this guide, we show you how you can sell digital downloads, subscriptions, products & services directly on your Super site, like in this demo.

We'll explain how you add one page checkout embeds, checkout pop-ups and checkout links.

After signing up for Checkout Page and creating a checkout, follow the steps below.

With Checkout Page, you can easily create a one page checkout and add it to your site in different ways.

There are 3 ways you can add one page 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

Add the Super Embed block

To add one page checkouts to Super sites, we need to be able to add some Custom HTML. Super makes this possible by creating a super-embed: block.

1. Open your Super site in the dashboard and click Code.
2. 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>

Now, continue with one of the checkout options below: embed, pop-up or payment link.

Embed a checkout on your site

The checkout embed makes it possible to sell products and services inline on your site. It's fully responsive!

These are the steps to embed a one page checkout:

1. Open Notion and navigate to the page you’re adding the checkout to
2. Add a Code block
3. On the first line, write super-embed:
4. Go to the Checkout Page dashboard and find your checkout
5. Click Share checkout
6. Go to Embed and select Custom website
7. Copy Embed code
8. Go back to Notion. In the code block, paste the Embed code.

9. Go back to Super & refresh your site!

Open your checkout in a pop-up

The checkout pop-up let's you sell products and services in a pop-up on your site. You usually link it to a button. You can add as many pop-ups to a page as you like!

These are the steps to add a one page checkout pop-up:

1. Open Notion and navigate to the page you’re adding the checkout to
2. Add a Code block
3. On the first line, write super-embed:
4. Go to the Checkout Page dashboard and find your checkout
5. Click Share checkout
6. Go to Pop up and select Custom website
7. Copy Link code to open pop-up
8. Go back to Notion. In the code block, paste the Link code.

9. Go back to Super & refresh your site. Click the link to open the checkout pop-up!
10. 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);
}

Link to your checkout with a link or button

1. Open Notion and navigate to the page you’re adding the checkout to
2. Add a Callout block from The Super Builder
3. Go to checkoutpage.co and find your checkout in the dashboard
4. Click Share checkout
5. On the tab Payment link, click Copy
6. Go back to Notion
7. Replace the link with the payment link you copied

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