# Lovable Checkout

> Paste-in SolvaPay hosted checkout for Lovable-generated apps (Vite + React + TypeScript + shadcn/ui + Supabase). Backend is Supabase Edge Functions — no Node server to add. Use when the user says "lovable", "vite checkout", "shadcn checkout", "supabase edge checkout", "solvapay in lovable", "paste this into lovable", or "@preview". Pinned to the floating `@preview` tag and the SolvaPay dev backend (`https://api-dev.solvapay.com`). Not for production. Use `website-checkout` for Next.js / production web apps, or `sdk-integration` for general SDK wiring.

- Skill: `solvapay/lovable-checkout` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add solvapay/lovable-checkout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/solvapay/lovable-checkout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: solvapay (https://skillmd.com/u/solvapay)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/solvapay/lovable-checkout

---


# Lovable Checkout (preview)

Self-contained guide for wiring SolvaPay hosted checkout into a Lovable app. The whole guide is designed to be pasted into the Lovable chat to bias its agent toward a working integration on turn zero.

## Quick Start

1. Read [guide.md](guide.md) end-to-end before generating code. The guide owns environment setup, Supabase edge function templates, the `@preview` install commands, and the Lovable-specific guardrails.
2. Cross-reference [reference.md](reference.md) for the package + hook map.

## Guardrails

- **Never** put `SOLVAPAY_SECRET_KEY` in `.env`, `VITE_*`, `import.meta.env`, or any file the browser can reach. The secret lives **only** as a Supabase edge function secret.
- **Never** hand-roll `fetch` against `https://api-dev.solvapay.com` from the browser. All SolvaPay backend calls go through Supabase edge functions.
- **Always** install with the `@preview` tag: `@solvapay/react@preview`, `@solvapay/react-supabase@preview`. Never pin an exact preview version.
- **Always** set `SOLVAPAY_API_BASE_URL=https://api-dev.solvapay.com` as a Supabase edge function secret — production keys are rejected by api-dev.
- Not for production. The `@preview` tag is unstable by design.