fixed the stripePayment component

src/App.vue

@@ -5,8 +5,5 @@
   </RouterView>
 </template>
 
-<script>
-export default {
-  name: 'App',
-};
+<script setup>
 </script>

src/views/StripePayment.vue

@@ -1,35 +1,42 @@
 <template>
-    <v-dialog max-width="720">
-      <template v-slot:activator="{ props: activatorProps }">
-        <v-container>
-          <v-text-field
-              v-model="price"
-            ></v-text-field>
-          <v-btn
-            v-bind="activatorProps"
-            color="surface-variant"
-            text="Checkout"
-            variant="flat"
-            @click="goPay()"
-          ></v-btn>
-      </v-container>
-      </template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-text-field 
+          label="Montant ($)"
+          v-model="price"
+          style="color: rgb(0, 109, 119); background-color: #f4f4f4">
+        </v-text-field>
+      </v-col>
 
-      <template v-slot:default="{ isPaymentDialogActive }">
+      <v-col>
+        <v-btn
+          @click="goPay()"
+          style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
+          >Envoyez
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
+      <template v-slot:default>
         <v-card>
-          <div id="checkout">
-            <!-- Checkout will insert the payment form here -->
-          </div>
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn
-              text="Close Dialog"
-              @click="isPaymentDialogActive.value = false"
-            ></v-btn>
-          </v-card-actions>
+            <div id="checkout">
+                <!-- Checkout will insert the payment form here -->
+            </div>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    text="Annuler"
+                    @click="closeDialog()"
+                ></v-btn>
+            </v-card-actions>
         </v-card>
       </template>
     </v-dialog>
+  </v-container>
+  
+
 </template>
 
 <script setup>
@@ -40,7 +47,8 @@ import { onMounted, ref } from "vue";
   let stripe = null;
   const client = useClient();
   const price = ref(0);
-  const isPaymentDialogActive = ref(true);
+  const isPaymentDialogActive = ref(false);
+  var checkout;
 
   onMounted(async () => {
     // I removed api key to push. Need to get it from backend.
@@ -58,16 +66,22 @@ import { onMounted, ref } from "vue";
     });
 
     let secret = clientSecret["data"];
-    console.log(secret)
     return secret;
   }
 
+  function closeDialog(){
+    isPaymentDialogActive.value = false;
+    checkout.destroy();
+  }
+
   async function goPay() {
     isPaymentDialogActive.value = true;
-    const checkout = await stripe.initEmbeddedCheckout({
-      fetchClientSecret,
-    });
 
-    checkout.mount('#checkout');
+    checkout = await stripe.initEmbeddedCheckout({
+      fetchClientSecret,
+  });
+
+    await checkout.mount('#checkout');
   }
+
 </script>

src/views/main/CreatorFolio.vue

@@ -474,28 +474,13 @@
               </h1>
             </v-container>
 
-            <v-row style=" margin-top: 30px; ">
-              <v-col cols="6" style="background-color: #f4f4f4">
-                <v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
-                  <v-form @submit.prevent>
-                    <v-text-field label="Montant ($)"
-                      style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
-                  </v-form>
-                </v-sheet>
-              </v-col>
-              <v-col cols="6" class="d-flex align-center">
-                <v-btn
-                  style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
-                  class="mt-4" block>Envoyez</v-btn>
-              </v-col>
-                          </v-row>
-
-            <v-row>
-              <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
-                label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+            <v-row class="mt-12 ml-2 mr-4 mb-4" style="background-color: #f4f4f4;">
+                <StripePayment></StripePayment>
             </v-row>
-            <v-row>
-              <StripePayment></StripePayment>
+
+            <v-row class="ml-2 mb-2 mr-2">
+              <v-textarea style="color: rgba(0, 109, 119)"
+                label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
             </v-row>
 
           </v-card>