stripe-archive / react-stripe-elements

Moved to stripe/react-stripe-js.
https://github.com/stripe/react-stripe-js
MIT License
3.03k stars 319 forks source link

paymentRequest.update is not a function #490

Closed brunocrosier closed 4 years ago

brunocrosier commented 4 years ago

I have managed to set up PaymentRequest so that it works correctly when the paymentRequest object is set initially on page load. However, I need to be able to change the paymentRequest object to account for changes in product quantity, for example

According to the Stripe docs, this should be done via a function named paymentRequest.update however this does not exist when using injectStripe (as set out in the official stripe.dev example)

This essentially means that there is no way to update the paymentRequest object

Any suggestions? Thank you!

brunocrosier commented 4 years ago

To make it clearer.. here is a CodeSandBox to show what I mean: https://codesandbox.io/s/funny-spence-fwfhc

Clicking the first button attempts to update the paymentRequest by using setState()

Clicking the second button attempts to update the paymentRequest by using paymentRequest.update() (using the exact same object as the one in the Stripe Docs)

brunocrosier commented 4 years ago

also here is a vanilla js codesandbox showing how it is possible to update a paymentRequest via paymentRequest.update()

https://codesandbox.io/s/serene-heisenberg-ss1it

mbarrett-stripe commented 4 years ago

Hi @brunocrosier - the payment request in your first codesandbox example does seem to have a .update() function on it. It should just be a normal payment request object and you can operate on it as you otherwise would as shown in your second example.

Give that a shot and let me know if it doesn't work out as expected.

I'm looking at the linked stripe.dev example and I'm curious as to what you saw that implies update() is unavailable. If its something we can improve, let me know and I'll look into it.

brunocrosier commented 4 years ago

Ah, I have managed to get it to work!

for anyone else who encounters this issue, in a class component, you have to call this.state.paymentRequest.update({ total: { label: "Demo total", amount: 2000 }, shippingOptions: [ { id: "basic", label: "Ground shipping", detail: "Ground shipping via UPS or FedEx", amount: 995 } ] })

and in a function component, it's the same but remove the initial this.state

As an aside, I would definitely recommend including some sort of documentation about how to update the paymentRequest inside the react-stripe-elements docs. I am sure that a lot of people would benefit from it, as it's an extremely common use case :)

mbarrett-stripe commented 4 years ago

Glad you got it working! Thanks for the suggestion. I'll close this out now if that is all.