Reactjs & Paddle checkout

I'm using https://paddle.com/ as as payment processor for my software.

I'm getting the error of Page Not Found Sorry, the page you were looking for could not be found. coming from Paddle and I wonder why, I have done everything correctly like on the docs.

My index.html

    <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
    <script type="text/javascript">
      Paddle.Setup({ vendor: xxxxx});
    </script>

main.js

payment = () => {
      const Paddle = window.Paddle;
      const openCheckout = () => { 
          Paddle.Checkout.open({ product: xxxxxx});
      }

return(
     <Button variant="primary" onClick={openCheckout}>Subscribe Now!</Button>
)
}