solvapay/lovable-checkout
skills/lovable-checkout/SKILL.md
Load when someone is adding SolvaPay to a Lovable app or Vite+Supabase project — especially when they want to install @solvapay/react-supabase @preview packages, paste checkout code into Lovable chat, wire Supabase edge function secrets, or use api-dev.solvapay.com. Also triggers for: keeping SOLVAPAY_SECRET_KEY out of VITE_ env vars, setting up SolvaPayProvider, or getting a paywall running on Lovable fast. This skill handles the full setup: @preview package install, edge function templates, provider wiring, and sandbox testing. Skip for Next.js projects, production solvapay.com deployments, MCP server setup, or general "which SolvaPay product" questions.
tools
Updated Jun 10, 2026
$ install --global
skillsauthnpx skillsauth add solvapay/skills lovable-checkoutInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 10, 2026, 5:49 AM103.9s8 files scanned
SKILL.md
- name:
- lovable-checkout
- description:
- >
- paywall running on Lovable fast. This skill handles the full setup:
- @preview package install,
- version:
- 1.0.0
- compatibility:
- >
Lovable Checkout (preview)
Paste-in SolvaPay hosted checkout for Lovable (Vite + shadcn/ui + Supabase Edge). Designed to paste reference content into Lovable chat on turn zero.
Guardrails
- Never put
SOLVAPAY_SECRET_KEYin.env,VITE_*, or browser-reachable files — Supabase edge secrets only. - Never hand-roll browser
fetchto SolvaPay API — all backend calls through edge functions. - Always install
@solvapay/react@previewand@solvapay/react-supabase@preview— never pin exact preview versions. - Always set
SOLVAPAY_API_BASE_URL=https://api-dev.solvapay.comas edge secret. - Not for production.
Full guardrails for paste-in: references/01-edge-and-secrets.md.
Gotchas
- Secret in
.envorVITE_*breaks security — edge secrets only (details:01-edge-and-secrets.md). - Pinning exact preview version breaks exports — use
@previewtag only. - Multiple GoTrueClient instances cause auth bugs — singleton pattern (details:
02-provider-and-routes.md). @solvapay/react/styles.cssmust import after./index.css(details:03-troubleshooting-and-sandbox.md).requireProductname must match Console product name exactly (details:03-troubleshooting-and-sandbox.md).- MCP App UI errors mean wrong skill — use
solvapay/sdk-integrationorsolvapay/create-mcp-app.
Mandatory read order
Read in order before generating code:
- references/GUIDE.md — index; then read the numbered files below
- references/01-edge-and-secrets.md
- references/02-provider-and-routes.md
- references/03-troubleshooting-and-sandbox.md
Load references/REFERENCE.md when adding billing UI beyond CheckoutLayout or when Stripe/CSP issues persist.
Paste-in tip: concatenate all three reference files into Lovable chat for turn-zero bias.
Integration procedure
- Read all reference files in mandatory read order.
- Install
@previewpackages via Deno one-liners in01-edge-and-secrets.md. - Create edge functions + Supabase secrets.
- Wire
SolvaPayProvider+ routes per02-provider-and-routes.md. - Gate content from server truth.
- Run verification loop.
Edge plan-validate-execute
- Plan: List edge functions + required secrets from templates in
01-edge-and-secrets.md. - Validate: Run
node scripts/check-import-map.mjs; confirm no secret inVITE_*/.env. - Execute: Deploy functions and wire provider.
Verification loop
- Complete edge setup and provider wiring.
- Sandbox redirect → return URL → access granted.
- On failure → consult troubleshooting table in
03-troubleshooting-and-sandbox.md→ fix → repeat until pass.
Handoff template
## Lovable checkout handoff
- **Edge functions:** [names]
- **Secrets set:** [list names, no values]
- **Routes:** [checkout / portal / gate]
- **Sandbox:** [redirect + return URL outcome]
- **Preview pin:** @preview (not production)
Scripts
| Script | Action | Purpose |
| --- | --- | --- |
| scripts/check-import-map.mjs | Run | Validate Deno import map for @preview packages |
Task progress
- [ ] Read GUIDE.md index → 01-edge-and-secrets → 02-provider-and-routes → 03-troubleshooting
- [ ] Run Deno install one-liners (@preview packages)
- [ ] Create edge functions from templates
- [ ] Set Supabase edge secrets
- [ ] Wire SolvaPayProvider + checkout/portal routes
- [ ] Gate premium content from server truth
- [ ] Run verification loop until pass
References
- Edge + secrets: references/01-edge-and-secrets.md
- Provider + routes: references/02-provider-and-routes.md
- Troubleshooting + sandbox: references/03-troubleshooting-and-sandbox.md
- Package map: references/REFERENCE.md
Related Skills
solvapay/website-checkout
tools
VerifiedTrustedCommunity
Use when building a checkout or upgrade flow on an existing website: user clicks subscribe or upgrade → server creates a SolvaPay session → browser redirects to SolvaPay's hosted payment page → returns to your site with access unlocked. Also use for adding a customer portal so subscribers can manage, upgrade, or cancel their plan after checkout. Covers Next.js fully; React without a server framework is partial. Skip for: embedding plan cards or billing dashboards, webhook processing, usage metering, Lovable or Vite+Supabase setups, or MCP tool paywalls.
SKILL.mdUpdated Jun 10, 2026
solvapay/sdk-integration
tools
VerifiedTrustedCommunity
Load when SolvaPay functionality needs to be coded into an app. Handles: billing UI (buttons, plan status, React components) in React dashboards, web apps, or MCP server UIs; paywalls, access gates, or usage limits on routes or handlers; SolvaPay fetch handler or webhook setup; SDK integration across Next.js, React, Express, Supabase edge functions, and MCP servers. Skip for greenfield MCP scaffolding, Lovable checkout, or redirect-only checkout with no SDK code.
SKILL.mdUpdated Jun 10, 2026
solvapay/create-mcp-app
tools
VerifiedTrustedCommunity
Use when the user is building a brand-new paid MCP server from zero — no existing server in play. The two entry points: (1) the user has an OpenAPI or Swagger spec they want converted into monetized MCP tools, or (2) they want to write the tools by hand on a fresh SolvaPay-wired scaffold. Also use for the `npm create solvapay` CLI command with `--type mcp`. This skill covers the full greenfield journey: spec parsing, tool authoring, Cloudflare Workers deployment, and SolvaPay paywall setup on a new codebase. Skip when the user already has a running MCP server and wants to add a paywall without rebuilding — use the existing-server skill. Skip for web checkout pages, Lovable flows, and SDK-only integrations.
SKILL.mdUpdated Jun 10, 2026
openclaw/taskflow
tools
VerifiedTrustedCommunity
Use when work should span one or more detached tasks but still behave like one job with a single owner context. TaskFlow is the durable flow substrate under authoring layers like Lobster, ACPX, plugins, or plain code. Keep conditional logic in the caller; use TaskFlow for flow identity, child-task linkage, waiting state, revision-checked mutations, and user-facing emergence.
357,764SKILL.mdUpdated Apr 10, 2026