Migrate react-stripe-checkout to react-stripe-elements & Source to PaymentIntent
RiseOoi opened this issue · comments
Since Stripe has its own prebuilt UI now shouldn't we use https://github.com/stripe/react-stripe-elements/ instead? I see a few advantages here on security and acceptance rate as the elements are good at detecting bad data.
Update: https://stripe.com/docs/sources/cards Card payments with Source (token) is deprecated and no longer recommended.
thanks a ton! Going to take a look into this :)
Does this library do just the regular stripe checkout? Seems to be for creating custom interfaces?
Also im not seeing where I'm using source in my existing codebase. Could you clarify?
Thanks for looping us in @wesbos. I really enjoyed the course when I went through it a year ago and learned a lot from it :)
I think it would be awesome if you could move to the new Stripe Checkout: https://stripe.com/docs/payments/checkout/one-time. Which would also allow you to remove any npm dependencies.
An important difference here is that the new Checkout performs a full page redirect. Let me know if that is a concern for you.
As you work through this, I'd love for you to note down any feedback you might have about the integration experience. We'd appreciate that very much :)
Let me know how we can best help. Of course happy to assist and review if needed!
Of course, should you be interested in building a custom on-site checkout form, we'd love for you to test out https://github.com/stripe/react-stripe-js which follows the hooks approach. I do realise however that that is a bit more involved than using Checkout.
Hi @wesbos, sorry for the delayed response.
This is all you need:
https://stripe.com/docs/payments/accept-a-payment
which I assume you already read it anyway (been almost 10 days since your last response).
===
But first, to answer your questions:
Does this library do just the regular stripe checkout? Seems to be for creating custom interfaces?
The flow is not prebuilt into the UI, the prebuilt UI is in the end, just an UI to collect credit card info, you will need to do the lower parts yourself (add an additional mutation hook). @thorsten-stripe's Checkout API is part of the official guide.
Also im not seeing where I'm using source in my existing codebase. Could you clarify?
See the bottom part where I described my implementation experience.
===
The original flow in your Advanced React was collecting information on frontend, then make a token, and then give the token to the server, and then authenticate and turn token to money.
This is good, but poses a few new challenges and limitations. A few advantages and reasons I went for the Stripe's recommended flow:
- The prebuilt UI is beautiful, easy, and secure.
- The prebulit UI is flexible and can be used for other types of payment, e.g. subscription instead of just one-time payment. This is very different from the original community solution.
- The prebuilt UI also adds 3D Secure, for example, so no need to wait for community solutions (if they even build one).
- The prebuilt UI also allows other payment methods (not just credit cards).
- It is official.
- Finally, the flow is designed so that it can be used for other types of payment, and much more secure + lower rejection rates.
I see no reason to not use the official solution provided by Stripe.
===
Though when I implement the solution myself a couple of weeks ago, I do feel the flow is a bit weird, but I rolled with it anyway.
The flow is: (as seen in https://stripe.com/docs/payments/accept-a-payment)
- Make a "ticket" (Payment Intent, which you state how much money you want) that you pass from server to client.
- Collect credit card (or other payment method) and client make the payment to Stripe directly (never passing your server) using the "ticket" you provided.
- Then after that, you should go to the server and check if the payment is made (or pending or whatever) and continue the post-event (mutate user's payment level from free to paid?).
In rare case that your client's credit card failed to process in the first try, e.g. international, need 3D Secure, need further authentication, then there will be a fairly simple further authentication steps between 2 and 3. This is not covered in the original solution and I think it is a fairly big pain point as many banks disallow payment on the internet that easily. (at least not in the case of Japanese credit cards)
So it is in reverse, and takes a few more back and forth between client and server, and pure performance is slower. But hey, it will be worth it in the long run. (unless you only ever want to use credit card to get one-time payment)
thanks everyone! Ive finished my Stripe integration.
It's been migrated to Payment Intents and Stripe Elements. It uses the new (unreleased? beta?) react-stripe-js lib which is awesome!