feat(platform): Add billing portal entry point (#9264)

<img width="1445" alt="image"
src="https://github.com/user-attachments/assets/5aeb7ee2-4d06-4a64-889b-599ad68c6dae"
/>


### Changes 🏗️

Added an entry point to open the Stripe billing portal.

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>
  
  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>

---------

Co-authored-by: Krzysztof Czerwinski <kpczerwinski@gmail.com>
This commit is contained in:
Zamil Majdy
2025-01-17 04:00:15 +07:00
committed by GitHub
parent c36c239dd5
commit 56b33327ab
4 changed files with 114 additions and 60 deletions

View File

@@ -289,28 +289,13 @@ class UserCredit(UserCreditBase):
transaction_type=CreditTransactionType.TOP_UP,
)
@staticmethod
async def _get_stripe_customer_id(user_id: str) -> str:
user = await get_user_by_id(user_id)
if not user:
raise ValueError(f"User not found: {user_id}")
if user.stripeCustomerId:
return user.stripeCustomerId
customer = stripe.Customer.create(name=user.name or "", email=user.email)
await User.prisma().update(
where={"id": user_id}, data={"stripeCustomerId": customer.id}
)
return customer.id
async def top_up_intent(self, user_id: str, amount: int) -> str:
# Create checkout session
# https://docs.stripe.com/checkout/quickstart?client=react
# unit_amount param is always in the smallest currency unit (so cents for usd)
# which is equal to amount of credits
checkout_session = stripe.checkout.Session.create(
customer=await self._get_stripe_customer_id(user_id),
customer=await get_stripe_customer_id(user_id),
line_items=[
{
"price_data": {
@@ -451,3 +436,18 @@ def get_user_credit_model() -> UserCreditBase:
def get_block_costs() -> dict[str, list[BlockCost]]:
return {block().id: costs for block, costs in BLOCK_COSTS.items()}
async def get_stripe_customer_id(user_id: str) -> str:
user = await get_user_by_id(user_id)
if not user:
raise ValueError(f"User not found: {user_id}")
if user.stripeCustomerId:
return user.stripeCustomerId
customer = stripe.Customer.create(name=user.name or "", email=user.email)
await User.prisma().update(
where={"id": user_id}, data={"stripeCustomerId": customer.id}
)
return customer.id

View File

@@ -29,7 +29,11 @@ from backend.data.api_key import (
update_api_key_permissions,
)
from backend.data.block import BlockInput, CompletedBlockOutput
from backend.data.credit import get_block_costs, get_user_credit_model
from backend.data.credit import (
get_block_costs,
get_stripe_customer_id,
get_user_credit_model,
)
from backend.data.user import get_or_create_user
from backend.executor import ExecutionManager, ExecutionScheduler, scheduler
from backend.integrations.creds_manager import IntegrationCredentialsManager
@@ -186,6 +190,21 @@ async def stripe_webhook(request: Request):
return Response(status_code=200)
@v1_router.get(path="/credits/manage", dependencies=[Depends(auth_middleware)])
async def manage_payment_method(
user_id: Annotated[str, Depends(get_user_id)],
) -> dict[str, str]:
session = stripe.billing_portal.Session.create(
customer=await get_stripe_customer_id(user_id),
return_url=settings.config.platform_base_url + "/store/credits",
)
if not session:
raise HTTPException(
status_code=400, detail="Failed to create billing portal session"
)
return {"url": session.url}
########################################################
##################### Graphs ###########################
########################################################

View File

@@ -2,14 +2,15 @@
import { Button } from "@/components/agptui/Button";
import useCredits from "@/hooks/useCredits";
import { useBackendAPI } from "@/lib/autogpt-server-api/context";
import { useSearchParams } from "next/navigation";
import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
export default function CreditsPage() {
const { credits, requestTopUp } = useCredits();
const { requestTopUp } = useCredits();
const [amount, setAmount] = useState(5);
const [patched, setPatched] = useState(false);
const searchParams = useSearchParams();
const router = useRouter();
const topupStatus = searchParams.get("topup");
const api = useBackendAPI();
@@ -20,54 +21,84 @@ export default function CreditsPage() {
}
}, [api, patched, topupStatus]);
const openBillingPortal = async () => {
const portal = await api.getUserPaymentPortalLink();
router.push(portal.url);
};
return (
<div className="w-full min-w-[800px] px-4 sm:px-8">
<h1 className="font-circular mb-6 text-[28px] font-normal text-neutral-900 dark:text-neutral-100 sm:mb-8 sm:text-[35px]">
Credits
</h1>
<p className="font-circular mb-6 text-base font-normal leading-tight text-neutral-600 dark:text-neutral-400">
Current credits: <b>{credits}</b>
</p>
<h2 className="font-circular mb-4 text-lg font-normal leading-7 text-neutral-700 dark:text-neutral-300">
Top-up Credits
</h2>
<p className="font-circular mb-6 text-base font-normal leading-tight text-neutral-600 dark:text-neutral-400">
{topupStatus === "success" && (
<span className="text-green-500">
Your payment was successful. Your credits will be updated shortly.
</span>
)}
{topupStatus === "cancel" && (
<span className="text-red-500">
Payment failed. Your payment method has not been charged.
</span>
)}
</p>
<div className="w-full">
<label className="font-circular mb-1.5 block text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
1 USD = 100 credits, 5 USD is a minimum top-up
</label>
<div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
<input
type="number"
name="displayName"
value={amount}
placeholder="Top-up amount in USD"
min="5"
step="1"
className="font-circular w-full border-none bg-transparent text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
onChange={(e) => setAmount(parseInt(e.target.value))}
/>
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
{/* Left Column */}
<div>
<h2 className="text-lg">Top-up Credits</h2>
<p className="mb-6 text-neutral-600 dark:text-neutral-400">
{topupStatus === "success" && (
<span className="text-green-500">
Your payment was successful. Your credits will be updated
shortly.
</span>
)}
{topupStatus === "cancel" && (
<span className="text-red-500">
Payment failed. Your payment method has not been charged.
</span>
)}
</p>
<div className="mb-4 w-full">
<label className="text-neutral-700">
1 USD = 100 credits, 5 USD is a minimum top-up
</label>
<div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
<input
type="number"
name="displayName"
value={amount}
placeholder="Top-up amount in USD"
min="5"
step="1"
className="w-full"
onChange={(e) => setAmount(parseInt(e.target.value))}
/>
</div>
</div>
<Button
type="submit"
variant="default"
className="font-circular ml-auto"
onClick={() => requestTopUp(amount)}
>
Top-up
</Button>
</div>
{/* Right Column */}
<div>
<h2 className="text-lg">Manage Your Payment Methods</h2>
<br />
<p className="text-neutral-600">
You can manage your cards and see your payment history in the
billing portal.
</p>
<br />
<Button
type="submit"
variant="default"
className="font-circular ml-auto"
onClick={() => openBillingPortal()}
>
Open Portal
</Button>
</div>
</div>
<Button
type="submit"
variant="default"
className="font-circular mt-4 h-[50px] rounded-[35px] bg-neutral-800 px-6 py-3 text-base font-medium text-white transition-colors hover:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-100"
onClick={() => requestTopUp(amount)}
>
{"Top-up"}
</Button>
</div>
);
}

View File

@@ -92,6 +92,10 @@ export default class BackendAPI {
return this._request("POST", "/credits", { amount });
}
getUserPaymentPortalLink(): Promise<{ url: string }> {
return this._get("/credits/manage");
}
fulfillCheckout(): Promise<void> {
return this._request("PATCH", "/credits");
}