Shipgrade Checkout

Grade your product page, then let a PayPal AI agent build the checkout you're missing. You approve every plan, and it goes live in the PayPal sandbox with real buttons.

Comment

Existing project, significantly upgraded during this hackathon

Shipgrade existed before this hackathon: I launched it in June 2026 for World Product Day as a six-dimension landing page grader. Everything PayPal, everything agentic, and the entire UI and UX were built during the submission period (Oct 4 to Nov 2, 2026).

  • Before: one page. Paste a URL, get six scores and an LLM verdict. No payments, no pricing analysis, no agent, no tests. Still live at https://shipgrade.vercel.app so you can compare.
  • After: a 7th Monetization & Checkout grade, a PayPal checkout agent with a human approval gate, a full PayPal sandbox integration (Agent Toolkit, Orders v2, Subscriptions, Invoicing, Webhooks, JS SDK v6), and a completely remapped UI and UX.
  • Size of the change: 26 commits, 71 files, +9,709 / -585 lines, 0 to 85 tests. The labelled BEFORE / AFTER image in the gallery shows the old and new app side by side.

The full breakdown is at the end, under "What existed before, and what I built during the hackathon".

Inspiration

I launched Shipgrade for World Product Day as a brutally honest grader for product landing pages. After a few hundred grades, one pattern kept showing up: pages that were clear, pretty, and full of social proof still lost the sale at the very end. The price was hidden behind "Contact sales", the plan button went to a sign-up wall, or there was simply no way to pay.

Every grader I know stops at the diagnosis. It tells you "add a checkout" and leaves you with a weekend of docs. I wanted the report to end with a working checkout instead of a to-do item, and the PayPal Agent Toolkit made that possible: an agent can create real products, plans, and orders, as long as a human stays in control of the money.

What it does

Shipgrade turns a product URL into a working PayPal checkout in three steps.

  1. Grade. Paste a URL. Shipgrade scores seven dimensions in a few seconds. The 7th, Monetization & Checkout (added during this hackathon), finds the pricing (on the page or by following a pricing link), extracts every tier, and checks whether a ready buyer can actually pay: payment providers, billing model, annual option, trials, Pay Later, trust signals near the price, forced sign-up.
  2. Approve the agent's catalog. The checkout agent drafts a PayPal catalog from the prices it found. The LLM can rename tiers, write descriptions, and suggest annual plans, but it cannot invent or change a price. Contact-sales tiers stay off PayPal. You tick exactly what gets created.
  3. Live PayPal checkout. After you approve, the agent calls the PayPal Agent Toolkit (create_product, create_subscription_plan, create_order) in the sandbox. A live timeline shows every tool call, who made it (the AI agent or the rule engine), and the real sandbox ID it returned. You then get:
    • a before and after view of your pricing section, where the "after" is a live page with real PayPal JS SDK v6 buttons that a buyer can pay with right now,
    • copyable v6 drop-in code wired to your new plan IDs,
    • an optional draft PayPal invoice for the top copy fixes, for freelancers who want to bill a client for the work.

Shipgrade also eats its own cooking: the paid Deep Audit ($9 one-time, Orders v2 with server-side capture) and Shipgrade Watch ($19/month, Subscriptions) are sold through PayPal on the same page, with signature-verified webhooks.

Try it: open https://shipgrade-checkout.vercel.app/?demo=linear.app, review the drafted plans, then click Approve. Any sandbox personal account can pay on the preview page.

How we built it

  • Next.js 16 (App Router), React 19, TypeScript, Tailwind v4, deployed on Vercel. The grader is a server route that fetches the page, parses it with Cheerio, and runs weighted rule scoring, with an LLM verdict on top.
  • PayPal Agent Toolkit 1.11 (OpenAI tool-calling flavor) supplies the tool schemas and executes the calls. I compact the schemas (first sentence of each description, no nested descriptions) so a full run fits a free-tier LLM.
  • A guarded agent loop. Every tool call is checked against the approved catalog before it reaches PayPal: amounts, currency, interval, and payment_preferences must match, and anything else is rejected and reported back to the model. If the model stops early or hits a rate limit, a deterministic rule engine creates whatever is still missing, so the catalog is always complete and the UI tells you exactly which calls were made by whom.
  • Groq (OpenAI-compatible) runs the LLM. openai/gpt-oss-120b writes the verdict and qwen/qwen3.8-27b drives the agent, because it emits parallel tool calls: turn one creates the product, turn two creates every plan at once. A full run uses about 3,000 tokens.
  • PayPal REST in the sandbox: Catalog Products, Billing Plans and Subscriptions, Orders v2 with server-side capture and amount checks, Invoicing v2 drafts, and Webhooks with verify-webhook-signature.
  • PayPal JS SDK v6 on the preview page: createPayPalSubscriptionPaymentSession for plans and one-time payment sessions for orders, with every result verified on the server.
  • HMAC-signed preview tokens so the public preview page can only render catalogs the agent actually created.
  • Vitest (85 tests with PayPal mocked), plus scripted headless Playwright runs that grade, provision, and pay against the real sandbox.

Challenges we ran into

  • Free-tier token limits. Groq's free tier allows 8,000 tokens per minute. My first agent loop used most of that in a single run. I cut the tool schemas from 4.5k to 3.1k characters, told the model to work in exactly two turns, dropped the closing summary turn, and added a short "still missing" nudge instead of a retry. One run now costs about 3k tokens.
  • One tool call per turn. The gpt-oss models made one call per turn even with parallel_tool_calls, so five calls meant five round trips. Switching the agent to Qwen made the run finish in two turns and about ten seconds.
  • Schemas that say "optional" when PayPal says "required". The toolkit marks payment_preferences as optional, but PayPal rejects plans without it. The guard now requires it.
  • Errors that look like success. The toolkit returns PayPal errors as { ok: false } instead of throwing, and create_invoice returns only a self link. I had to read both carefully so a failed draft never shows up as a success.
  • SDK v6 naming. The live sandbox SDK exposes createPayPalSubscriptionPaymentSession; an older name I found in examples does not exist. I verified it against the loaded SDK and removed the guess.

Accomplishments that we're proud of

  • On the public demo, the AI agent makes every toolkit call itself in about ten seconds, and the guard has never let a wrong price through.
  • The whole loop is real: a sandbox buyer subscribes on the agent-built page, the server verifies the subscription as ACTIVE, and PayPal's signed BILLING.SUBSCRIPTION.ACTIVATED webhook lands on the public URL seconds later.
  • Human approval is a real gate, not a checkbox: nothing touches PayPal until you click Approve, and the agent can only create exactly what you approved.
  • It degrades gracefully. No LLM key: the rule engine does everything. Rate limited: the rule engine finishes the job and says so. No PayPal keys: every panel shows a clear "not configured" state.

What we learned

  • Agents get trustworthy when they are boxed in. The most valuable code in this project is the guard, not the prompt.
  • Small models are fine for tool use if you give them a checklist and a short turn budget. Parallel tool calls matter more than model size.
  • Verify everything server side. The browser says "approved"; the server asks PayPal and checks the amount, the plan, and the custom ID.
  • Webhooks are the source of truth, and signature verification takes one call to verify-webhook-signature, so there is no excuse to skip it.

What's next for Shipgrade Checkout

  • Persist catalogs, unlocks, and webhook events (Upstash Redis).
  • Deliver the Deep Audit: a multi-page crawl with the full rewrite pack.
  • Make Watch real: a weekly re-grade cron that emails you when your score or checkout slips.
  • Send the fix-it invoice, not just draft it, and add Pay Later messaging to the generated pricing page.
  • A "connect your PayPal" flow so the agent provisions into the user's own account instead of the demo sandbox.

What existed before, and what I built during the hackathon

Before (baseline). Commit 671c04c (June 16, 2026), branch main, still deployed at https://shipgrade.vercel.app. A single page: paste a URL, get six scores (value prop, audience, differentiation, CTA, trust, craft) and an optional LLM verdict. No payments, no pricing analysis, no agent, no tests.

Built Oct 4 to Nov 2, 2026 on branch paypal-checkout: 26 commits, 71 files changed, +9,709 / -585 lines. Every commit: https://github.com/StarKnightt/shipgrade/compare/671c04c...paypal-checkout

  1. New grade: Monetization & Checkout. Pricing discovery (on the page or via its pricing link), tier extraction, payment provider, billing model, Pay Later and sign-up wall detection, scoring calibrated on real pricing pages, and fixes.
  2. New: the PayPal checkout agent. Drafts a PayPal catalog from the real prices, waits for human approval, then calls the PayPal Agent Toolkit. It includes the guard that checks every tool call against the approved catalog, the rule-engine fallback, dry-run mode, and Groq support with the 3k-token budget work.
  3. New: PayPal end to end. Agent Toolkit, Catalog Products, Subscriptions, Orders v2 with server-side capture, Invoicing drafts, signature-verified webhooks, and JS SDK v6 buttons on a public preview page with HMAC-signed tokens. Shipgrade also sells its own Deep Audit and Watch through PayPal.
  4. Complete UI and UX remap. Not a reskin: the product flow and every screen were rebuilt.
    • New flow: the one-page grader became a 3-step journey (Grade, Approve, Live checkout) with a persistent stepper and a one-click demo run.
    • New screens: catalog approval, a live timeline of every PayPal toolkit call with its sandbox ID and who made it (AI agent or rules), before and after pricing in browser frames, the v6 code panel, the invoice draft, Shipgrade's own upgrade panel, and the public /preview checkout page.
    • New design system: the cream and serif theme (Fraunces, red-pen stamps, rotated labels) was replaced by an ink and highlighter system: Cabinet Grotesk and Switzer, Geist Mono for scores, IDs and prices, and one highlighter yellow that matches the PayPal button. The icon set moved to Hugeicons.
    • Redesigned report card: a big letter grade over a 0 to 100 band, one strip of seven scores with tick rulers, and a receipt-style pricing readout.
    • New landing page: left-aligned hero with a real screenshot of an agent run, a statement section, and a footer.
    • Motion and accessibility: scores count up as they scroll into view, the grade wipes in, the hero highlighter draws in, and a shimmer runs while PayPal is called. All of it turns off under prefers-reduced-motion. Every text pair passes WCAG AA, and there is a mobile layout.
  5. Engineering: 85 Vitest tests (previously none), MIT license, a sandbox setup script, and a separate Vercel project (https://shipgrade-checkout.vercel.app), so judges see only the hackathon build.

Built With

  • cheerio
  • groq
  • next.js
  • node.js
  • openai-api
  • paypal
  • paypal-agent-toolkit
  • paypal-js-sdk-v6
  • paypal-orders-v2
  • paypal-rest-api
  • paypal-subscriptions
  • paypal-webhooks
  • playwright
  • qwen
  • react
  • tailwindcss
  • typescript
  • vercel
  • vitest
Share this project:

Updates

Submission history