improve checkout flow

src/client/Cosmetics.ts

@@ -109,8 +109,8 @@ export async function handlePurchase(priceId: string) {
         },
         body: JSON.stringify({
           priceId: priceId,
-          successUrl: `${window.location.href}purchase-success`,
-          cancelUrl: `${window.location.href}purchase-cancel`,
+          successUrl: `${window.location.origin}?purchase=success`,
+          cancelUrl: `${window.location.origin}?purchase=cancel`,
         }),
       },
     );

src/client/Main.ts

@@ -367,6 +367,7 @@ class Client {
 
     // Attempt to join lobby
     this.handleHash();
+    this.handlePayment();
 
     const onHashUpdate = () => {
       // Reset the UI to its initial state
@@ -409,6 +410,18 @@ class Client {
     }
   }
 
+  private handlePayment() {
+    const params = new URLSearchParams(window.location.search);
+    const purchase = params.get("purchase");
+    if (purchase === "success") {
+      alert("purchase succeeded");
+      history.replaceState(null, "", window.location.pathname);
+    } else if (purchase === "cancel") {
+      alert("purchase failed");
+      history.replaceState(null, "", window.location.pathname);
+    }
+  }
+
   private async handleJoinLobby(event: CustomEvent<JoinLobbyEvent>) {
     const lobby = event.detail;
     console.log(`joining lobby ${lobby.gameID}`);