CODEWITHSUNDEEP
reactjsstripe-payments
pizza7
pizza7

Reputation: 471

Why is Stripe.js not loading in React with react-stripe-elements?

I'm playing around with Stripe Elements using react-stripe-elements. In a very basic test app, I've added the Stripe script tag in the head section of my index.html file:

<script crossorigin src="https://js.stripe.com/v3/"></script>

And my App.js file pretty much follows the Stripe tutorial: 

import React from 'react';
import './App.css';
import CheckoutForm from './CheckoutForm.js' 
import {Elements, StripeProvider} from 'react-stripe-elements';


function App() {
  return (
      <div>
        <StripeProvider apiKey="...my API key...">
          <div className="example">
            <h1>React Stripe Elements Example</h1>
            <Elements>
              <CheckoutForm />
            </Elements>
          </div>
        </StripeProvider>
      </div> 
  );
}

export default App;

However, I get an error message saying: "Error: Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements."

Why is Stripe.js not being detected even though I copy/pasted the link in the head? There is one similar question on StackOverflow but the answer seems to be an "unstable internet connection" - which I don't think is the case in my situation.

Upvotes: 1

Views: 2425

Answers (1)

pizza7
pizza7

Reputation: 471

It turns out that all of this was happening because I was using my secret key instead of my publishable key when using the StripeProvider element. Once I replaced the secret key with the publishable key everything was working fine.

Upvotes: 0

Related Questions