Uncaught (in promise) Error: Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`

user_5079196 0
Viewed 958

I'm SO frustrated. I'm literally implementing straight from the Stripe Docs, and I keep getting the error

Error: Invalid prop 'stripe' supplied to 'Elements'. We recommend using the 'loadStripe' utility from '@stripe/stripe-js'

... but I am! What is wrong with this script? I've searched everywhere, and can not find any reason why I'm getting this error.

import React from "react"
import PropTypes from "prop-types"
import {loadStripe} from '@stripe/stripe-js';
import {CardElement, Elements, useElements, useStripe} from '@stripe/react-stripe-js';

const stripePromise = loadStripe('pk_test_yesItsMyRealKey')

class MembershipCheckout extends 

React.Component {
  render() {
    return(
        <Elements stripe={stripePromise}>
        </Elements>
    )
  }
}


export default MembershipCheckout;

package.json

"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.11.0",

Not sure if it matters, but i'm using Rails 6, with react-rails and webpacker

stripe-payments reactjs javascript
2 Answers

Wow I'm a freaking moron. I still had <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

in my app layout header, which is what was causing this error. This error message is misleading. This link helped me realize that

user_50791960

Please check if you have loaded the stripe script from your index.html. if so, please remove it. The method you use works for react library only and creates incompatibility if you load another Stripe library via index.html.

user_120352130
Related