improved checkout

Author: KhafraDev

Synergism.css

@@ -553,7 +553,6 @@ body button:active:not(:disabled):not(.disable-hover-color) {
 
 #exitOffline,
 #exitFastForward,
-#closeCart,
 #checkout {
     width: 18em;
     min-height: auto;
@@ -567,7 +566,6 @@ body button:active:not(:disabled):not(.disable-hover-color) {
 }
 
 #exitOffline:hover,
-#closeCart:hover,
 #checkout:not(:disabled):hover {
     background-color: var(--purplehover-color);
 }
@@ -5034,7 +5032,13 @@ form input:hover {
     margin: 0 auto;
 }
 
-#closeCart,
+#checkout-buttons {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 0 auto;
+}
+
 #checkout {
     margin: 2px auto 4px;
 }

index.html

@@ -4564,9 +4564,10 @@ <h1 id="pCoinUpgradeName">Welcome to the PseudoShop!</h1>
             </label>
           </section>
 
-          <button id="checkout" type="submit">Checkout</button>
-          <div id="checkout-paypal"></div>
-          <button id="closeCart" type="button">Close</button>
+          <div id="checkout-buttons">
+            <button id="checkout" type="submit" i18n="tabs.pseudocoins.checkoutStripe"></button>
+            <div id="checkout-paypal"></div>
+          </div>
         </div>
       </div>
       <div id="merchContainer">

src/purchases/CheckoutTab.ts

@@ -1,6 +1,5 @@
 import { loadScript } from '@paypal/paypal-js'
 import { prod } from '../Config'
-import { changeSubTab, Tabs } from '../Tabs'
 import { Alert, Notification } from '../UpdateHTML'
 import { memoize } from '../Utility'
 import { products, subscriptionProducts } from './CartTab'
@@ -10,28 +9,17 @@ import { updatePseudoCoins } from './UpgradesSubtab'
 const tab = document.querySelector<HTMLElement>('#pseudoCoins > #cartContainer')!
 const form = tab.querySelector('div.cartList')!
 
-const checkout = form.querySelector('button#checkout')
-const closeCart = form.querySelector('button#closeCart')
+const checkout = form.querySelector<HTMLElement>('button#checkout')
 const radioTOSAgree = form.querySelector<HTMLInputElement>('section > input[type="radio"]')!
 const totalCost = form.querySelector('p#totalCost')
 const itemList = form.querySelector('#itemList')!
 
-let tosAgreed = false
 const formatter = Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD'
 })
 
 export const initializeCheckoutTab = memoize(() => {
-  closeCart?.addEventListener('click', () => {
-    changeSubTab(Tabs.Purchase, { page: 0 })
-  })
-
-  radioTOSAgree.addEventListener('click', () => {
-    tosAgreed = !tosAgreed
-    radioTOSAgree.checked = tosAgreed
-  })
-
   itemList.insertAdjacentHTML(
     'afterend',
     products.map((product) => (`
@@ -46,8 +34,8 @@ export const initializeCheckoutTab = memoize(() => {
     `)).join('')
   )
 
-  checkout?.addEventListener('click', (e) => {
-    if (!tosAgreed) {
+  function submitCheckout (e: MouseEvent) {
+    if (!radioTOSAgree.checked) {
       e.preventDefault()
       Notification('You must accept the terms of service first!')
       return
@@ -59,13 +47,22 @@ export const initializeCheckoutTab = memoize(() => {
       fd.set(product.id, `${product.quantity}`)
     }
 
-    fd.set('tosAgree', tosAgreed ? 'on' : 'off')
+    fd.set('tosAgree', radioTOSAgree.checked ? 'on' : 'off')
+
+    checkout?.setAttribute('disabled', '')
 
-    checkout.setAttribute('disabled', '')
+    let url: string
 
-    const url = !prod
-      ? 'https://synergism.cc/stripe/test/create-checkout-session'
-      : 'https://synergism.cc/stripe/create-checkout-session'
+    const clickedId = (e.target as HTMLElement).id
+
+    if (clickedId === 'checkout') {
+      url = !prod
+        ? 'https://synergism.cc/stripe/test/create-checkout-session'
+        : 'https://synergism.cc/stripe/create-checkout-session'
+    } else {
+      Notification(`You clicked on ${clickedId}.`)
+      return
+    }
 
     fetch(url, {
       method: 'POST',
@@ -79,9 +76,11 @@ export const initializeCheckoutTab = memoize(() => {
         }
       })
       .finally(() => {
-        checkout.removeAttribute('disabled')
+        checkout?.removeAttribute('disabled')
       })
-  })
+  }
+
+  checkout?.addEventListener('click', submitCheckout)
 
   initializePayPal('#checkout-paypal')
 })
@@ -188,7 +187,7 @@ async function initializePayPal (selector: string | HTMLElement) {
           fd.set(product.id, `${product.quantity}`)
         }
 
-        fd.set('tosAgree', tosAgreed ? 'on' : 'off')
+        fd.set('tosAgree', radioTOSAgree.checked ? 'on' : 'off')
         const url = 'https://synergism.cc/paypal/orders/create'
 
         const response = await fetch(url, {

src/purchases/SubscriptionsSubtab.ts

@@ -144,7 +144,7 @@ export const createIndividualSubscriptionHTML = (product: SubscriptionProduct, e
           <button data-id="${product.id}" data-name="${product.name}" data-upgrade class="pseudoCoinButton">
             Upgrade for ${formatter.format((product.price - existingCosts) / 100)} USD / mo
           </button>
-          <div class="checkout-paypal" data-id="${product.id}"></div>
+          <!--<div class="checkout-paypal" data-id="${product.id}"></div>-->
       </div>
       </section>
     `

translations/en.json

@@ -4152,7 +4152,8 @@
       "subscriptions": "Subscriptions",
       "upgrades": "Buy Upgrades",
       "merch": "Purchase Merch",
-      "consumables": "Consumables & Events"
+      "consumables": "Consumables & Events",
+      "checkoutStripe": "Checkout with Stripe"
     }
   },
   "offlineProgress": {