diff --git a/index.html b/index.html
index 243f446..7846ff0 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>Hutopy</title>
 </head>
 
 <body>
diff --git a/package-lock.json b/package-lock.json
index bf6ac4c..915a947 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@mdi/font": "^7.4.47",
+        "@stripe/stripe-js": "^3.0.10",
         "axios": "^1.6.7",
         "pinia": "^2.1.7",
         "vue": "^3.4.15",
@@ -841,6 +842,14 @@
         "win32"
       ]
     },
+    "node_modules/@stripe/stripe-js": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-3.0.10.tgz",
+      "integrity": "sha512-CFRNha+aPXR8GrqJss2TbK1j4aSGZXQY8gx0hvaYiSp+dU7EK/Zs5uwFTSAgV+t8H4+jcZ/iBGajAvoMYOwy+A==",
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
diff --git a/package.json b/package.json
index 295825f..1a647ed 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "@stripe/stripe-js": "^3.0.10",
     "axios": "^1.6.7",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
diff --git a/src/App.vue b/src/App.vue
index 64a6e68..7e1f5b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,8 +7,5 @@
   </v-app>
 </template>
 
-<script>
-export default {
-  name: 'App',
-};
+<script setup>
 </script>
diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
new file mode 100644
index 0000000..a9a1584
--- /dev/null
+++ b/src/views/StripePayment.vue
@@ -0,0 +1,87 @@
+<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>
+
+      <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="Annuler"
+                    @click="closeDialog()"
+                ></v-btn>
+            </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+  </v-container>
+  
+
+</template>
+
+<script setup>
+import { useClient } from '@/plugins/clientPlugin';
+import { loadStripe } from '@stripe/stripe-js';
+import { onMounted, ref } from "vue";
+
+  let stripe = null;
+  const client = useClient();
+  const price = ref(0);
+  const isPaymentDialogActive = ref(false);
+  var checkout;
+
+  onMounted(async () => {
+    // I removed api key to push. Need to get it from backend.
+    stripe = await loadStripe('');
+  })
+
+  const fetchClientSecret = async () => {
+    const clientSecret = await createCheckoutSession();
+    return clientSecret;
+  };
+
+  async function createCheckoutSession() {
+    let clientSecret = await client.post('/api/Stripe', {
+      price: price.value * 100
+    });
+
+    let secret = clientSecret["data"];
+    return secret;
+  }
+
+  function closeDialog(){
+    isPaymentDialogActive.value = false;
+    checkout.destroy();
+  }
+
+  async function goPay() {
+    isPaymentDialogActive.value = true;
+
+    checkout = await stripe.initEmbeddedCheckout({
+      fetchClientSecret,
+  });
+
+    await checkout.mount('#checkout');
+  }
+
+</script>
\ No newline at end of file
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 6936fe2..396fb8e 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -474,24 +474,12 @@
               </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 class="mt-12 ml-2 mr-4 mb-4" style="background-color: #f4f4f4;">
+                <StripePayment></StripePayment>
             </v-row>
 
-            <v-row>
-              <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
+            <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>
 
@@ -577,7 +565,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-
+import StripePayment from '../StripePayment.vue';
 
 
 import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
