Adding updates to the checkout

thedevdojo · Mar 28, 2024 · 5501065 · 5501065
1 parent e631e31
commit 5501065
Show file tree

Hide file tree

Showing 5 changed files with 14,311 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/themes/tailwind/css/app.css b/public/themes/tailwind/css/app.css
diff --git a/public/themes/tailwind/js/app.js b/public/themes/tailwind/js/app.js
diff --git a/resources/views/themes/tailwind/assets/js/app.js b/resources/views/themes/tailwind/assets/js/app.js
@@ -188,48 +188,6 @@ window.popToast = function(type, message){
 
 /********** END TOAST FUNCTIONALITY **********/
 
-/********** Start Billing Checkout Functionality ***********/
-
-/***** Payment Success Functionality */
-
-window.checkoutComplete = function(data) {
-    var checkoutId = data.transaction_id;
-
-    axios.post('/checkout', { _token: csrf, checkout_id: checkoutId })
-        .then(function (response) {
-            console.log(response);
-            if(parseInt(response.data.status) == 1){
-                let queryParams = '';
-                if(parseInt(response.data.guest) == 1){
-                    queryParams = '?complete=true';
-                }
-                window.location = '/checkout/welcome' + queryParams;
-            }
-    });
-
-}
-
-window.checkoutUpdate = function(data){
-    if(data.checkout.completed){
-        popToast('success', 'Your payment info has been successfully updated.');
-    } else {
-        popToast('danger', 'Sorry, there seems to be a problem updating your payment info');
-    }
-}
-
-window.checkoutCancel = function(data){
-    let subscriptionId = data.id;
-    axios.post('/cancel', { _token: csrf, id: subscriptionId })
-        .then(function (response) {
-            if(parseInt(response.data.status) == 1){
-                window.location = '/settings/subscription';
-            }
-    });
-}
-
-/***** End Payment Success Functionality */
-
-/********** End Billing Checkout Functionality ***********/
 
 /********** Switch Plans Button Click ***********/
 

diff --git a/wave/resources/views/checkout.blade.php b/wave/resources/views/checkout.blade.php
@@ -3,21 +3,24 @@
 
     window.vendor_id = parseInt('{{ config("wave.paddle.vendor") }}');
 
-    if(vendor_id){
-        Paddle.Setup({
-            seller: vendor_id,
+        
+        Paddle.Initialize({ 
+
+            token: 'test_fa19977d2cd05ecf60d462606b8', // replace with a client-side token
+            checkout: {
+                settings: {
+                    displayMode: "overlay",
+                    frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;",
+                    locale: "en",
+                    allowLogout: false
+                }
+            },
             eventCallback: function(data) {
                 if (data.name == "checkout.completed") {
-                    console.log(data);
-                    // Wait 2 seconds to allow Paddle to update their end
-                    setTimeout(function(){
-                        checkoutComplete(data.data);
-                    }, 2000);
-                    Paddle.Checkout.close();
+                    checkoutComplete(data.data);
                 }
             }
         });
-    }
 
     if("{{ config('wave.paddle.env') }}" == 'sandbox') {
         Paddle.Environment.set('sandbox');
@@ -73,4 +76,76 @@ function waveCancel(){
         });
     }
 
+
+    /********** Start Billing Checkout Functionality ***********/
+
+    /***** Payment Success Functionality */
+
+    window.checkoutComplete = function(data) {
+        var checkoutId = data.transaction_id;
+         addCheckoutOverlay();
+        Paddle.Checkout.close();
+
+        axios.post('/checkout', { _token: csrf, checkout_id: checkoutId })
+            .then(function (response) {
+                console.log(response);
+
+
+                if(parseInt(response.data.status) == 1){
+                    let queryParams = '';
+                    if(parseInt(response.data.guest) == 1){
+                        queryParams = '?complete=true';
+                    }
+                    window.location = '/checkout/welcome' + queryParams;
+                }
+        });
+
+    }
+
+    window.addCheckoutOverlay = function(){
+        let overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+        overlay.style.display = 'flex';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        
+        overlay.style.zIndex = '9999';
+
+        let loader = document.createElement('div');
+        loader.innerHTML = `<div class="flex flex-col items-center justify-center text-sm font-medium text-white">
+                <svg class="w-5 h-5 mb-3 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                <p>Finishing Checkout</p>
+            </div>`;
+
+        overlay.appendChild(loader);
+        document.body.appendChild(overlay);
+    }
+
+    window.checkoutUpdate = function(data){
+        if(data.checkout.completed){
+            popToast('success', 'Your payment info has been successfully updated.');
+        } else {
+            popToast('danger', 'Sorry, there seems to be a problem updating your payment info');
+        }
+    }
+
+    window.checkoutCancel = function(data){
+        let subscriptionId = data.id;
+        axios.post('/cancel', { _token: csrf, id: subscriptionId })
+            .then(function (response) {
+                if(parseInt(response.data.status) == 1){
+                    window.location = '/settings/subscription';
+                }
+        });
+    }
+
+    /***** End Payment Success Functionality */
+
+    /********** End Billing Checkout Functionality ***********/
+
 </script>