Minimal Setup

<head>
  <script type="module" src="https://cdn2.circuly.io/v1/1.8/cart.js"></script>
  <script src="main.js" defer></script>
</head>

<body>
  <button onclick="addProductToCart()">add product</button>

  <div data-embed="basket">
    <script type="application/json">
      {
        "api_key": String
      }
    </script>
  </div>

  <div id="circuly-cart"></div>
</body>
// main.js

let addProductEvent = new CustomEvent("circuly-add-to-cart", {
  detail: {
    sku: String,

    /* Optional key-value pairs */
    quantity: Number,
    subscription: Boolean,
    subscription_end: [String, null],
    subscription_interval: [Number, null],
    subscription_period: [String, null],
    subscription_start: [String, null],
    subscription_type: [String, null],
  },
});

function addProductToCart() {
  dispatchEvent(addProductEvent);
}