JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="window.setUp('f7ac5d47-e1cd-4e07-80ab-5fbad4caa79e')">
 A
</button>
<button onClick="window.setUp('764a5418-9828-4735-a171-94c1921d2fd8')">
 B
</button>

<div id="here" />

<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"embedded":true}'></script>

JavaScript

window.setUp = (optionId) => {

	const container = document.getElementById("here")
  container.innerHTML = `
  <div
     style="width:400px;height:600px;"
     ventrata-embedded-widget
     data-config='{"productID":"1708fad0-9198-4809-99e0-6fe16746f0c5", "apiKey":"b654851d-20e1-423b-bbe7-6ace1f676f42" }'
>
</div>
  `

  window.Ventrata({embedded: true, "apiKey":"b654851d-20e1-423b-bbe7-6ace1f676f42", "productID":"1708fad0-9198-4809-99e0-6fe16746f0c5", "optionID": optionId, "defaultTheme": "dark", "features": { "promoAndGiftCardInput": false, "timePickerType": "select", "availability": false }, "theme": { "dark": { "primary": "#E2CD83", "gradient-A": "#b49e4f", "gradient-B": "#b49e4f"} } });
}