1. Help Center
  2. Sell online & in-venue
  3. Selling online

Share your Progressive Checkout

In this article, you'll learn how you can share your checkout with your guests from your website or social pages once you’re ready to start selling online. You can use a direct web link to launch a full-page experience or with help from a web developer, integrate with your website to launch an overlay experience.  

This article relates to the ROLLER Progressive Checkout. If you want to add a legacy checkout to your website or social pages, refer to the guide Add your checkout to your website. To use Progressive Checkouts, your venue must be using ROLLER Payments

Options for sharing your checkout

There are two ways you can add your checkout to your webpages:

  1. Link from your website. Use a web link to launch a full-page checkout experience from your website and socials. You can add links to as many checkouts as you want (depending on your plan).
  2. Integrate with your website. Launch your online checkout as an overlay experience on your website.
    • You can launch multiple overlay checkouts from your website, but only one overlay checkout per page of your website.
    • You can link directly to different products in the same overlay checkout from the same page of your website.
    • You'll need help from a web developer to add scripts to your website pages.  
Take a look at this video on our Academy to see how the option you choose determines the way you share your checkout with guests. If you haven't yet decided which checkout experience is right for you, refer to the guide Prepare for your Progressive Checkout.

Use a direct web link for a full-page experience

For the full-page experience, you simply add a direct link to a checkout from your website or social media sites. Guests click your "Book now" links to launch a full-screen standalone experience.

Speak to a web developer if you're not sure how to add a direct link from your webpages to the checkout.
  1. From Venue Manager, go to Apps > Progressive checkouts > All Checkouts
  2. Select the checklist you want
  3. Select Share in the top right of the checkout setup page
  4. Select the direct link to copy the URL
  5. Add the link to your website or social "Book Now" buttons
By default your online checkout runs on roller.app. If you want to set up a custom domain (your own web address) for your checkout, refer to the guide Set up a custom domain for your checkout.

Integrate with your website for an overlay experience

From a button or other element on your webpages, you can trigger the checkout to open an overlay experience at the products page or a specific product in your checkout. There is no home page with the overlay experience. 

You'll need your website developer to implement the overlay experience as it involves adding code to your website pages. 

Follow the relevant instructions to provide the code your web developer needs.

Open an entire overlay checkout at the products page

If you want to open an entire overlay checkout from a button on your website page, provide the following two pieces of code to your web developer. 

You can link to multiple overlay checkouts from your website, but only one overlay checkout per page of your website.

1. Script to add to the <head> element of your website

To find the script for your developer:

  1. From Venue Manager, go to Apps > Progressive checkouts > All Checkouts.
  2. Select the checkout you want.
  3. Click Share in the top right of the setup page.
  4. Under Step 1: Add your script, copy the first piece of code to provide to your web developer.
  5. Ask your web developer to add it to the <head> element of the website page.
    • If adding multiple overlay checkouts to your website, add the relevant checkout code to the <head> element of the individual page you want to add the checkout to.
    • You can only add one entire checkout per website page. See below if you want to link directly to specific products in the one checkout from the same webpage.
    • Whether you've built your website using a website builder like WordPress, Squarespace, or Webflow, or have a custom website, your web developer should be able to add the script to the <head> element at the page level.

2. Java script element to add the trigger

Provide the following Java script element to your web developer. Ask them to add it to the button or other element on your webpage that you want to launch an entire overlay checkout from. 


onclick="RollerCheckout.show()"
Open your overlay checkout at a specific product 

If you want to open the overlay checkout at a specific product from a button on your website, find its product ID and then ask your web developer to add some code to the button.

  1. From Venue Manager, go to Apps > Progressive checkouts > All Checkouts
  2. Select the checkout to open the setup area
  3. Select View checkout in the top right to open the checkout in a new browser tab
  4. Browse to the product you want & select to open its product details

    mceclip1.png

  5. From the URL in the browser address bar, copy the product ID. The product ID is the number at the end of the end of the URL.

    mceclip0.png

  6. Provide the following Java script element to your web developer with the product ID you've identified. Ask them to:
    • Replace <PRODUCTID> with the product ID you found in step 3
    • Add it to the button or other element on your webpage that you want to open the specific product from
RollerCheckout.showProduct({productId: '<PRODUCTID>'})
Although you can link to multiple overlay checkouts with the overlay experience, you can only launch one entire overlay checkout per page on your website. But you can link to one or more specific products in the same overlay checkout directly from the same page on your website.

Take a look at the videos on our Academy to learn more about how to prepare for, create and share your Progressive Checkout. 

Return to top

Articles in this section

See more

Related articles