How to fix Content Security Policy for Stripe in a React app

I have not worked with Content Security Policy before. I'm getting the following error when redirecting users to Stripe Checkout.

Even after adding meta tags to index.html, I'm still getting error. Here is what I'm doing :

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <meta
      http-equiv="Content-Security-Policy"
      content="
         default-src *; 
         style-src 'self'  'unsafe-inline'; 
         img-src https://*.stripe.com;
         script-src * 'self' https://checkout.stripe.com 'unsafe-inline'; 
         connect-src  * 'self' https://checkout.stripe.com  ; 
         frame-src * 'self'  https://checkout.stripe.com ; "
    />

Stripe docs : https://stripe.com/docs/security/guide#content-security-policy

What is the proper way to write Content Security Policy and what I'm doing wrong?