improve checkout ux

This commit is contained in:
evanpelle
2025-07-29 10:37:22 -07:00
parent bf13c65657
commit 608918a749
2 changed files with 25 additions and 10 deletions
+6 -3
View File
@@ -31,6 +31,8 @@ export interface Pattern {
notShown?: boolean;
}
export const PURCHASE_SUCCESS_PARAM = "purchase-success";
export async function patterns(
userMe: UserMeResponse | null,
): Promise<Pattern[]> {
@@ -109,8 +111,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.href}#${PURCHASE_SUCCESS_PARAM}=true`,
cancelUrl: `${window.location.href}#${PURCHASE_SUCCESS_PARAM}=false`,
}),
},
);
@@ -139,7 +141,8 @@ export async function listAllProducts(): Promise<Map<string, StripeProduct>> {
const products = (await response.json()) as StripeProduct[];
const productMap = new Map<string, StripeProduct>();
products.forEach((product) => {
productMap.set(product.metadata.flare, product);
const flare = `${product.metadata.type}:${product.metadata.name}`;
productMap.set(flare, product);
});
return productMap;
} catch (error) {
+19 -7
View File
@@ -7,6 +7,7 @@ import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
import { GameType } from "../core/game/Game";
import { UserSettings } from "../core/game/UserSettings";
import { joinLobby } from "./ClientGameRunner";
import { PURCHASE_SUCCESS_PARAM } from "./Cosmetics";
import "./DarkModeButton";
import { DarkModeButton } from "./DarkModeButton";
import "./FlagInput";
@@ -399,13 +400,24 @@ class Client {
private handleHash() {
const { hash } = window.location;
if (hash.startsWith("#")) {
const params = new URLSearchParams(hash.slice(1));
const lobbyId = params.get("join");
if (lobbyId && ID.safeParse(lobbyId).success) {
this.joinModal.open(lobbyId);
console.log(`joining lobby ${lobbyId}`);
}
if (!hash.startsWith("#")) {
return;
}
const params = new URLSearchParams(hash.slice(1));
const lobbyId = params.get("join");
if (lobbyId && ID.safeParse(lobbyId).success) {
this.joinModal.open(lobbyId);
console.log(`joining lobby ${lobbyId}`);
}
const purchaseSuccess = params.get(PURCHASE_SUCCESS_PARAM);
// TODO: Add a purchase success/failure modal
if (purchaseSuccess === "true") {
alert("Purchase successful!");
window.history.replaceState(null, "", window.location.pathname);
} else if (purchaseSuccess === "false") {
alert("Purchase cancelled");
window.history.replaceState(null, "", window.location.pathname);
}
}