Here's a quick run through of how to do this, using an embedded Beam Checkout themed Commerce Ray. See here for more information on different ways to sell with Chec.
Create a Commerce Ray
To start off, ensure you've got a Beam Checkout themed Commerce Ray created. To do this, click on "Commerce Rays" in the dashboard navigation, then add a new Ray and choose the "Beam Checkout" theme. This theme is designed to be embeddable, so there's an "Embed" option in the options menu to get your code snippets:
When you click on "Embed" you will be given two methods for embedding your checkout. You can either embed it directly as an iframe, which allows the checkout to appear as if it's a native part of your website (i.e. no borders, matching colours etc), or you can have an overlay open up when a button is clicked, which is what we'll look at in this example.
<script ...></script> tag from the example above.
Once you've added your script tag, click "Save" to close the settings panel.
Add a trigger to open your checkout
The final step is to either add a button, or enable an existing button in your site, to trigger the embedded checkout overlay to open. Typically this will be a button like "Buy now". If you don't have one in your Webflow page yet, add one now:
When you have one, you can add custom attributes to your page elements. You'll want to add a custom attribute called
data-chec-embed-url and give it the value of your Commerce Ray. This is available in the
<a> section of the embed code from the screenshot above.
Once this is added, publish your site to see the changes reflected on your frontend. Now when you click your "Buy now!" button, you will see your embedded Commerce Ray checkout: