Add your checkout to your website [Legacy] – Help Center

In this article, you'll learn how add a checkout URL or embed a legacy online checkout into your website.

If you're adding a Progressive Checkout to your website, refer to the guide Share your Progressive Checkout.

By default your online checkout runs on roller.app. You can also set up a custom domain (your own web address) for your online checkouts.

Test your online checkout

Before linking to your online checkout from your website or social pages, you must check that the checkout loads and performs correctly.

From Venue Manager, go to Apps > Online checkout.
For the online checkout, click the options menu (3 dots) to the right of the checkout.
Select Copy URL to clipboard.
Paste the URL into a browser.
Perform a full test transaction including a live card payment via the online checkout.
Refund the test transaction.
Once you're happy that the full checkout experience operates correctly, update your website and social Book now links.

From Venue Manager, go to Apps > Online Checkouts > All Checkouts.
Click the options menu (3 dots) to the right of the checkout.
Select Edit from the drop-down menu.
Click URL and embed code.
From the Checkout links pop-up, copy the checkout URL or the embed code:

Checkout URL

Use the checkout URL if want to use a standalone web page for the checkout.

Click the URL to copy it, then update your Book Now links on your social media and website.

Click the launch icon to view your online checkout in a new tab.

Embed code

Click the code to copy it and insert it on a page of your site where you'd like the checkout.

Speak to your web developer if you're not sure how to link to a checkout URL from your website or how to insert the embed code on your web page.

Using a URL requires that you to link to a button or text within your website (eg Book Now).
Guests can click the link and launch the ROLLER online checkout. The URL of this checkout will be a ROLLER URL, not your website's URL, unless you have set up a custom domain.
Embedding a checkout allows you to keep guests on your website while they complete their transactions.

All checkouts are fully responsive and the display will change depending on the size of the browser window the guest is using.
This ensures an optimal user experience during the checkout flow regardless of what device is being used to make the purchase.
If you want your checkout to display in a desktop-friendly view, make sure that the width is at least 1024px. Otherwise, it will automatically display in a mobile-friendly view.