WIP

src/views/creators/DonationButton.vue

@@ -27,7 +27,7 @@
 
         <v-card-text>
           <v-text-field
-              v-model="tipAmount"
+              v-model="tipAmountInDollars"
               type="number"
               :min="0"
               class="p-2"
@@ -67,8 +67,9 @@
         <div id="checkout">
         </div>
 
+        <v-spacer></v-spacer>
+
         <v-card-actions>
-          <v-spacer></v-spacer>
           <v-btn block class="ma-auto"
                  style="width: 200px;"
                  @click="closeDialog()">Annuler
@@ -89,6 +90,10 @@ 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'}
 });
 
@@ -105,7 +110,7 @@ function closeDonationDialog() {
 
 const isPaymentDialogActive = ref(false);
 
-const tipAmount = ref(0);
+const tipAmountInDollars = ref(0);
 const tipMessage = ref("");
 
 let stripe = null;
@@ -116,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() {
@@ -145,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) {