CODEWITHSUNDEEP
javascriptreactjsstripe-payments
gwalshington
gwalshington

Reputation: 1505

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

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

Upvotes: 3

Views: 2325

Answers (2)

gwalshington
gwalshington

Reputation: 1505

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

Upvotes: 3

matt toulousien
matt toulousien

Reputation: 11

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.

Upvotes: 1

Related Questions