Stripe checkout working on local machine but not on test server- for test mode only

Question

In .env file : I have assigned variables for stripe API Publishable key and Secret key of test data.

I am able to checkout on my local machine using the .env file variable.

200 OK POST /v1/charges

200 OK POST /v1/tokens

But when I am using the same key variable on test server, it is not working and gives me error as shown below:

 You did not set a valid 
 publishable key. Call 
 Stripe.setPublishableKey() 
 with your publishable key.
 For more info, see 
 https://stripe.com/docs/stripe.js

400 ERR OK POST /v1/charges

200 OK POST /v1/tokens

Below are my files

.web (/home/p1/projectName/.envs_template/.development/.web)

STRIPE_API_KEY=pk_test_xxxxxxxxx

File1.js (/home/p1/projectName/ac/client/app/component/f1/f2/File1.js)

//injecting value of test data publishable key(pk_test_xxxxxxxxx) from .env file
const STRIPE_PUBLISHABLE = process.env.STRIPE_API_KEY;

<StripeCheckout
    amount={convertUSDtoCent(value)}
    token={(token) => dispatch(subscribeplan(token, *, *, *, *, *, value))}
    currency={CURRENCY}
    stripeKey={STRIPE_PUBLISHABLE}
    >
    <button id="1" className=' checkout action-btn'> <FormattedMessage id="MDB.MUM.Checkout" defaultMessage="Checkout"/> </button>
</StripeCheckout>