diff --git a/docs-mintlify/guides/apps/payments/overview.mdx b/docs-mintlify/guides/apps/payments/overview.mdx
index e5411743a..4a68d28e6 100644
--- a/docs-mintlify/guides/apps/payments/overview.mdx
+++ b/docs-mintlify/guides/apps/payments/overview.mdx
@@ -133,9 +133,20 @@ To sell a product, generate a checkout URL and redirect the user to it. The `cre
 
 For team purchases, call `createCheckoutUrl` on the team object instead:
 
-```typescript
-const team = user.useTeam(teamId);
-const checkoutUrl = await team.createCheckoutUrl({ productId });
+```tsx
+function TeamPurchaseButton({ teamId, productId }: { teamId: string, productId: string }) {
+  const user = useUser({ or: "redirect" });
+  const team = user.useTeam(teamId);
+
+  return (
+    <button onClick={async () => {
+      const checkoutUrl = await team.createCheckoutUrl({ productId });
+      window.location.href = checkoutUrl;
+    }}>
+      Purchase team plan
+    </button>
+  );
+}
 ```
 
 <Info>
diff --git a/docs-mintlify/guides/apps/payments/product-lines.mdx b/docs-mintlify/guides/apps/payments/product-lines.mdx
index 2c59f146d..c91cf5660 100644
--- a/docs-mintlify/guides/apps/payments/product-lines.mdx
+++ b/docs-mintlify/guides/apps/payments/product-lines.mdx
@@ -126,10 +126,20 @@ export default function UpgradeButton() {
 
 Team plans work the same way when you call the methods on a team object:
 
-```typescript
-const team = user.useTeam(teamId);
-await team.switchSubscription({
-  fromProductId: "prod_team_pro",
-  toProductId: "prod_team_enterprise",
-});
+```tsx
+function TeamUpgradeButton({ teamId }: { teamId: string }) {
+  const user = useUser({ or: "redirect" });
+  const team = user.useTeam(teamId);
+
+  return (
+    <button onClick={async () => {
+      await team.switchSubscription({
+        fromProductId: "prod_team_pro",
+        toProductId: "prod_team_enterprise",
+      });
+    }}>
+      Upgrade team plan
+    </button>
+  );
+}
 ```
diff --git a/docs-mintlify/guides/apps/payments/products-and-items.mdx b/docs-mintlify/guides/apps/payments/products-and-items.mdx
index 61e745798..27a28979d 100644
--- a/docs-mintlify/guides/apps/payments/products-and-items.mdx
+++ b/docs-mintlify/guides/apps/payments/products-and-items.mdx
@@ -155,9 +155,20 @@ Generate a checkout URL from the user or team that will own the purchase:
 
 For team purchases, call `createCheckoutUrl` on the team object:
 
-```typescript
-const team = user.useTeam(teamId);
-const checkoutUrl = await team.createCheckoutUrl({ productId: "prod_team_plan" });
+```tsx
+function TeamPurchaseButton({ teamId }: { teamId: string }) {
+  const user = useUser({ or: "redirect" });
+  const team = user.useTeam(teamId);
+
+  return (
+    <button onClick={async () => {
+      const checkoutUrl = await team.createCheckoutUrl({ productId: "prod_team_plan" });
+      window.location.href = checkoutUrl;
+    }}>
+      Purchase team plan
+    </button>
+  );
+}
 ```
 
 <Info>