-
Notifications
You must be signed in to change notification settings - Fork 319
Getting context injection error when using injectStripe HoC #38
Comments
So I think I figured out why the above code doesn't work. Tl;drIf you want to use the DetailsThis example works fine class _CardForm extends React.Component {
render() {
return (
<form onSubmit={() => this.props.stripe.createToken().then(payload => console.log(payload))}>
<label>
Card details
<CardElement />
</label>
<button>Pay</button>
</form>
)
}
}
const CardForm = injectStripe(_CardForm)
class Checkout extends React.Component {
render() {
return (
<div className="Checkout">
<h1>Available Elements</h1>
<Elements>
<CardForm />
</Elements>
</div>
)
}
}
const App = () => {
return (
<StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
<Checkout />
</StripeProvider>
)
}
ReactDOM.render(<App />, document.querySelector('.App')) Notice that the only difference between this chunk of code and the code in the original issue description is that I've pulled out the wrapping Unless I am missing something, it would appear that if you want to use I suppose this makes sense, since the component rendered within I'd be happy to submit a PR for it if this is something y'all would like more explicit documentation on. |
Awesome, I'm glad you figured it out :). That's exactly right. A PR for docs would be great! |
@indiesquidge
|
@rdalfonso once you get the token, you need to send it to your backend, which should call the Stripe API at /v1/charges. You can use one of our server side bindings to help you do this. More instructions in our docs here: https://stripe.com/docs/charges. |
@atty-stripe - I came to that same conclusion after re-re-reading the documentation. Thought I could make an API call from the browser. Problem is solved. Thanks! |
I'm willing to assume this is just my ignorance on how context works in React, but I'm confused why I am receiving this error
This is what my code looks like (here's a running example).
AFAICT, I am definitely trying to "inject Stripe context inside of an Elements context", not outside. I can't see what I'm doing that is breaking the code 😕.
Any help would be greatly appreciated!
The text was updated successfully, but these errors were encountered: