Vite SPA integration

A complete, runnable Vite SPA example lives at easy-sdk/examples/react. This page is a guided tour — it points to the most-relevant files in that example so you can see the SDK wired into a real project, not just isolated snippets.

Source code

Repository: itseasyco/easy-sdk
Path: examples/react

What this example covers

Mounting EasyProvider in main.tsx and reading API config from Vite env vars.
Using useEasy() from inside form components.
Standalone customer creation (createCustomer).
Saving a card or bank account against an existing customer (createPaymentInstrument) using both the combined CardElement and the TextElement pair for ACH.
One-off transfers against a saved instrument (createTransfer).
An end-to-end product → cart → checkout flow that lists products with getProducts, builds a line_items payload, and runs checkout with customer_creation: true.
TanStack Form + Zod for client-side validation, shadcn-style UI primitives for the visual layer.

Key files

File	What it shows
`src/main.tsx`	`EasyProvider` mounted at the root with `apiKey` from `VITE_EASY_API_KEY`.
`src/App.tsx`	Form picker that swaps in each demo component. Good entry point for reading top-down.
`src/components/CreateCustomerForm.tsx`	Minimal `useEasy().createCustomer` flow with validation.
`src/components/CreateInstrumentForm.tsx`	`CardElement` and `TextElement` refs passed into `createPaymentInstrument`.
`src/components/CreateTransferForm.tsx`	Charging a saved instrument with `createTransfer`.
`src/components/CheckoutForm.tsx`	Full product browse → cart → `checkout({ customer_creation: true, line_items, source })`.

Run it locally

git clone https://github.com/itseasyco/easy-sdk
cd easy-sdk
pnpm install
pnpm --filter @easylabs/common build
pnpm --filter @easylabs/react build

cd examples/react
cp .env.example .env  # then fill in VITE_EASY_API_KEY
pnpm dev

Open http://localhost:5173. You can use any sk_test_… key from the Easy Labs dashboard; it will route to the sandbox API automatically.

Adapting it

Drop the form picker. App.tsx is just a router for the demos. Lift any single component (e.g. CheckoutForm) into your own app.
Replace TanStack Form. The SDK doesn't care which form library you use — react-hook-form, Formik, or hand-rolled state all work.
Swap the UI kit. Components depend on shadcn-style primitives in src/components/ui/*. Replace those with your own design system; the SDK code is in the useEasy() calls and element refs, not the styling.
Move tokenization to a separate step. The example calls checkout (which tokenizes + charges in one shot). If you want to save the card before charging, swap to createPaymentInstrument followed by createTransfer.