401 Response When attempting to tokenize card

[Nawaf Abdullah]

I am getting the following response in the console when attempting to tokenize the card

my implementation:
HTML
`

<script src="https://cdn.checkout.com/js/framesv2.min.js"></script> `

React
<Frames config={{ debug: true, publicKey: 'xxxxx=', }} cardTokenized={(e) => { console.log(e.token); this.paymentRequest(e.token); }} cardSubmitted={() => { this.setState({ isLoading: true }) }} > <div style={{ display: "flex", flexDirection: "column" }}> <CardFrame /> <Button variant='contained' onClick={() => { Frames.submitCard(); }}> Pay ${(this.state.cartItems.reduce((a, v) => a = a + v.price, 0))} </Button> </div> </Frames>

Error Response in console
POST https://api.sandbox.checkout.com/tokens 401
D @ shared.js:256
(anonymous) @ Form.js:589
(anonymous) @ Form.js:257
VM8:1 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at D.g.onreadystatechange (shared.js:235:29)

Any idea what might be causing this?

I checked the public key 3 times, still go this issue.