Full-Stack Web Developer: Secure Stripe Calculator (Webflow/Framer + Supabase + Vercel)

In addition to building the website in accordance with the attached documents, the description below details how to make the calculator for two of our three products. Calculator Project Scope: Secure 2-Page Insurance Calculator (Web Builder + Supabase + Vercel + Stripe) Page 1: The UI Calculator (Calculates on Click) The user inputs 5 variables into a form built on my website builder. When they click the "Calculate Insurance Quote" button, client-side JavaScript instantly intercepts the click, calculates the preview price using our math formula, and displays it on the screen. Simultaneously, JavaScript pushes those 5 variables to a temporary table in Supabase to create a secure record, receives a unique quote_id, and passes only that single ID parameter to Page 2 via a URL Query Parameter. Page 2: Reading the Draft Reference & Saving Intake Data When Page 2 loads, an embedded JavaScript snippet reads the quote_id from the URL parameters and queries Supabase to pull the 5 original variables back into memory. This allows the page to seamlessly continue displaying the correct calculated premium price on the screen. The user then fills out the additional intake form fields natively designed in our website builder, including a streaming platform dropdown menu, text fields for their streamer handle, and team checkboxes. The Checkout Trigger: The Script API Handoff When the user submits Page 2 by clicking "Buy Insurance Policy", custom JavaScript overrides the default form behavior. It bundles the fresh intake form responses (streaming platform selection, handle, and selected teams) along with the master quote_id. It then fires a secure POST request containing this data bundle straight to a hidden backend Vercel Serverless Function. The Backend & Stripe: Status Tracking & Webhook Automation The Vercel Serverless Function processes the request completely server-side, hidden from the browser. It reads the incoming quote_id and fetches the original 5 variables straight from our Supabase database holding pen. It independently recalculates the final price using those database-verified numbers to ensure absolutely no client-side tampering or form-field manipulation has occurred. The function updates this exact Supabase row with the new Page 2 intake form answers and sets a column named status to "pending". It then calls the Stripe API to generate a secure Checkout Session using the un-tampered price, passing the quote_id along as Stripe metadata. To handle the data retention seamlessly, you must implement a two-part lifecycle system: The Success Lock: Configure a Stripe Webhook that listens for successful payments (checkout.session.completed). When a payment succeeds, the webhook must target the corresponding quote_id in Supabase and flip its status to "paid", securing it as a permanent insurance log book record. The Automated Cleanup: Configure a background database pg_cron job in Supabase to sweep the table every hour. It must permanently delete rows older than 1 hour ONLY if their status is still marked as "draft" or "pending". Any row marked as "paid" must be completely skipped by the cleanup script to maintain a permanent history of successful purchases.