Hi,
how to hide or encrypt the integrated third party API key from front end due anyone can simply view the API key from the page source.
We need to secure the API key from the website to prevent the important information leaks.
We ran into the same concern when we were working through things. I would suggest deploying an app proxy → https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extension. This would then pass off the call securely to your middleman, who would then it turn make the third-party API call. And return the results back to the front-end user session.
For anyone that finds this post, the core principle to understand is that if a third party API key is present in storefront code, it can be seen by everyone.
As @Gregarican has suggested, the proper pattern is to use a Shopify App Proxy coupled with a backend service that securely stores and uses credentials. The storefront calls a path like /apps/backend-proxy. Shopify forwards that request to the app backend, signing it cryptographically using the app’s shared secret.
The backend verifies that HMAC signature to ensure the request genuinely passed through Shopify and was not tampered with. Only after successful verification should the backend use securely stored third-party credentials to perform the external API call.
If you do not want to build and host that backend layer yourself, APIEase provides that secure infrastructure so storefront code can call external APIs without exposing credentials.