Add Checkout Page to Super.so

Swipe Pages is a page builder platform. Embed your Checkout Page within Swipe Pages campaigns to accept payments from your landing pages.

1. Super is an tool to create websites with Notion.
2. In this guide, we show you how you can sell digital downloads, subscriptions, products & services directly on your Super site, like in this demo.
3. We'll explain how you add one-page checkout embeds, checkout pop-ups and checkout links.
4. After signing up for Checkout Page and creating a checkout, follow the steps below.
5. With Checkout Page, you can easily create a one-page checkout and add it to your site in different ways.
6. There are 3 ways you can add one-page checkouts to Super:
7. Embed a checkout on your site
8. Open a checkout in a pop-up
9. Link to a checkout with a link or button

How do I add the Super Embed block?

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

How do I embed a checkout on my site?

1. The checkout embed makes it possible to sell products and services inline on your site. It's fully responsive!
2. These are the steps to embed a one-page checkout:
3. Open Notion and navigate to the page you're adding the checkout to
4. Add a Code block
5. On the first line, type the following: super-embed:
6. Go to the Checkout Page dashboard and find your checkout
7. Click on your checkout and then Share & embed on the top right corner
8. Go to Embed and select Custom website
9. Copy Embed code
10. Go back to Notion. In the code block, paste the Embed code
11. Go back to Super & refresh your site!

How do I open my checkout in a pop-up?

1. The checkout pop-up lets 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!
2. These are the steps to add a one-page checkout pop-up:
3. Open Notion and navigate to the page you're adding the checkout to
4. Add a Code block
5. On the first line, type the following: super-embed:
6. Go to the Checkout Page dashboard and find your checkout
7. Click on your checkout and then Share & embed on the top right corner
8. Go to Pop up and select Custom website
9. Copy Link code to open pop-up
10. Go back to Notion. In the code block, paste the Link code
11. Go back to Super & refresh your site. Click the link to open the checkout pop-up!
12. 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);
}

How do I link to my checkout?

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 on your checkout and then Share & embed on the top right corner
5. Copy the Payment link
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!