You can easily sell your products in a modal on your own website by using the payment pop-up. The advantages of using Checkout Page this way are that your customers don't have to leave your site, which increases trust and ensures a faster checkout.

---

What is the payment pop-up?

The payment pop-up is a modal in which a visitor to your site can buy your products. This is especially useful when you want to sell from your website. It can look like this:

To use the payment pop-up, you need to be able to add Javascript to your site, as well as be able to add HTML tags. If you're not sure how to do this on your site, please get in touch so we can find a solution together.

---

Can I sell multiple products on one page?

Yes, this is one of the benefits of using the payment pop-up. You can add multiple Buy buttons to your site, where each of the button can open a different checkout payment pop-up.

---

Can a customer buy multiple products at the same time?

Currently this is not possible. While the payment pop-up allows you to sell multiple products on one page, it doesn't allow a customer to buy multiple products in once. Let us know if this is something you're looking for, as we're gauging interest to see if we want to add this in the future.

Let's find out how you can sell your products on your site with the payment pop-up.

---

The easy way

The easiest way to use the modal is to click on one of your Pages in your dashboard and press the 'Use' button. This will show you installation instructions specific to the page you have open, meaning you only have to copy/paste the snippets onto your site.

---

The manual way

1. Add the pop-up script to your HTML

In the HTML of your page, preferably at the bottom, you have to add the following code.

<script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

2. Add buy buttons to your site

For each product you want to sell, you have to add button. This is what your visitor will click on to open the payment pop-up. Your button can look like this:

<button
  class="cp-button"
  data-seller="5aaa701149321a00145c99b9"
  data-checkout="ux-animation-tool-license"
>

It's important to keep the class cp-button, as that's how our script will make the button open the payment pop-up.

In the data tag data-seller, you add your 'seller ID' or your 'seller name'. You can find this by going to one of your checkout pages and copying the part of the URL before the page title.

In the data tag data-checkout, you add the URL slug of the page you want the payment pop-up to show. You can find this by going to one of your checkout pages and copying the last part to the URL.

3. Save and check!

That should be it! Now save/upload your changes (this depends on your website) and click the buttons you've added. If you want to test it, add a data tag data-testing to your button. Don't forget to remove this after testing.