Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it

Total
1
Shares

Stripe Payment is completely work but i got the warning message on the console, "Unsupported prop change on Elements: You cannot change the stripe prop after setting it."
Here is my code. I have no idea why the warning message is showing, what do i miss?

const Parent =() => {
        const stripePromise = loadStripe(PUBLISHABLE_KEY);
        <Elements stripe ={stripePromise}>
          <Child_component/>
        </Elements> 
}
export default Parent;

import {CardNumberElement, CardExpiryElement, CardCvcElement} from '@stripe/react-stripe-js';
const Child_component =() => {
        const handleChange = (event) => {
               //get the brand type
        };
        const handleFormSubmit = async ev =>{
           const cardElement = elements.getElement(CardNumberElement);
           const paymentMethodReq = await stripe.createPaymentMethod({
                    type: 'card',
                    card: cardElement
           });
           /// and send paymentMethodReq to the backend.
        }
   render(
       <Form className="" onSubmit={handleFormSubmit}>
        <div className="split-form full-width inline-block pt-4">
            <div className="row">
                <div className="col-12">
                    <label className="card-element">
                        Card number
                        <CardNumberElement
                        className="cardNumberElement"
                        onChange={handleChange}
                        />
                    </label>
                </div>
                <div className="col-8">
                    <label className="card-element">
                        Expiration date
                        <CardExpiryElement
                        onChange={handleChange}
                        />
                    </label>
                </div>
                <div className="col-4">
                    <label className="card-element">
                        CVC
                        <CardCvcElement 
                        onChange={handleChange}
                        />
                    </label>
                </div>
            </div>
        </div>
       </Form>
     )
 }
 export default Child_component;

Solution

Your problem is that in your Parent component you just do

const stripePromise = loadStripe(PUBLISHABLE_KEY);

What it means is actually on each render you will get new promise object (new stripePromise) every time, that’s exactly what <Element> component is complaining about. What you should do instead, to not get new instance all the time on render, you should put loadStripe function in state, but because it is a function, you actually need to wrap it up in another function because of this – https://reactjs.org/docs/hooks-reference.html#lazy-initial-state.

So how should look like:

const [stipePromise,setStripePromise] = useState(() => loadStripe(PUBLISHABLE_KEY))
Leave a Reply

Your email address will not be published. Required fields are marked *