CODEWITHSUNDEEP
reactjsstripe-payments
Hasnain Ali
Hasnain Ali

Reputation: 123

How to reload stripe elements according to different API keys?

I have multiple accounts of stripe for multiple countries, I want to call stripe load promise onchange of country with different API public key.

So If I select UK from dropdown than stripe elements should be for UK and if I change it to US than stripe elements should be for US. But in my case when I call for UK country than it's working and if I it call US after UK than it's never update stripe elements for US. And in network console it alwayse showing UK elements even I have selected US country.

My Public keys are loading according to country wise change and promise of loadstripe is also generated according to public keys of coutnry wise change, but the iframe of stripe elements never change.

        if(nextProps.payment_methods){
            nextProps.payment_methods.map(val => {
                if(val.name==="stripe" && val.public_key){
                    return_stripe_promise = loadStripe(val.public_key)
                }
            })
            this.setState({
                loadstripe_promise : return_stripe_promise
            })
        }

        <Elements stripe={this.state.loadstripe_promise}>
             <CheckoutForm ref={this.child} />
        </Elements>

Now my question is that, how to reload iframe/elements of stripe according to latest stripeload promise? Any idea please

Upvotes: 3

Views: 1510

Answers (1)

Hasnain Ali
Hasnain Ali

Reputation: 123

After beating my head against the wall on this for hours, I finally get the answer.

Simply just pass the key attribute with a unique id in the Elements component of the stripe and it will re render everytime according to latest stripe public key.

<Elements key={unique_key_number} stripe={this.state.loadstripe_promise}>
   <CheckoutForm ref={this.child} />
</Elements>

Upvotes: 6

Related Questions