javascript - Unload stripe pure from when react component unmounts

Question

so, I want to get rid of stripe sending data from my website.

What is this nonsense on every click

curl 'https://m.stripe.com/6' 
  -H 'authority: m.stripe.com' 
  -H 'pragma: no-cache' 
  -H 'cache-control: no-cache' 
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36' 
  -H 'dnt: 1' 
  -H 'content-type: text/plain;charset=UTF-8' 
  -H 'accept: */*' 
  -H 'origin: https://m.stripe.network' 
  -H 'sec-fetch-site: cross-site' 
  -H 'sec-fetch-mode: cors' 
  -H 'sec-fetch-dest: empty' 
  -H 'referer: https://m.stripe.network/' 
  -H 'accept-language: en-US,en;q=0.9' 
  -H 'cookie: m=db491b6f-636e-4801-a446-c79c62db7d25cd4297; private_machine_identifier=r3F5QQbHA31m%2FqdyaRYQx54%2B%2BhT9pZTlEAm0bKEx832xHQNO8cKhXCLY%2BpBpQHxr6CM%3D; session=sess_IlGtyX7eySNiON53kjkXvE9zPmVWYvWh' 
  --data-binary 'JTdCJTIydjIlMjIlM0ExJTJDJTIyaWQlMjIlM0ElMjIzZmJmYzc0MzMwYTY1NTEwM2E3ZjY1NzE2YTA5OTA5NCUyMiUyQyUyMnQlMjIlM0E2NC4xMjUlMkMlMjJ0YWclMjIlM0ElMjI0LjUuMzMlMjIlMkMlMjJzcmMlMjIlM0ElMjJqcyUyMiUyQyUyMmElMjIlM0FudWxsJTJDJTIyYiUyMiUzQSU3QiUyMmElMjIlM0ElMjIlMjIlMkMlMjJiJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZkWjFMRHZvVExpV0NLclJWZ0l3TFFTdThoX25OSFpZSWVQcEFTZVRHUzB3LjB2RUtlM0c1cFNqUl9sbk5nYnVVMmpVQWNSLVlqSmxzTEE5ZUFkRDRNMDAuZzJ1OS1ocVp2R0lxWUpjUGxQZndKQWYtdjNSZ3lLX3gxTnBwekFsQTEyTSUyRmVJVjZEZ3V6WFAzWlhUZ0J3N2F4d3lZWU9GaXpEZGNkUVVWVkRFSjhhX2slMkZFY3dmdzcxOTJSWVVsT2hXdGZXeG1rT25vNnZMVVZLSWRDUVFrNlNJR3RBJTIyJTJDJTIyYyUyMiUzQSUyMlRqNzI0TVpFUS1abDJ0a2EwWG9ZUVcwM3ZjRlVzVzhJSUxHVm5Jc2VQTm8lMjIlMkMlMjJkJTIyJTNBJTIyODhmYWE5MTgtNmY2OS00MDQ5LWFhNmYtOTg3OTk0MDExYmU3NTQ0MTAyJTIyJTJDJTIyZSUyMiUzQSUyMjg1NjUyOWJiLTA1MTYtNDkyNy05NGRlLTQ4YjYzOTgwMmFjZTFhYTM3MyUyMiUyQyUyMmYlMjIlM0FmYWxzZSUyQyUyMmclMjIlM0F0cnVlJTJDJTIyaCUyMiUzQXRydWUlMkMlMjJpJTIyJTNBJTVCJTIybG9jYXRpb24lMjIlNUQlMkMlMjJqJTIyJTNBJTVCJTVEJTJDJTIybiUyMiUzQTQ2Ni40ODk5OTk5OTE2MDg4JTJDJTIydSUyMiUzQSUyMnRlc3RpbmctYXBwLnNwb3RuYW5hLmNvbSUyMiU3RCUyQyUyMmglMjIlM0ElMjJjMGI4YjE3MzQyNGQyNDU3ODczOSUyMiU3RA==' 
  --compressed

So I learned about stripe pure from https://mtlynch.io/stripe-recording-its-customers/.

I am doing stripe mount as soon as payments component is mounted.

loadStripe.setLoadParameters({advancedFraudSignals: false})
loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY??'').then(setStripe);

and I don't know the way to forcefully remove the script. so if its loaded once it will start doing its funny business.

and if the payments component is rendered again, I get

ERROR: setLoadParameters cannot be called after loadStripe() is called

So, the solution I am thinking can be simply if I can unload stripe script when my payments component is demounted would work. Any suggestions for that?

or anything better which can be done here.

question from:https://stackoverflow.com/questions/65837996/unload-stripe-pure-from-when-react-component-unmounts

Answer 1

You need to import Stripe without side effects and advanced fraud detection in the root component of your app. Then you'd pass the reference to Stripe as a prop as per the example here: https://github.com/stripe/react-stripe-js#minimal-example. That way your code won't try to reload Stripe every time your component is unmounted/remounted.

Additionally, you might be interested in the update blog post from the same author about the mitigations and more information Stripe put in place: https://mtlynch.io/stripe-update/