JSFiddle - React, Tailwind, and code Playground

by DarkEye123

HTML

<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"23b0177b-2184-4659-889f-2cb5c5aae25e", "env": "test" }'></script>

<main>
  <section>
    <div class="wrapper">
  <div>
    All products available with your <b>apiKey</b> --- most basic example
  </div>
  <button ventrata-checkout>
    Click on me
  </button>
</div>

<div class="wrapper">
  <div>
    Predefined product usage
  </div>
  <button ventrata-checkout data-config='{"productID": "c097cd5f-e7eb-45dc-adff-e00894d063cb"}'>
    Click on me
  </button>
</div>

<div class="wrapper">
  <div>
    Predefined product and its option
  </div>
  <button ventrata-checkout data-config='{"productID": "c097cd5f-e7eb-45dc-adff-e00894d063cb", "optionID": "7319e191-e1e5-41b3-9cc8-0f94faea98d2"}'>
    Click on me
  </button>
</div>

<div class="wrapper">
  <div>
    Predefined product and its option with different language
  </div>
  <button ventrata-checkout data-config='{"productID": "c097cd5f-e7eb-45dc-adff-e00894d063cb", "optionID": "7319e191-e1e5-41b3-9cc8-0f94faea98d2", "lang": "cs"}'>
    Click on me
  </button>
</div>

<div class="wrapper">
  <div>
    Example of usage of different page element
  </div>
  <a ventrata-checkout data-config='{"productID": "c097cd5f-e7eb-45dc-adff-e00894d063cb" }'>
    Click on me
  </a>
</div>

<div class="wrapper">
  <div>
    Theme adjustments example - simple color #6FD316
  </div>
  <button ventrata-checkout data-config='{"productID": "c097cd5f-e7eb-45dc-adff-e00894d063cb", "optionID": "7319e191-e1e5-41b3-9cc8-0f94faea98d2", "theme": "#6FD316" }'>
    Click on me
  </button>
</div>

<div class="wrapper">
  <div>
    Theme adjustments example - advanced theming
  </div>
  <button ventrata-checkout data-config='{"productID": "c097cd5f-e7eb-45dc-adff-e00894d063cb", "optionID": "7319e191-e1e5-41b3-9cc8-0f94faea98d2", "theme": {"light": {"primary": "#a29c46", "gradient-A": "#c95559" }} }'>
    Click on me
 ...

CSS

.wrapper div {
  padding-bottom: 1rem;
}

.wrapper button {
  padding: 0.25rem;
}

.wrapper a {
  color: chocolate;
  border: 1px solid red;
  padding: 0.25rem;
  cursor: pointer;
}

.wrapper ~ .wrapper {
  padding-top: 2rem;
}

main {
  display: grid;
  grid-template-columns: auto 500px;
}