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

2
votes

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 ?

2
javascriptreactjsstripe-payments
try to use the npm package instead on importing the js file in html - Drusto

2 Answers

1
votes

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.

1
votes

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