Non-React checkout

The Supercool Checkout Elements use React under the hood, but you can still use Supercool if your app is written in something else, such as Vue or even plain HTML. Here is an example using plain HTML.

<html>
  <head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <link href="https://unpkg.com/@supercoolxyz/[email protected]/dist/style.css" rel="stylesheet" />
    <script src="https://unpkg.com/@supercoolxyz/[email protected]/dist/index.iife.js"></script>
  </head>

  <body>
    <h1>Test Site</h1>
    <div id="supercool-checkout-btn"></div>
    <script type="text/javascript">
      window.addEventListener('DOMContentLoaded', function () {
        var root = ReactDOM.createRoot(
          document.getElementById('supercool-checkout-btn')
        )
        root.render(
          React.createElement(SupercoolReactSDK.SupercoolCheckout, {
            apiKey: 'YOUR_API_KEY',
            nftCollectionId:
              'eip155:5:0x5Fc5fCB9eCaFB8D8528a299B7726Fb9c5A8e9d95',
            nftCollectionConfig: {
              mintFnOpts: {
                name: 'mintTo',
                price: '0.05',
                args: {
                  quantity: '1',
                },
                recipientAddressArgName: 'recipient',
              },
            },
          })
        )
      })
    </script>
  </body>
</html>

This examples loads scripts using https://unpkg.com/, a global CDN for packages published to NPM.