diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 8ce6999f..0f6a75bd 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -73,7 +73,7 @@
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=13d23c92a535d7c9a4ff",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=76b45c336e8e12b23e81",
     "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=cd797256cb819aac4d24",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=367c011912c661f5d453",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=cb677c4fe6b3313b88ba",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=743bf9cb1e62af56c04e",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
@@ -1109,5 +1109,43 @@
     "/chunks/settings-subscription.7c0869adc3a0adf29289.hot-update.js": "/chunks/settings-subscription.7c0869adc3a0adf29289.hot-update.js",
     "/chunks/settings-subscription.baa2697a96162fd73727.hot-update.js": "/chunks/settings-subscription.baa2697a96162fd73727.hot-update.js",
     "/chunks/settings-subscription.39bf81b90a04893eeb65.hot-update.js": "/chunks/settings-subscription.39bf81b90a04893eeb65.hot-update.js",
-    "/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js": "/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js"
+    "/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js": "/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js",
+    "/chunks/settings-subscription.cc17d30bd3a375fca707.hot-update.js": "/chunks/settings-subscription.cc17d30bd3a375fca707.hot-update.js",
+    "/chunks/settings-subscription.1325aa8c630f944c24af.hot-update.js": "/chunks/settings-subscription.1325aa8c630f944c24af.hot-update.js",
+    "/chunks/settings-subscription.6ffd6bbaa09de65f6aa3.hot-update.js": "/chunks/settings-subscription.6ffd6bbaa09de65f6aa3.hot-update.js",
+    "/chunks/settings-subscription.3ba16418b796668eb361.hot-update.js": "/chunks/settings-subscription.3ba16418b796668eb361.hot-update.js",
+    "/chunks/settings-subscription.84fe73586cd8466783df.hot-update.js": "/chunks/settings-subscription.84fe73586cd8466783df.hot-update.js",
+    "/chunks/settings-subscription.3c942df3f26d2e602928.hot-update.js": "/chunks/settings-subscription.3c942df3f26d2e602928.hot-update.js",
+    "/chunks/settings-subscription.8632602e5c9e0d12d74d.hot-update.js": "/chunks/settings-subscription.8632602e5c9e0d12d74d.hot-update.js",
+    "/chunks/settings-subscription.35680b3be6ea0fe906cb.hot-update.js": "/chunks/settings-subscription.35680b3be6ea0fe906cb.hot-update.js",
+    "/chunks/settings-subscription.c730b71222d3fb43f796.hot-update.js": "/chunks/settings-subscription.c730b71222d3fb43f796.hot-update.js",
+    "/chunks/settings-subscription.a928b24f1a0c41b4d612.hot-update.js": "/chunks/settings-subscription.a928b24f1a0c41b4d612.hot-update.js",
+    "/chunks/settings-subscription.717617f819a9d33beda5.hot-update.js": "/chunks/settings-subscription.717617f819a9d33beda5.hot-update.js",
+    "/chunks/settings-subscription.471c8cca333f943128c7.hot-update.js": "/chunks/settings-subscription.471c8cca333f943128c7.hot-update.js",
+    "/chunks/settings-subscription.6d60e95b671a05527047.hot-update.js": "/chunks/settings-subscription.6d60e95b671a05527047.hot-update.js",
+    "/chunks/settings-subscription.7f48e2d47eb81d4714cc.hot-update.js": "/chunks/settings-subscription.7f48e2d47eb81d4714cc.hot-update.js",
+    "/chunks/settings-subscription.d90e002cbce339aaeff8.hot-update.js": "/chunks/settings-subscription.d90e002cbce339aaeff8.hot-update.js",
+    "/chunks/settings-subscription.9732435d9f75a684527b.hot-update.js": "/chunks/settings-subscription.9732435d9f75a684527b.hot-update.js",
+    "/chunks/settings-subscription.f10bc57ec968d9dbaf21.hot-update.js": "/chunks/settings-subscription.f10bc57ec968d9dbaf21.hot-update.js",
+    "/chunks/settings-subscription.fedffd4fa4124c4ca3f1.hot-update.js": "/chunks/settings-subscription.fedffd4fa4124c4ca3f1.hot-update.js",
+    "/chunks/settings-subscription.a497c046ddaecde724e3.hot-update.js": "/chunks/settings-subscription.a497c046ddaecde724e3.hot-update.js",
+    "/chunks/settings-subscription.57190e3556be0cdcaf50.hot-update.js": "/chunks/settings-subscription.57190e3556be0cdcaf50.hot-update.js",
+    "/chunks/settings-subscription.0f2ba1995ab0a84b27ac.hot-update.js": "/chunks/settings-subscription.0f2ba1995ab0a84b27ac.hot-update.js",
+    "/chunks/settings-subscription.a4226a99d4727b7fb896.hot-update.js": "/chunks/settings-subscription.a4226a99d4727b7fb896.hot-update.js",
+    "/chunks/settings-subscription.1ad5ba09169993755986.hot-update.js": "/chunks/settings-subscription.1ad5ba09169993755986.hot-update.js",
+    "/chunks/settings-subscription.3510d9394bdb093041a1.hot-update.js": "/chunks/settings-subscription.3510d9394bdb093041a1.hot-update.js",
+    "/chunks/settings-subscription.dd5473c2b0379612700b.hot-update.js": "/chunks/settings-subscription.dd5473c2b0379612700b.hot-update.js",
+    "/chunks/settings-subscription.e1962bbd1202ebb6d54b.hot-update.js": "/chunks/settings-subscription.e1962bbd1202ebb6d54b.hot-update.js",
+    "/chunks/settings-subscription.8d23e450d58552f9f107.hot-update.js": "/chunks/settings-subscription.8d23e450d58552f9f107.hot-update.js",
+    "/chunks/settings-subscription.b924bf36d51e786f95d7.hot-update.js": "/chunks/settings-subscription.b924bf36d51e786f95d7.hot-update.js",
+    "/chunks/settings-subscription.07c03ba41c50073b436b.hot-update.js": "/chunks/settings-subscription.07c03ba41c50073b436b.hot-update.js",
+    "/chunks/settings-subscription.a6fc82b81ce560ac9ec7.hot-update.js": "/chunks/settings-subscription.a6fc82b81ce560ac9ec7.hot-update.js",
+    "/chunks/settings-subscription.5392382a5fe0340ef1cc.hot-update.js": "/chunks/settings-subscription.5392382a5fe0340ef1cc.hot-update.js",
+    "/chunks/settings-subscription.2d3fb52c0d2a0c379689.hot-update.js": "/chunks/settings-subscription.2d3fb52c0d2a0c379689.hot-update.js",
+    "/chunks/settings-subscription.e0ea7642fca866da959d.hot-update.js": "/chunks/settings-subscription.e0ea7642fca866da959d.hot-update.js",
+    "/chunks/settings-subscription.f55ff72cc4cba8eac6cb.hot-update.js": "/chunks/settings-subscription.f55ff72cc4cba8eac6cb.hot-update.js",
+    "/chunks/settings-subscription.01357e424f8fc23085a3.hot-update.js": "/chunks/settings-subscription.01357e424f8fc23085a3.hot-update.js",
+    "/chunks/settings-subscription.1301f1fd880bc84f84d8.hot-update.js": "/chunks/settings-subscription.1301f1fd880bc84f84d8.hot-update.js",
+    "/chunks/settings-subscription.f9f65a0048969b859429.hot-update.js": "/chunks/settings-subscription.f9f65a0048969b859429.hot-update.js",
+    "/chunks/settings-subscription.368eb18f04eea5b19327.hot-update.js": "/chunks/settings-subscription.368eb18f04eea5b19327.hot-update.js"
 }
diff --git a/resources/js/views/User/MeteredSubscription.vue b/resources/js/views/User/MeteredSubscription.vue
index a4a7858d..36b05a7c 100644
--- a/resources/js/views/User/MeteredSubscription.vue
+++ b/resources/js/views/User/MeteredSubscription.vue
@@ -11,7 +11,7 @@
 				{{ user.data.relationships.balance.data.attributes.formatted }}
 			</b>
 
-			<div v-if="! storeCreditCardForm">
+			<div v-if="! isCreditCardForm">
 
 				<!-- Make payment form -->
 				<ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
@@ -44,16 +44,19 @@
 			</div>
 
 			<!-- Store credit card form-->
-			<form v-if="storeCreditCardForm" @submit.prevent="storeStripePaymentMethod" id="payment-form" class="mt-6">
-			  <div id="payment-element">
+			<form v-if="isCreditCardForm" @submit.prevent="storeStripePaymentMethod" id="payment-form" class="mt-6">
+				<div v-if="stripeData.isInitialization" class="h-10 relative mb-6">
+					<Spinner />
+				</div>
+				<div id="payment-element">
 				<!-- Elements will create form elements here -->
-			  </div>
-				<ButtonBase type="submit" :loading="stripeData.storingStripePaymentMethod" button-style="theme" class="w-full mt-4">
-					{{ $t('Store Card') }}
+				</div>
+				<ButtonBase :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
+					{{ $t('Store Credit Card') }}
 				</ButtonBase>
-			  <div id="error-message">
-				<!-- Display error message to your customers here -->
-			  </div>
+				<div id="error-message">
+					<!-- Display error message to your customers here -->
+				</div>
 			</form>
 		</div>
 
@@ -215,6 +218,7 @@
 		Trash2Icon,
 		Edit2Icon,
 	} from "vue-feather-icons";
+	import Spinner from "../../components/FilesView/Spinner";
 	import ColorLabel from "../../components/Others/ColorLabel";
 	import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper";
 	import AppInputText from "../../components/Admin/AppInputText";
@@ -251,6 +255,7 @@
 			FormLabel,
 			InfoBox,
 			PageTab,
+			Spinner,
 		},
 		computed: {
 			...mapGetters([
@@ -296,9 +301,10 @@
 				],
 
 				chargeAmount: undefined,
-				storeCreditCardForm: false,
+				isCreditCardForm: false,
 
 				stripeData: {
+					isInitialization: true,
 					storingStripePaymentMethod: false
 				}
 			}
@@ -389,7 +395,7 @@
 			},
 			async storeStripePaymentMethod() {
 
-				this.storingStripePaymentMethod = true
+				this.stripeData.storingStripePaymentMethod = true
 
 				const {error} = await stripe.confirmSetup({
 					//`Elements` instance that was used to create the Payment Element
@@ -407,52 +413,64 @@
 					const messageContainer = document.querySelector('#error-message');
 					messageContainer.textContent = error.message;
 				} else {
-					console.log('done!');
 					// Your customer will be redirected to your `return_url`. For some payment
 					// methods like iDEAL, your customer will be redirected to an intermediate
 					// site first to authorize the payment, then redirected to the `return_url`.
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('Your credit card was stored successfully'),
+					})
 				}
 
-				this.storingStripePaymentMethod = false
+				this.stripeData.storingStripePaymentMethod = false
 			},
 			async stripeInit() {
 
 				// Init stripe js
 				stripe = await loadStripe(this.config.stripe_public_key);
 
-				const options = {
-					clientSecret: 'seti_1KBfG8B9m4sTKy1q7mOlCzVF_secret_KrO282HxFZpgXK2XGw8Ctj4XEMqizaG',
-					appearance: {
-						theme: 'stripe',
-						variables: {
-							colorPrimary: this.config.app_color,
-							fontFamily: 'Nunito',
-							borderRadius: '8px',
-							colorText: this.isDarkMode ? '#bec6cf' : '#1B2539',
-							colorBackground: this.isDarkMode ? '#191b1e' : '#fff',
-							fontWeightNormal: '700',
-							fontSizeSm: '0.875rem',
-							colorSuccessText: '#0ABB87',
-							colorSuccess: '#0ABB87',
-							colorWarning: '#fd397a',
-							colorWarningText: '#fd397a',
-							colorDangerText: '#fd397a',
-							colorTextSecondary: '#6b7280',
-							spacingGridRow: '20px',
-						}
-					},
-				}
+				await axios.get('/api/stripe/setup-intent')
+					.then(response => {
+						// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
+						elements = stripe.elements({
+							clientSecret: response.data,
+							appearance: {
+								theme: 'stripe',
+								variables: {
+									colorPrimary: this.config.app_color,
+									fontFamily: 'Nunito',
+									borderRadius: '8px',
+									colorText: this.isDarkMode ? '#bec6cf' : '#1B2539',
+									colorBackground: this.isDarkMode ? '#191b1e' : '#fff',
+									fontWeightNormal: '700',
+									fontSizeSm: '0.875rem',
+									colorSuccessText: '#0ABB87',
+									colorSuccess: '#0ABB87',
+									colorWarning: '#fd397a',
+									colorWarningText: '#fd397a',
+									colorDangerText: '#fd397a',
+									colorTextSecondary: '#6b7280',
+									spacingGridRow: '20px',
+								}
+							},
+						});
 
-				// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
-				elements = stripe.elements(options);
+						// Create and mount the Payment Element
+						const paymentElement = elements.create('payment');
 
-				// Create and mount the Payment Element
-				const paymentElement = elements.create('payment');
+						paymentElement.mount('#payment-element');
+					})
+					.catch(() => {
+						events.$emit('toaster', {
+							type: 'danger',
+							message: this.$t('popup_error.title'),
+						})
+					})
 
-				paymentElement.mount('#payment-element');
+				this.stripeData.isInitialization = false
 			},
 			showStoreCreditCardForm() {
-				this.storeCreditCardForm = !this.storeCreditCardForm
+				this.isCreditCardForm = !this.isCreditCardForm
 				this.stripeInit()
 			}
 		},