Checkout Button

Props

• offerIds – (string, required): A comma-separated list of offer IDs to present in the checkout.

Route Params

• None

Component Attributes

• data-cc-component="checkoutButton" – Initializes this component on page load.

Custom Behavior

• Click Behavior:
  
  • On click, displays a full-screen modal via <iframe> containing the checkout UI.
  • Sends two messages to the iframe:
    • tracking-data (with user agent, current URL, cookies, and client-side ID)
    • select-offers (the list of offers to load)
  • Iframe Behavior:
    • URL:
    bashCopyEdit
    [brandApiDomain]/checkout/iframe/?brandId=...&offerIds=...
    • Auto-resizes on window resize.
    • Listens for and responds to the following messages:
      • "close-modal" – closes the iframe.
      • "checkout-lead-created" – tracks modal progress event.
      • "content_view" – tracks content view by resource type.
      • "redirect" – navigates the page to a given URL.
      • "succesful-purchase" – tracks purchase with metadata (offers, revenue, user ID, etc.).
• Keyboard Support:
  • Pressing Escape closes the modal.
  ‍
• Mouse Tracking:
  • Hovering the button sends a "mouse_hover" event for analytics.
  ‍

1. From the Kitchen Sink copy the Checkout Button component (cmd + c OR right-click → Copy).
2. Open your Webflow project and paste the component where you'd like the start time to appear.
3. Select the pasted element and convert it into a Webflow Component (right-click → Create Component).
4. Ensure the button has:
   • data-cc-component="checkoutButton"
5. Ensure the button has:
   • data-cc-component-offer-ids
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter the name and any default text
     • 4. Click create when you are finished
6. Ensure the button has the Events set to None

7. Publish your changes

1. Find the element you want to handle the click (or add a new button, link box, etc).
2. In the Element Settings panel, add this custom attribute:
   • Name: data-cc-component
   • Value: checkoutButton
3. In the Element Settings panel, add this custom attribute:
   • Name: data-cc-component-offer-ids
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter the name and any default text
     • 4. Click create when you are finished
4. Publish your changes.

Apply your own styles using Webflow's Designer.

The component will not modify styling automatically.

You can safely add text, icons, or animations to the button.