From badf561b187042867b5b493095d0ebc33891ff8a Mon Sep 17 00:00:00 2001
From: tavo-wasd <tavo@tavo.one>
Date: Tue, 13 Aug 2024 21:13:32 -0600
Subject: [PATCH] works kinda

---
 public/form.js              | 59 +++++++++++++++++++------------------
 public/static/css/style.css | 24 ++++++++-------
 2 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/public/form.js b/public/form.js
index 4fbf8e6..cbedef6 100644
--- a/public/form.js
+++ b/public/form.js
@@ -18,18 +18,39 @@ const clientId = "";
 const OneTimePID = "";
 const PlanID = "";
 
-function loadScript(url, callback) {
-    const script = document.createElement('script');
-    script.src = url;
-    script.onload = callback;
-    script.onerror = () => {
-        console.error(`Script load error: ${url}`);
-    };
-    document.head.appendChild(script);
+loadOneTimeButton().then(() => {loadSubButton()})
+
+function loadOneTimeButton() {
+    return new Promise((resolve, reject) => {
+        var script = document.createElement('script');
+        script.src = PayPalSdkOneTime;
+        script.onload = function() {
+            paypal.HostedButtons({
+                hostedButtonId: OneTimePID,
+            }).render("#paypalOneTimeButton");
+        };
+        document.head.appendChild(script);
+        resolve();
+    });
 }
 
-function loadPayPalSDK(url, callback) {
-    loadScript(url, callback);
+function loadSubButton() {
+    var script = document.createElement('script');
+    script.src = PayPalSdkSub;
+    script.onload = function() {
+        paypal.Buttons({
+            style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'subscribe' },
+            createSubscription: function(data, actions) {
+                return actions.subscription.create({
+                    plan_id: PlanID
+                });
+            },
+            onApprove: function(data, actions) {
+                alert(data.subscriptionID); // You can add optional success message for the subscriber here
+            }
+        }).render('#paypalSubButton');
+    };
+    document.head.appendChild(script);
 }
 
 function hideDialog() {
@@ -60,27 +81,9 @@ function togglePaymentMethod(selectedButtonId) {
     if (selectedButtonId === 'showOneTimeButton') {
         document.getElementById('paypal-button-container').classList.add('active');
         document.getElementById('paypalOneTimeButton').classList.add('active');
-        loadPayPalSDK(PayPalSdkOneTime, () => {
-            paypal.HostedButtons({
-                hostedButtonId: OneTimePID,
-            }).render("#paypalOneTimeButton");
-        });
     } else if (selectedButtonId === 'showSubButton') {
         document.getElementById('paypal-button-container').classList.add('active');
         document.getElementById('paypalSubButton').classList.add('active');
-        loadPayPalSDK(PayPalSdkSub, () => {
-            paypal.Buttons({
-                style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'subscribe' },
-                createSubscription: function(data, actions) {
-                    return actions.subscription.create({
-                        plan_id: PlanID
-                    });
-                },
-                onApprove: function(data, actions) {
-                    alert(data.subscriptionID); // You can add optional success message for the subscriber here
-                }
-            }).render('#paypalSubButton'); // Renders the PayPal button
-        });
     }
 }
 
diff --git a/public/static/css/style.css b/public/static/css/style.css
index 679e77e..42c6ece 100644
--- a/public/static/css/style.css
+++ b/public/static/css/style.css
@@ -127,8 +127,8 @@ footer {
 }
 
 #dialog {
-  width: 25em;
-  max-width: var(--page-width);
+  width: 85%;
+  max-width: 30em;
   display: none;
   position: fixed;
   top: 50%;
@@ -142,7 +142,7 @@ footer {
   border-radius: 10px;
   text-align: left;
   overflow: auto;
-  max-height: 80vh;
+  max-height: 70vh;
 }
 
 #dialog h2, #dialog p {
@@ -167,7 +167,6 @@ footer {
 }
 
 #dialog input {
-  border-radius: 10px;
   text-align: left;
   font-size: 1em;
   display: block;
@@ -225,13 +224,17 @@ button {
   border: 0;
 }
 
+#method-button-container {
+  display: flex;
+  justify-content: center;
+  margin: 1em 0;
+}
+
 #method-button-container button {
-  background-color: #ccc;
-  border: none;
-  padding: 10px 20px;
-  margin: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
+  transition: 0.3s;
+  background-color: var(--background);
+  border: 1px solid var(--hover-border);
+  color: var(--unemph-color);
 }
 
 #method-button-container button.active {
@@ -240,6 +243,7 @@ button {
 }
 
 #paypal-button-container > div {
+  margin: 1.5em 0 0 0;
   display: none;
 }