search

dotkom / onlineweb-frontend

Next generation frontend for onlineweb
https://online.ntnu.no
23 stars 9 forks source link

Migrate to @stripe/react-stripe-js from react-striple-elements #355

Open FluidSense opened 4 years ago

FluidSense commented 4 years ago

Multiple files related to Stripe needs to have double ignoration to pass lint and typescript checks since we're using methods not defined in the types, but which works. Are there any updated types we can install, or define the new types ourselves?

henrikhorluck commented 4 years ago

Seems like Stripe has made another new version https://github.com/stripe/react-stripe-js/blob/master/docs/migrating.md In terms of fixing the actual issue, we use a very old version of @types/react-stripe-elementshttps://github.com/dotkom/onlineweb-frontend/blob/2e39768a97d8f5211b1fb1cfc083205836325641/package.json#L79 In comparision to our react-stripe-elements version https://github.com/dotkom/onlineweb-frontend/blob/2e39768a97d8f5211b1fb1cfc083205836325641/package.json#L98

This can easily be fixed by aligning the versions to the same major (I think)

FluidSense commented 4 years ago

I'm looking into this at the moment, and working with Stripe is definitely something I'm new to. @oleast Is there an easy way to test Stripe payments locally to see if the changes actually work? Right now I'm just following the migration-guide and trying to understand any tweaks we have to it, with no clue whether it works or not.

oleast commented 4 years ago

I'm looking into this at the moment, and working with Stripe is definitely something I'm new to. @oleast Is there an easy way to test Stripe payments locally to see if the changes actually work? Right now I'm just following the migration-guide and trying to understand any tweaks we have to it, with no clue whether it works or not.

Yeah that is not as easy as one would hope. Firstly you have to get the Stripe keys for testing, they are in the committee wiki. Secondly you have to serve the page over HTTPS to actually get Stripe to work if recall correctly? That is not as easy as I would like it to be... I've had luck with setting it up using ngrok and connecting it to prod just to check that it works.

The problem really comes in when you want to test out doing actual transactions, because for this to work you need both the back-end and the front-end working with HTTPS (because you cant make unsafe http requests from a https site).

FluidSense commented 4 years ago

Alright! I'll see if I get time to look at this again at a later time, but feel free to handle the issue if you want 😅 If I continue on this, I think I'll make a PR-draft and change things until TypeScript + ESLint is happy, then comment on the PR-draft myself with all the things I didn't quite understand so we can discuss them!