Change banner donation btn

src/views/creators/DonationButtonBanner.vue

@@ -1,16 +1,9 @@
 <template>
-  <v-btn :style="{ 
-    backgroundColor: brandingStore.colors.primary, 
-    color: 'white', 
-    borderRadius: '8px',
-     padding:'20px 24px', 
-    display: 'flex', 
-    alignItems: 'center', 
-    justifyContent: 'center' }" 
-         @click="openDonationDialog()">
-    <div class="font-bold"> Je soutiens</div>
+  <v-btn variant="text" style="font-size: x-large; height: 100%" block   @click="openDonationDialog()">
+   Je supporte
   </v-btn>
 
+
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
       <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
@@ -34,7 +27,7 @@
 
         <v-card-text>
           <v-text-field
-              v-model="tipAmount"
+              v-model="tipAmountInDollars"
               type="number"
               :min="0"
               class="p-2"
@@ -57,7 +50,8 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
+          <v-btn variant="outlined"
+                 :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
@@ -73,9 +67,13 @@
         <div id="checkout">
         </div>
 
+        <v-spacer></v-spacer>
+
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
+          <v-btn block class="ma-auto"
+                 style="width: 200px;"
+                 @click="closeDialog()">Annuler
+          </v-btn>
         </v-card-actions>
       </v-card>
     </template>
@@ -91,6 +89,14 @@ import {useBrandingStore} from "@/stores/brandingStore.js";
 
 const brandingStore = useBrandingStore()
 
+const props = defineProps({
+  creatorId: {default: 'missing-creator-id', required: true},
+  creatorName: {default: 'missing-creator-name', required: true},
+  onSuccessUrl: {default: 'missing-on-success-u', required: true},
+  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
+  iconColorClass: {default: 'text-black'}
+});
+
 const donationModal = ref(false);
 
 function openDonationDialog() {
@@ -101,9 +107,10 @@ function closeDonationDialog() {
   donationModal.value = false
 }
 
+
 const isPaymentDialogActive = ref(false);
 
-const tipAmount = ref(0);
+const tipAmountInDollars = ref(0);
 const tipMessage = ref("");
 
 let stripe = null;
@@ -114,23 +121,21 @@ onMounted(async () => {
   stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
 });
 
-const fetchClientSecret = async () => {
-  const clientSecret = await createCheckoutSession();
-  return clientSecret;
-};
-
-
 async function createCheckoutSession() {
   const client = useClient()
-  let clientSecret = await client.post('/api/Stripe', {
-    amount: (tipAmount.value * 100),
-    tipMessage: tipMessage.value,
-    creatorId: props.creatorId
 
-  });
+  let clientSecret = await client.post(
+      `/api/tips`,
+      {
+        amount: tipAmountInDollars.value * 100,
+        currency: 'CAD',
+        message: tipMessage.value,
+        creatorId: props.creatorId,
+        checkoutSuccessUrl: props.onSuccessUrl,
+        checkoutCancelledUrl: props.onCancelledUrl
+      });
 
-  let secret = clientSecret["data"];
-  return secret;
+  return clientSecret.data;
 }
 
 function closeDialog() {
@@ -143,11 +148,10 @@ function closeDialog() {
 async function goPay() {
   isPaymentDialogActive.value = true;
 
-  checkout = await stripe.initEmbeddedCheckout({
-    fetchClientSecret,
-  });
+  const response = await createCheckoutSession()
 
-  await checkout.mount('#checkout');
+  // Redirect to the Stripe Checkout page
+  window.location.href = response.stripeCheckoutUrl
 }
 
 function preventNonNumeric(event) {
@@ -159,3 +163,9 @@ function preventNonNumeric(event) {
   }
 }
 </script>
+
+<style >
+.full-height {
+  height: 100%;
+}
+</style>