🛎️Embed Checkout

Host your checkout flow directly on your website.

What is Embed Checkout?

Embed checkout is a feature that allows you to directly embed your checkout flow into your website. With embed checkout when a user clicks on a buy button a modal with the checkout flow will popup automatically.

Hudson Run Club Embed Checkout (demo store)

How to use Embed Checkout

In order to embed your checkout flow into your website, you first need to identify your collection information.

The two pieces of information you will need are your project slug and your collection ID.

Where can I find my project slug and collection ID?

1. Navigate to the collections view in the admin panel

2. Identify the project slug and collection ID within the URL of the relevant collection.

Your project slug and collection ID can both be found in the collection URL

Adding the code snippet to your website

In order to add the checkout modal into your website, you will need access to the source code. If you do not have access to the source code, you can pass this snippet along to your webmaster, and they can install it for you.

<script src="https://cdn.rarecircles.com/checkout/v1/checkout-latest.min.js" type="text/javascript">
</script>

<script type="text/javascript" defer>
  window.addEventListener('load', function () {
    const rcCheckout = new RCCheckout({
      projectSlug: '<STORE_SLUG>',
      collectionId: '<COLLECTION_ID>',
      mintButtonClass: 'rc-checkout' // Add this class to any buttons that you want to trigger the checkout for this collection
    })
    rcCheckout.load()
  })
</script>

1. Copy paste this snippet just before the closing body tag (</body>) of the page you want the checkout to show in.

2. Manually adjust the values of 'STORE_SLUG' and 'COLLECTION_ID' with the corresponding project slug and collection ID.

3. Add the class rc-checkout to whichever button that will be used to trigger the checkout drawer, or create a new button with the rc-checkout class.

4. Click save and test!