I am trying to integrate Stripe payment gateway in spring boot project. I am getting error from client side, I don't know why. I am using STS IDE.

Below is the checkout form:

             <div class="checkout">
                <form id="checkoutform" class="form" autocomplete="off">
                    <h4>Pay With Card</h4>
                    <!-- A Stripe Element will be inserted here. -->
                    <div id="payment-element"></div>
                    <button class="btn" id="submit" type="submit">
                        <i class="fa fa-lock"></i>Pay Now
                    </button>
                    <div id="error-message">
                        <!-- Display error message to your customers here -->
                    </div>
                </form>
                <div id="messages" role="alert" style="display: none;"></div>
               </div>
      <script src="https://js.stripe.com/v3/"></script>
      <script src="public/web/js/userpayment.js" defer></script> 

Below is the script for checkout page:

document.addEventListener('DOMContentLoaded', async () => {
debugger
    // Load the publishable key from the server. The publishable key is set in your .env file.
    const {publishableKey} = await fetch('api/config').then((r) => r.json());
    if (!publishableKey) {
        addMessage(
            'No publishable key returned from the server. Please check `.env` and try again'
        );
        alert('Please set your Stripe publishable API key in the .env file');
    }

    const stripe = Stripe(publishableKey, {
        apiVersion: '2020-08-27',
    });

});

Below is my payment controller:

@RequestMapping(value = {ApiUrl.apiConfig}, method = {RequestMethod.GET}, produces = {MediaType.APPLICATION_JSON_VALUE})
    public ResponseEntity<?> config() {
        
        return new ResponseEntity<>(new ConfigResponse(stripePublishableKey), HttpStatus.OK);
    }

I don't know why I am getting this error.