diff --git a/webapp/channels/src/components/payment_form/stripe.ts b/webapp/channels/src/components/payment_form/stripe.ts
index 9599ad5936..3ba494b3db 100644
--- a/webapp/channels/src/components/payment_form/stripe.ts
+++ b/webapp/channels/src/components/payment_form/stripe.ts
@@ -25,4 +25,5 @@ function devConfirmCardSetup(confirmCardSetup: ConfirmCardSetupType): ConfirmCar
 export const getConfirmCardSetup = (isDevMode?: boolean) => (isDevMode ? devConfirmCardSetup : prodConfirmCardSetup);
 
 export const STRIPE_CSS_SRC = 'https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i&display=swap';
-export const STRIPE_PUBLIC_KEY = 'pk_test_ttEpW6dCHksKyfAFzh6MvgBj';
+//eslint-disable-next-line no-process-env
+export const STRIPE_PUBLIC_KEY = process.env.STRIPE_PUBLIC_KEY || 'pk_test_ttEpW6dCHksKyfAFzh6MvgBj';
diff --git a/webapp/channels/webpack.config.js b/webapp/channels/webpack.config.js
index 911550300f..2e7e3ab63c 100644
--- a/webapp/channels/webpack.config.js
+++ b/webapp/channels/webpack.config.js
@@ -441,7 +441,9 @@ if (DEV) {
     config.devtool = 'source-map';
 }
 
-const env = {};
+const env = {
+    STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PUBLIC_KEY || ''),
+};
 if (DEV) {
     env.PUBLIC_PATH = JSON.stringify(publicPath);
     env.RUDDER_KEY = JSON.stringify(process.env.RUDDER_KEY || '');