From a19c03bc6394ab08cc5a1a9fbabf5eb46b6791f7 Mon Sep 17 00:00:00 2001 From: srdusr <99972264+srdusr@users.noreply.github.com> Date: Mon, 12 Jan 2026 21:19:00 +0200 Subject: Charge for store items, and price them individually The store had 26 items, a price on each and a working equip flow, but the purchase endpoint granted ownership without taking any money. Anyone signed in could take the whole catalogue for nothing. That endpoint is now gone. Payment goes through Stripe Checkout, which is hosted by Stripe. The buyer is redirected there and comes back, so no card details reach this server and it stays outside PCI scope. Three rules hold the money path together: - The price comes from the server's own catalogue row. The client sends an item id and never an amount. - Nothing is granted at checkout. The item appears only when a webhook arrives with a valid HMAC-SHA256 signature, checked in constant time against a 5 minute timestamp window. - Fulfilment keys off the processor's session id, which is UNIQUE, so a webhook delivered twice cannot grant the same item twice. Prices now vary by item. Every caret cost the same as every other because they are the same thing in a different colour, which left nothing to save for. Carets run 149 to 349, flair 129 to 299, and sprites 249 to 399, since a sprite is the one cosmetic every other racer sees. Four bundles sit above the catalogue, each priced below the sum of its parts: Starter Kit, Neon Set, Racer Set and The Lot. The saving is computed from the current item prices rather than asserted, so it cannot drift. The Lot is defined as every cosmetic rather than a fixed list, so it stays complete as items are added. Three bugs found while wiring this up: - Sprites never showed as equipped. The store compared the equipped caret and flair but not the sprite. - Supporter status was a stored boolean that was set on payment and never cleared, so a 30 day subscription lasted forever. Both read paths now derive it from the expiry. - sqlx::migrate! reads the migrations directory at compile time, but cargo watches source files only. Adding a migration did not trigger a rebuild, so the binary shipped the old migration set and the schema change never ran. A build.rs now declares the dependency. Verified against a real database: bundle maths, the grant statement and its replay, 401 unauthenticated, 404 on unknown ids, 501 with no Stripe keys, and both already-owned refusals. --- web/src/styles.css | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) (limited to 'web/src/styles.css') diff --git a/web/src/styles.css b/web/src/styles.css index 3dae32b..b53e99c 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -2740,6 +2740,133 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar { color: var(--sub-color); } +/* The supporter offer, above the catalogue. It is the one thing in the store + that is not cosmetic, so it does not sit in a category with the rest. */ +.store-supporter { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: 1.5rem; + padding: 0.9rem 1.1rem; + border: var(--border-width) solid color-mix(in srgb, var(--primary-color) 45%, transparent); + border-radius: var(--radius-panel); + background: color-mix(in srgb, var(--primary-color) 7%, transparent); + text-align: left; +} + +.store-supporter.is-supporter { + border-color: color-mix(in srgb, var(--correct-color) 45%, transparent); + background: color-mix(in srgb, var(--correct-color) 7%, transparent); +} + +.store-supporter-text { + display: flex; + flex-direction: column; + gap: 0.15rem; +} + +.store-supporter-text strong { + color: var(--text-color); + font-size: 0.95rem; +} + +.store-supporter-text span { + color: var(--sub-color); + font-size: 0.8rem; +} + +/* Bundles. A card rather than a row: a bundle has to show what is inside it, + which a one-line row has no space for. */ +.bundle-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + gap: 0.75rem; + margin-bottom: 1.5rem; +} + +.bundle-card { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0.9rem 1rem; + border: var(--border-width) solid var(--border-color); + border-radius: var(--radius-panel); + text-align: left; +} + +.bundle-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 0.5rem; +} + +.bundle-name { + color: var(--text-color); + font-size: 0.95rem; + font-weight: 600; +} + +.bundle-saving { + color: var(--correct-color); + font-size: 0.75rem; + white-space: nowrap; +} + +.bundle-description { + color: var(--sub-color); + font-size: 0.8rem; + line-height: 1.4; +} + +.bundle-previews { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; + margin: 0.15rem 0; +} + +/* An item already owned is dimmed rather than hidden, so the bundle still + shows its full contents. */ +.bundle-preview-item.owned { + opacity: 0.35; +} + +.bundle-foot { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + margin-top: auto; + padding-top: 0.25rem; +} + +.bundle-prices { + display: flex; + align-items: baseline; + gap: 0.4rem; +} + +.bundle-price { + color: var(--text-color); + font-size: 1.05rem; + font-weight: 600; +} + +.bundle-full-price { + color: var(--sub-color); + font-size: 0.8rem; + text-decoration: line-through; +} + +.bundle-owned, +.bundle-note { + color: var(--sub-color); + font-size: 0.75rem; +} + /* Close, at the top-right of the content. Replaces the full-width "Back" button every screen carried at the bottom - a third way to do what the wordmark and Escape already did, and the least reachable of the three. */ -- cgit v1.2.3