I am trying to retrieve all payment methods listed for a customer in stripe using react. I have access to publishable key and client secret.
But, I am unable to find a method to retrieve the payment methods (similar to the one in node - stripe.paymentMethods.list or PaymentMethodsRetrievalListener in Android).
Any help, much appreciated.
Regards,
There isn't such a method unfortunately!
The backend API for listing PaymentMethods (https://stripe.com/docs/api/payment_methods/customer_list) generally requires a secret key(which is what stripe-node uses), not something you can use in a React frontend.
The mobile SDKs like Android use the ephemeral key they get from your backend (https://stripe.com/docs/payments/accept-a-payment?platform=android&ui=payment-sheet#add-server-endpoint) to call the same API — it's technically possible to do this yourself on the web too but it's not documented in any way so it's not really a good option.
Overall you would normally just have your frontend call your backend, your backend(written in e.g. Node and using your secret API key) can call https://stripe.com/docs/api/payment_methods/customer_list and return the information the frontend is looking for.
Related
I am using .env to store all my private Api_key value, which is to call third party API key like google map.
I was told that, with react js, the javascipt is actually excuted in client side.
Does it mean that actually, my .env variables are accessible by clients too in which they can actually see my API key?
For example, in my component code, I have this
<Geocoder
mapRef={mapRef}
mapboxApiAccessToken={process.env.NEXT_PUBLIC_mapbox_key}
position="top-left"
placeholder="Set your position"
/>
In my .env
NEXT_PUBLIC_mapbox_key=<KEY>
If yes, how do I keep it safe while providing the key to the third party components
Yes, users will be available to see your API key in network inspection, even if you will keep it in the .env file which is excluded from git.
It's better to make a separate route on your backend side and keep your API key on the backend - if it is possible.
Some useful links:
API security best practices
5 best practices for secure API key storage
I am able to create a call through my react application using graph API to a MS-Teams user in organization which is working fine call is being made to the graph API and it's dialing to the user in the organization but I don't think user can interact without any device setup i.e laptop speakers and all in order to listen and speak over the call.
API USED :
To make a call
https://graph.microsoft.com/beta/communications/calls
To get call summary
https://graph.microsoft.com/beta/communications/callRecords/{id}
I want to know how :
Do I need to create interface in my ReactJs App just in order to provide user all the facilities of calling? Right now I have only provided the Call button.
How can I handle the callback in the development phase and test things in my react app as callback are only sent to the https routes.
Note : I am using NestJs as backend.
Can anyone please provide a demo for this how to handle things properly as its now like a brain twister working with MS Graph APIs. I shall be highly obliged for the same as I am trying this thing first time.
Thanks in Advance.
To Create call You will need to register the calling bot. Which enables your bot to create a new outgoing peer-to-peer or group call, or join an existing meeting. Please go throgh this documentation and samples for more info.
I am building a Node/React app in which I have placed my API keys in a .env file which is in my .gitignore. The frontend makes a get request to the API endpoint using Axios and the UseEffect hook with the API key provided via process.env. I understand why it is good practice to obscure the API key and not commit that information to git however my question is whether something still needs to be done (or can be done) about the API key getting exposed through inspection of the requests in chrome developer tools?
//on component mount fetch the images
useEffect(async ()=>{
const results = await axios(
`https://pixabay.com/api/?key=${process.env.PIXA_API_KEY}`
);
},[])
For instance below if a user were to use chrome tools in the browser on my project they can still see my API key as part of the request. In my case it's not much of a concern as this particular API is free and the project is for personal use only, but I wondered how this problem is approached in a commercial project where a payed for API might be in use? What's to stop me using chrome dev tools on another persons app and stealing their API key to make my own requests?
That is a very good observation. The truth is that you cannot have any secrets in your client code. No amount of obscuring, obfuscation or even encryption will prevent attackers from stealing your secrets. The client code is out there for anyone to read and needs to be approached as such.
If private APIs with keys you do not want to expose are involved, you need to call them from a server. So the flow would look something like this:
Scenario:
I have a Node and Angular web app.
It needs to call an external api (a third party service) for data (more specifically this: https://api.represent.me/api/questions/).
Question:
Is it better to make this external call from the Angular frontend: GET http://thirdpartyservice.com/api/data or have the frontend calling a same domain Node endpoint: GET http://example.com/node-backend-api which then calls GET http://thirdpartyservice.com/api/data which then fetches and processes the data from the third party api before passing it back to angular?
Thoughts:
I guess two api calls is less desirable, but it is on the same domain
so would this not really be an issue?
GETing from the Node side would be more secure (especially if secret
keys were used), and also mask the fact that a third party service is
used.
CORS stuff might get in the way if calling from the frontend.
Is context key here, e.g. calling font apis from the
frontend is probably best, but fetching and needing to process data
is probably better from the backend.
What do others recommend (and do) and are there any other for or against points to add to the 'thoughts' too?
It depends on what your 3rd party API requires.
If you need some credentials to call the API it's probably better to handle the call in backend because of security concerns.
If the API delivers time sensitive data, like some auto-complete information as you type, it might be good to not do the extra roundtrip to the backend and call it from the frontend.
You might create a subdomain which points to the 3rd party server,
like 3rdparty-api.yourdomain.com, this removes a lot of cross-domain issues. But this needs cooperation of your 3rd party provider.
So, there is no clear yes or no answer but it depends on the situation and focus of your API.
Your solution looks fine, the only thing that may get in your way is if the 3rd party API you are using provides any sort of analytics. If you call it from Node you will overwrite the Agent and IP information that would be gathered if you called from UI. Other than that, I believe making the request directly from UI could reduce a little bit the load on the server, but I don't know if that matters to you.
I would say we should also take care about code duplication. In your case you are all JavaScript, but that is not true for many others. So let's say I consume api.github.com so I will not want to make some calls from frontend and some from the backend, then I think creating a controller which will handle all of this is a good choice.
Except for the cases like any analytics or tracking software, an extra round trip is ok.
As #Wolffc said, this can also prevent sending access_token to the browser which may be misused.
I've exposed a few APIs using go-endpoints. The APIs work fine, but what I'd like to do is restrict usage of the APIs to only a few referers. Since I'm not passing any authentication information, I do not need OAuth (actually, I really do not want to use OAuth as I expect anonymous users to utilize a front-end that uses this API... I just want that front-end and perhaps another one to use my API).
Apparently the way to do this is to make a Public API Key using the Google Developers Console (Project --> APIs and auth --> Credentials --> Create new Key).
I've changed my JavaScript to use this key, by passing it as a param: https://my-app-id.appspot.com/_ah/api/myService/v1/doSomething?key=key_from_developer_console
However, when I make the call, I get a 403 back with this error:
"Access Not Configured. The API () is not enabled for your project. Please use the Google Developers Console to update your configuration."
Well, initially I set the referer to my-app-id.appspot.com/*, which is only place I want my API to be used from. So I figured I'd remove it just to see, but I get the same issue.
There are some old posts here about having to enable Contacts API and Google + API. I tried that, and it didn't work either.
So what gives? There is virtually no documentation from Google on this Public API Key feature. This is really driving me up a wall...
I had this exact same problem yesterday. I decided to generate my own key and added in my own logic to check for the 'key' param from the request. I just added the self-generated key to my env_variables and it works. However, if you try to redeploy after taking this approach, you may still see the access configuration issues..at least I have still.