From eced7c2df8577936525a99f51b33b6c92d569f49 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Wed, 19 Feb 2025 14:11:39 +0100
Subject: [PATCH 1/4] add star our repo CTA

---
 .../src/client/components/NavBar/NavBar.tsx   | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/template/app/src/client/components/NavBar/NavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
index a4fed88..f6147f7 100644
--- a/template/app/src/client/components/NavBar/NavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -32,6 +32,7 @@ export default function AppNavBar({ navigationItems }: { navigationItems: Naviga
           !isLandingPage,
       })}
     >
+      {isLandingPage && <Announcement />}
       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
         <div className='flex items-center lg:flex-1'>
           <WaspRouterLink
@@ -138,3 +139,31 @@ function renderNavigationItems(
     );
   });
 }
+
+const ContestURL = 'https://github.com/wasp-lang/wasp';
+
+function Announcement() {
+  return (
+    <div className='flex justify-center items-center gap-3 p-3 w-full bg-gradient-to-r from-[#d946ef] to-[#fc0] font-semibold text-white text-center z-49'>
+      <p
+        onClick={() => window.open(ContestURL, '_blank')}
+        className='hidden lg:block cursor-pointer hover:opacity-90 hover:drop-shadow'
+      >
+        Support Open-Source Software!
+      </p>
+      <div className='hidden lg:block self-stretch w-0.5 bg-white'></div>
+      <div
+        onClick={() => window.open(ContestURL, '_blank')}
+        className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
+      >
+        Star Our Repo on Github ⭐️ →
+      </div>
+      <div
+        onClick={() => window.open(ContestURL, '_blank')}
+        className='lg:hidden cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
+      >
+        ⭐️ Star the Our Repo on Github and Support Open-Source! ⭐️
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

From e83ab21f9675ff691fdb5436f0aeca441399b0fd Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Wed, 19 Feb 2025 14:12:46 +0100
Subject: [PATCH 2/4] EOF newline

---
 template/app/src/client/components/NavBar/NavBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/app/src/client/components/NavBar/NavBar.tsx b/template/app/src/client/components/NavBar/NavBar.tsx
index f6147f7..5c0476a 100644
--- a/template/app/src/client/components/NavBar/NavBar.tsx
+++ b/template/app/src/client/components/NavBar/NavBar.tsx
@@ -166,4 +166,4 @@ function Announcement() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From be1b5adf1986b52394cc7655321d36cb7cd66b2d Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Wed, 19 Feb 2025 14:17:13 +0100
Subject: [PATCH 3/4] Update NavBar.tsx.diff

---
 .../client/components/NavBar/NavBar.tsx.diff  | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
index 1b4a1c6..9c7a778 100644
--- a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
+++ b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
@@ -1,14 +1,15 @@
 --- template/app/src/client/components/NavBar/NavBar.tsx
 +++ opensaas-sh/app/src/client/components/NavBar/NavBar.tsx
-@@ -32,6 +32,7 @@
+@@ -32,7 +32,7 @@
            !isLandingPage,
        })}
      >
+-      {isLandingPage && <Announcement />}
 +      {/* {isLandingPage && <Announcement />} */}
        <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
          <div className='flex items-center lg:flex-1'>
            <WaspRouterLink
-@@ -39,9 +40,7 @@
+@@ -40,9 +40,7 @@
              className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
            >
              <NavLogo />
@@ -19,7 +20,7 @@
            </WaspRouterLink>
          </div>
          <div className='flex lg:hidden'>
-@@ -56,13 +55,13 @@
+@@ -57,13 +55,13 @@
          </div>
          <div className='hidden lg:flex lg:gap-x-12'>{renderNavigationItems(navigationItems)}</div>
          <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
@@ -36,7 +37,7 @@
                </div>
              </WaspRouterLink>
            ) : (
-@@ -77,7 +76,7 @@
+@@ -78,7 +76,7 @@
          <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
            <div className='flex items-center justify-between'>
              <WaspRouterLink to={routes.LandingPageRoute.to} className='-m-1.5 p-1.5'>
@@ -45,7 +46,7 @@
                <NavLogo />
              </WaspRouterLink>
              <button
-@@ -96,7 +95,7 @@
+@@ -97,7 +95,7 @@
                  {isUserLoading ? null : !user ? (
                    <WaspRouterLink to={routes.LoginRoute.to}>
                      <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
@@ -54,32 +55,41 @@
                      </div>
                    </WaspRouterLink>
                  ) : (
-@@ -138,3 +137,27 @@
-     );
+@@ -140,30 +138,26 @@
    });
  }
-+
+ 
+-const ContestURL = 'https://github.com/wasp-lang/wasp';
 +const ContestURL =
 +  'https://docs.opensaas.sh/blog/';
-+
-+function Announcement() {
-+  return (
-+    <div className='flex justify-center items-center gap-3 p-3 w-full bg-gradient-to-r from-[#d946ef] to-[#fc0] font-semibold text-white text-center z-49'>
+ 
+ function Announcement() {
+   return (
+     <div className='flex justify-center items-center gap-3 p-3 w-full bg-gradient-to-r from-[#d946ef] to-[#fc0] font-semibold text-white text-center z-49'>
+-      <p
+-        onClick={() => window.open(ContestURL, '_blank')}
+-        className='hidden lg:block cursor-pointer hover:opacity-90 hover:drop-shadow'
+-      >
+-        Support Open-Source Software!
+-      </p>
 +      <p onClick={() => window.open(ContestURL, '_blank')} className='hidden lg:block cursor-pointer hover:opacity-90 hover:drop-shadow'>🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬</p>
-+      <div className='hidden lg:block self-stretch w-0.5 bg-white'></div>
-+      <div
-+        onClick={() => window.open(ContestURL, '_blank')}
-+        className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
-+      >
+       <div className='hidden lg:block self-stretch w-0.5 bg-white'></div>
+       <div
+         onClick={() => window.open(ContestURL, '_blank')}
+         className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
+       >
+-        Star Our Repo on Github ⭐️ →
 +        Enter here and win prizes! →
-+      </div>
-+      <div
-+        onClick={() => window.open(ContestURL, '_blank')}
-+        className='lg:hidden cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
-+      >
+       </div>
+       <div
+         onClick={() => window.open(ContestURL, '_blank')}
+         className='lg:hidden cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
+       >
+-        ⭐️ Star the Our Repo on Github and Support Open-Source! ⭐️
 +        🍪 The Most Annoying Cookie Banner Contest! 🤬 →
-+      </div>
-+    </div>
-+  );
+       </div>
+     </div>
+   );
+-}
 +}
 \ No newline at end of file

From e1a943602972821d3d31f23800507758e8a36d23 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Thu, 20 Feb 2025 10:58:51 +0100
Subject: [PATCH 4/4] improve one-time payment webhook logic (#375)

* improve one-time payment webhook logic

* Update paymentProcessor.ts.diff

* update tests and docs

* fix requested changes
---
 .../payment/stripe/paymentProcessor.ts.diff   |  2 +-
 .../src/content/docs/guides/deploying.mdx     |  1 +
 .../app/src/payment/stripe/checkoutUtils.ts   | 36 ++++++++-
 .../src/payment/stripe/paymentProcessor.ts    |  1 -
 template/app/src/payment/stripe/webhook.ts    | 81 +++++++++++++++----
 template/e2e-tests/tests/demoAppTests.spec.ts |  6 +-
 .../e2e-tests/tests/pricingPageTests.spec.ts  | 22 +++--
 template/e2e-tests/tests/utils.ts             | 38 ++++++++-
 8 files changed, 154 insertions(+), 33 deletions(-)

diff --git a/opensaas-sh/app_diff/src/payment/stripe/paymentProcessor.ts.diff b/opensaas-sh/app_diff/src/payment/stripe/paymentProcessor.ts.diff
index 3051548..c544361 100644
--- a/opensaas-sh/app_diff/src/payment/stripe/paymentProcessor.ts.diff
+++ b/opensaas-sh/app_diff/src/payment/stripe/paymentProcessor.ts.diff
@@ -1,6 +1,6 @@
 --- template/app/src/payment/stripe/paymentProcessor.ts
 +++ opensaas-sh/app/src/payment/stripe/paymentProcessor.ts
-@@ -21,7 +21,7 @@
+@@ -20,7 +20,7 @@
          id: userId
        },
        data: {
diff --git a/opensaas-sh/blog/src/content/docs/guides/deploying.mdx b/opensaas-sh/blog/src/content/docs/guides/deploying.mdx
index 3e27214..09ccff0 100644
--- a/opensaas-sh/blog/src/content/docs/guides/deploying.mdx
+++ b/opensaas-sh/blog/src/content/docs/guides/deploying.mdx
@@ -178,6 +178,7 @@ export const stripe = new Stripe(process.env.STRIPE_KEY!, {
   <br/>- `customer.subscription.deleted`
   <br/>- `customer.subscription.updated`
   <br/>- `invoice.paid`
+  <br/>- `payment_intent.succeeded`
 <Image src={stripeSigningSecret} alt="signing secret" loading="lazy" />
 5. after that, go to the webhook you just created and `reveal` the new signing secret.
 6. add this secret to your deployed server's `STRIPE_WEBHOOK_SECRET=` environment variable. <br/>If you've deployed to Fly.io, you can do that easily with the following command:
diff --git a/template/app/src/payment/stripe/checkoutUtils.ts b/template/app/src/payment/stripe/checkoutUtils.ts
index 8d8ffa4..489d02a 100644
--- a/template/app/src/payment/stripe/checkoutUtils.ts
+++ b/template/app/src/payment/stripe/checkoutUtils.ts
@@ -1,6 +1,8 @@
 import type { StripeMode } from './paymentProcessor';
+
 import Stripe from 'stripe';
 import { stripe } from './stripeClient';
+import { assertUnreachable } from '../../shared/utils';
 
 // WASP_WEB_CLIENT_URL will be set up by Wasp when deploying to production: https://wasp.sh/docs/deploying
 const DOMAIN = process.env.WASP_WEB_CLIENT_URL || 'http://localhost:3000';
@@ -27,8 +29,20 @@ export async function fetchStripeCustomer(customerEmail: string) {
   }
 }
 
-export async function createStripeCheckoutSession({ userId, priceId, customerId, mode }: { userId: string, priceId: string; customerId: string; mode: StripeMode }) {
+interface CreateStripeCheckoutSessionParams {
+  priceId: string;
+  customerId: string;
+  mode: StripeMode;
+}
+
+export async function createStripeCheckoutSession({
+  priceId,
+  customerId,
+  mode,
+}: CreateStripeCheckoutSessionParams) {
   try {
+    const paymentIntentData = getPaymentIntentData({ mode, priceId });
+
     return await stripe.checkout.sessions.create({
       line_items: [
         {
@@ -44,9 +58,29 @@ export async function createStripeCheckoutSession({ userId, priceId, customerId,
         address: 'auto',
       },
       customer: customerId,
+      // Stripe only allows us to pass payment intent metadata for one-time payments, not subscriptions.
+      // We do this so that we can capture priceId in the payment_intent.succeeded webhook
+      // and easily confirm the user's payment based on the price id. For subscriptions, we can get the price id
+      // in the customer.subscription.updated webhook via the line_items field.
+      payment_intent_data: paymentIntentData,
     });
   } catch (error) {
     console.error(error);
     throw error;
   }
 }
+
+function getPaymentIntentData({ mode, priceId }: { mode: StripeMode; priceId: string }):
+  | {
+      metadata: { priceId: string };
+    }
+  | undefined {
+  switch (mode) {
+    case 'subscription':
+      return undefined;
+    case 'payment':
+      return { metadata: { priceId } };
+    default:
+      assertUnreachable(mode);
+  }
+}
diff --git a/template/app/src/payment/stripe/paymentProcessor.ts b/template/app/src/payment/stripe/paymentProcessor.ts
index fc773fb..4055d88 100644
--- a/template/app/src/payment/stripe/paymentProcessor.ts
+++ b/template/app/src/payment/stripe/paymentProcessor.ts
@@ -11,7 +11,6 @@ export const stripePaymentProcessor: PaymentProcessor = {
   createCheckoutSession: async ({ userId, userEmail, paymentPlan, prismaUserDelegate }: CreateCheckoutSessionArgs) => {
     const customer = await fetchStripeCustomer(userEmail);
     const stripeSession = await createStripeCheckoutSession({
-      userId,
       priceId: paymentPlan.getPaymentProcessorPlanId(),
       customerId: customer.id,
       mode: paymentPlanEffectToStripeMode(paymentPlan.effect),
diff --git a/template/app/src/payment/stripe/webhook.ts b/template/app/src/payment/stripe/webhook.ts
index f018bf9..b0c9972 100644
--- a/template/app/src/payment/stripe/webhook.ts
+++ b/template/app/src/payment/stripe/webhook.ts
@@ -4,7 +4,7 @@ import { type PrismaClient } from '@prisma/client';
 import express from 'express';
 import { Stripe } from 'stripe';
 import { stripe } from './stripeClient';
-import { paymentPlans, PaymentPlanId, SubscriptionStatus } from '../plans';
+import { paymentPlans, PaymentPlanId, SubscriptionStatus, PaymentPlanEffect, PaymentPlan } from '../plans';
 import { updateUserStripePaymentDetails } from './paymentDetails';
 import { emailSender } from 'wasp/server/email';
 import { assertUnreachable } from '../../shared/utils';
@@ -33,6 +33,10 @@ export const stripeWebhook: PaymentsWebhook = async (request, response, context)
       const invoice = event.data.object as Stripe.Invoice;
       await handleInvoicePaid(invoice, prismaUserDelegate);
       break;
+    case 'payment_intent.succeeded':
+      const paymentIntent = event.data.object as Stripe.PaymentIntent;
+      await handlePaymentIntentSucceeded(paymentIntent, prismaUserDelegate);
+      break;
     case 'customer.subscription.updated':
       const updatedSubscription = event.data.object as Stripe.Subscription;
       await handleCustomerSubscriptionUpdated(updatedSubscription, prismaUserDelegate);
@@ -59,6 +63,9 @@ export const stripeMiddlewareConfigFn: MiddlewareConfigFn = (middlewareConfig) =
   return middlewareConfig;
 };
 
+// Because a checkout session completed could potentially result in a failed payment,
+// we can update the user's payment details here, but confirm credits or a subscription
+// if the payment succeeds in other, more specific, webhooks.
 export async function handleCheckoutSessionCompleted(
   session: Stripe.Checkout.Session,
   prismaUserDelegate: PrismaClient["user"]
@@ -67,37 +74,63 @@ export async function handleCheckoutSessionCompleted(
   const { line_items } = await stripe.checkout.sessions.retrieve(session.id, {
     expand: ['line_items'],
   });
-
   const lineItemPriceId = extractPriceId(line_items);
-
   const planId = getPlanIdByPriceId(lineItemPriceId);
   const plan = paymentPlans[planId];
-
-  let subscriptionPlan: PaymentPlanId | undefined;
-  let numOfCreditsPurchased: number | undefined;
-  switch (plan.effect.kind) {
-    case 'subscription':
-      subscriptionPlan = planId;
-      break;
-    case 'credits':
-      numOfCreditsPurchased = plan.effect.amount;
-      break;
-    default:
-      assertUnreachable(plan.effect);
+  if (plan.effect.kind === 'credits') {
+    return;
   }
+  const { subscriptionPlan } = getPlanEffectPaymentDetails({ planId, planEffect: plan.effect });
 
   return updateUserStripePaymentDetails(
-    { userStripeId, subscriptionPlan, numOfCreditsPurchased, datePaid: new Date() },
+    { userStripeId, subscriptionPlan },
     prismaUserDelegate
   );
 }
 
+// This is called when a subscription is purchased or renewed and payment succeeds. 
+// Invoices are not created for one-time payments, so we handle them in the payment_intent.succeeded webhook.
 export async function handleInvoicePaid(invoice: Stripe.Invoice, prismaUserDelegate: PrismaClient["user"]) {
   const userStripeId = validateUserStripeIdOrThrow(invoice.customer);
   const datePaid = new Date(invoice.period_start * 1000);
   return updateUserStripePaymentDetails({ userStripeId, datePaid }, prismaUserDelegate);
 }
 
+export async function handlePaymentIntentSucceeded(
+  paymentIntent: Stripe.PaymentIntent,
+  prismaUserDelegate: PrismaClient['user']
+) {
+  // We handle invoices in the invoice.paid webhook. Invoices exist for subscription payments, 
+  // but not for one-time payment/credits products which use the Stripe `payment` mode on checkout sessions.
+  if (paymentIntent.invoice) {
+    return;
+  }
+
+  const userStripeId = validateUserStripeIdOrThrow(paymentIntent.customer);
+  const datePaid = new Date(paymentIntent.created * 1000);
+
+  // We capture the price id from the payment intent metadata
+  // that we passed in when creating the checkout session in checkoutUtils.ts.
+  const { metadata } = paymentIntent;
+
+  if (!metadata.priceId) {
+    throw new HttpError(400, 'No price id found in payment intent');
+  }
+
+  const planId = getPlanIdByPriceId(metadata.priceId);
+  const plan = paymentPlans[planId];
+  if (plan.effect.kind === 'subscription') {
+    return;
+  }
+
+  const { numOfCreditsPurchased } = getPlanEffectPaymentDetails({ planId, planEffect: plan.effect });
+
+  return updateUserStripePaymentDetails(
+    { userStripeId, numOfCreditsPurchased, datePaid },
+    prismaUserDelegate
+  );
+}
+
 export async function handleCustomerSubscriptionUpdated(
   subscription: Stripe.Subscription,
   prismaUserDelegate: PrismaClient["user"]
@@ -174,4 +207,18 @@ function getPlanIdByPriceId(priceId: string): PaymentPlanId {
     throw new Error(`No plan with Stripe price id ${priceId}`);
   }
   return planId;
-}
\ No newline at end of file
+}
+
+function getPlanEffectPaymentDetails({ planId, planEffect }: { planId: PaymentPlanId, planEffect: PaymentPlanEffect}): {
+  subscriptionPlan: PaymentPlanId | undefined;
+  numOfCreditsPurchased: number | undefined;
+} {
+  switch (planEffect.kind) {
+    case 'subscription':
+      return { subscriptionPlan: planId, numOfCreditsPurchased: undefined };
+    case 'credits':
+      return { subscriptionPlan: undefined, numOfCreditsPurchased: planEffect.amount };
+    default:
+      assertUnreachable(planEffect);
+  }
+}
diff --git a/template/e2e-tests/tests/demoAppTests.spec.ts b/template/e2e-tests/tests/demoAppTests.spec.ts
index 3d0236c..c40cc6a 100644
--- a/template/e2e-tests/tests/demoAppTests.spec.ts
+++ b/template/e2e-tests/tests/demoAppTests.spec.ts
@@ -89,9 +89,9 @@ test('AI schedule generation fails on 4th attempt', async () => {
   expect(tableTextContent.includes(task2.toLowerCase())).toBeFalsy();
 });
 
-test('Make test payment with Stripe', async () => {
-  const PLAN_NAME = 'Hobby';
-  await makeStripePayment({ test, page, planName: PLAN_NAME });
+test('Make test payment with Stripe for hobby plan', async () => {
+  const planId = 'hobby';
+  await makeStripePayment({ test, page, planId });
 });
 
 test('User should be able to generate another schedule after payment', async () => {
diff --git a/template/e2e-tests/tests/pricingPageTests.spec.ts b/template/e2e-tests/tests/pricingPageTests.spec.ts
index 92f93d9..b3cda4d 100644
--- a/template/e2e-tests/tests/pricingPageTests.spec.ts
+++ b/template/e2e-tests/tests/pricingPageTests.spec.ts
@@ -1,10 +1,10 @@
 import { test, expect, type Page } from '@playwright/test';
-import { signUserUp, logUserIn, createRandomUser, makeStripePayment, type User } from './utils';
+import { signUserUp, logUserIn, createRandomUser, makeStripePayment, type User, acceptAllCookies } from './utils';
 
 let page: Page;
 let testUser: User;
 
-async function logNewUserIn() {
+async function createAndLogInNewUser() {
   testUser = createRandomUser();
   await signUserUp({ page: page, user: testUser });
   await logUserIn({ page: page, user: testUser });
@@ -33,9 +33,9 @@ test('User should see Log In to Buy Plan button', async () => {
 });
 
 test('User should see the Buy Plan button before payment', async () => {
-  // We only need to log the user in once since the tests are running sequentially 
+  // We only need to log the user in once since the tests are running sequentially
   // and the same page is being shared between all the tests.
-  await logNewUserIn();
+  await createAndLogInNewUser();
   await page.goto('/pricing');
   // There are three tiers on the page, so we want to retrieve the first of the three buttons
   const manageSubscriptionButton = page.getByRole('button', { name: 'Buy plan' }).first();
@@ -43,10 +43,10 @@ test('User should see the Buy Plan button before payment', async () => {
   await expect(manageSubscriptionButton).toBeEnabled();
 });
 
-test('Make test payment with Stripe', async () => {
-  const PLAN_NAME = 'Hobby';
+test('Make test payment with Stripe for hobby plan', async () => {
+  const planId = 'hobby';
   await page.goto('/');
-  await makeStripePayment({ test, page, planName: PLAN_NAME });
+  await makeStripePayment({ test, page, planId });
 });
 
 test('User should see the Manage Subscription button after payment', async () => {
@@ -62,3 +62,11 @@ test('User should see the Manage Subscription button after payment', async () =>
   await newTab.waitForLoadState();
   await expect(newTab).toHaveURL(/^https:\/\/billing\.stripe\.com\//);
 });
+
+test('Make test payment with Stripe for 10 credits', async () => {
+  await createAndLogInNewUser();
+  await acceptAllCookies(page); // Clear the cookie consent modal so it doesn't interfere with the payment
+  const planId = 'credits10';
+  await page.goto('/');
+  await makeStripePayment({ test, page, planId });
+});
diff --git a/template/e2e-tests/tests/utils.ts b/template/e2e-tests/tests/utils.ts
index 584b078..8507212 100644
--- a/template/e2e-tests/tests/utils.ts
+++ b/template/e2e-tests/tests/utils.ts
@@ -39,6 +39,20 @@ export const logUserIn = async ({ page, user }: { page: Page; user: User }) => {
 
 export const signUserUp = async ({ page, user }: { page: Page; user: User }) => {
   await page.goto('/');
+  
+  await page.evaluate(() => {
+    try {
+      const sessionId = localStorage.getItem('wasp:sessionId');
+      if (sessionId) {
+        localStorage.removeItem('wasp:sessionId');
+      }
+      window.location.reload();
+    } catch (e) {
+      console.error('Failed to clear localStorage:', e);
+    }
+  });
+
+  await page.waitForLoadState('domcontentloaded');
 
   await page.getByRole('link', { name: 'Log in' }).click();
 
@@ -62,13 +76,22 @@ export const createRandomUser = () => {
   return { email, password: DEFAULT_PASSWORD } as User;
 };
 
-export const makeStripePayment = async ({ test, page, planName }: { test: any; page: Page; planName: string }) => {
+export const makeStripePayment = async ({
+  test,
+  page,
+  planId,
+}: {
+  test: any;
+  page: Page;
+  planId: 'hobby' | 'pro' | 'credits10';
+}) => {
   test.slow(); // Stripe payments take a long time to confirm and can cause tests to fail so we use a longer timeout
 
   await page.click('text="Pricing"');
   await page.waitForURL('**/pricing');
 
-  const buyBtn = page.getByRole('button', { name: 'Buy plan' }).first(); // "Hobby Plan" is the first of three plans
+  const buyBtn = page.locator(`button[aria-describedby="${planId}"]`);
+
   await expect(buyBtn).toBeVisible();
   await expect(buyBtn).toBeEnabled();
   await buyBtn.click();
@@ -92,5 +115,14 @@ export const makeStripePayment = async ({ test, page, planName }: { test: any; p
 
   await page.waitForURL('**/checkout?success=true');
   await page.waitForURL('**/account');
-  await expect(page.getByText(planName)).toBeVisible();
+  if (planId === 'credits10') {
+    await expect(page.getByText('Credits remaining: 13')).toBeVisible();
+  } else {
+    await expect(page.getByText(planId)).toBeVisible();
+  }
+};
+
+export const acceptAllCookies = async (page: Page) => {
+  await page.waitForSelector('button:has-text("Accept all")');
+  await page.click('button:has-text("Accept all")');
 };