I have a Nuxt website that I need to integrate with Stripe. I am using the vue-stripe package to do this based on the guide here:
The problem I am having is I have to pass the Stripe Key directly to the component as a prop. It suggests adding this to an environment variable which works fine in netlify dev but when I deploy it, the environment variable is undefined.
I have read loads about this and I understand the problem, I can’t access the key because it would be a security issue because the key would be compiled into the build script.
The problem I have is I can’t figure out a workaround for this. In other places I have used functions when needing to access API’s but I can’t really do that in this instance.
Any advice on how best to workaround this would be greatly appreciated!
Those are the only 2 options at the moment. You can either use the variable in the build script and leak the variable in your frontend code, or use Netlify Functions (or any other server-side solution) to run the code elsewhere and pass the data back to frontend.
Thanks for coming back to me. That is a shame Do you have any more info on the adding it to the build script option? I have seen a couple of references to doing this in other threads but nothing that actually says what to do.
Could you show the reference that you’re talking about? I’m not sure what exactly you mean. From my understanding, adding the variable to the build script will eventually trickle down to your client-side code.
I managed to find a working solution by adding the key to the build script based on the docs here:
It is a shame that the key gets compiled but it is the Stripe Publishable Key, not the Secret Key so is designed for client side use so I don’t think this will be a problem.
Do you have any more info on the adding it to the build script option? I have seen a couple of references to doing this in other threads but nothing that actually says what to do.