"Stripe is not defined" error - call of function before script is loaded?

Question

I think I have a problem with a script that doesn't load (or load too early).

I try to implement Stripe library for paiement. For that, I have to include a script before using Stripe functions in my code. I added the given script src="https://js.stripe.com/v3/", in my public folder, in index.html in the header as follow:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script src="https://js.stripe.com/v3/"></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

I created an empty app, with only call of Stripe. here is App.js :

import React from 'react';
import './App.css';
import {Button} from 'react-bootstrap'

class App extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    var stripe = Stripe('pk_test_XXXXXXXXXXXX');
    // I will use stripe variable later. But for now I have an error with previous line
  }

  render() {
    return(
      <div>
          <Button 
                  className= "btn-xlBook"
                  variant="primary"
                  onClick={this.handleClick}>
                  OK
          </Button>
      </div>
    )
  }

}
export default App

But when I make a yarn start, I have the error 'Stripe' is not defined no-undef.

I don't understand, I call the script in the header, but the behavior is as if the script wasn't loaded yet.

Do you know how to solve it ? I I add a script in the header of index.html, it should load before the app, isn't it ?

try to use the npm package instead on importing the js file in html — ProblemsEverywhere
– ProblemsEverywhere, Commented May 24, 2019 at 11:54

Todd Chaffee · Accepted Answer · 2019-05-24 11:55:58Z

1

You don't import Stripe anywhere. Like you do with Button for example. Check out React Stripe Elements for one example of how to use Stripe in React.

answered May 24, 2019 at 11:55

Todd Chaffee

6,82434 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shix · Accepted Answer · 2019-05-24 12:27:14Z

1

Use npm package of stripe instead and import it. Add the import statement and use the wrapper in your index.js

import {StripeProvider} from 'react-stripe-elements';


<StripeProvider apiKey="pk_test_12345">
      <MyStoreCheckout />
 </StripeProvider>

and then in your console install the package:

npm install --save react-stripe-elements

or

yarn add react-stripe-elements

edited May 24, 2019 at 12:27

answered May 24, 2019 at 11:59

shix

7712 bronze badges

3 Comments

Todd Chaffee Over a year ago

Perhaps update your answer to use yarn since he's not using npm?

droledenom Over a year ago

@Shivendu Amale : 'stripe' isn't for server side use ? I have the following error using it "__webpack_require__(...).createServer is not a function" and first answer I see says that it is for server side

shix Over a year ago

Ok got it. Its react-stripe-elements for react. Stripe module is serrver side. I'll change my answer

Collectives™ on Stack Overflow

"Stripe is not defined" error - call of function before script is loaded?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related