Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ cli/dist/

# Frontend build output
samples/frontend/dist/
samples/typescript/public/

# Figma design tokens (local reference only)
mintlify/tokens/
Expand Down
8 changes: 5 additions & 3 deletions samples/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ Sample applications demonstrating the Grid API payout flow — creating a custom

```
samples/
├── frontend/ # Shared React frontend (works with any backend)
└── kotlin/ # Kotlin (Ktor) backend using the Grid Kotlin SDK
├── frontend/ # Shared React frontend (works with any backend)
├── kotlin/ # Kotlin (Ktor) backend using the Grid Kotlin SDK
└── typescript/ # TypeScript (Express) backend using the Grid TypeScript SDK
```

## Quick Start

See the [Kotlin backend README](kotlin/README.md) for setup instructions.
- [Kotlin backend](kotlin/README.md)
- [TypeScript backend](typescript/README.md)

## Adding a New Language Backend

Expand Down
3 changes: 3 additions & 0 deletions samples/typescript/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Grid API Credentials (from https://app.lightspark.com)
GRID_API_TOKEN_ID=your_api_token_id
GRID_API_CLIENT_SECRET=your_api_client_secret
111 changes: 111 additions & 0 deletions samples/typescript/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
# Grid API TypeScript Sample

A sample application demonstrating the Grid API payout flow using the [Grid TypeScript SDK](https://www.npmjs.com/package/@lightsparkdev/grid).

## What It Does

This sample walks through a complete payout:

1. **Create Customer** — Register an individual customer on the platform
2. **Create External Account** — Link a USD bank account to the customer
3. **Create Quote** — Get a real-time quote for USDC to USD conversion
4. **Sandbox Fund** — Simulate funding to complete the transaction

Webhook events are streamed to the frontend in real time via Server-Sent Events (SSE).

## Prerequisites

- **Node.js 18+**
- **Grid API sandbox credentials** (Reach out to your contact at lightspark or sales@lightspark.com to get them)

## Setup

1. Copy the environment template:

```bash
cp .env.example .env
```

2. Fill in your credentials in `.env`:

```bash
GRID_API_TOKEN_ID=your_api_token_id
GRID_API_CLIENT_SECRET=your_api_client_secret
```

## Running

### Option 1: Single command (recommended)

Builds the frontend, then starts the server:

```bash
cd samples/typescript
npm install
npm start
```

Open [http://localhost:8080](http://localhost:8080) in your browser.

### Option 2: Separate dev servers (for frontend development)

If you're iterating on the frontend, run them separately for hot reload:

**Terminal 1 — Backend (port 8080):**

```bash
cd samples/typescript
npm install
npm run dev
```

**Terminal 2 — Frontend (port 5173):**

```bash
cd samples/frontend
npm install
npm run dev
```

Open [http://localhost:5173](http://localhost:5173) in your browser. The Vite dev server proxies `/api` requests to the backend.

## Webhook Setup

To receive webhooks locally, expose your backend with a tunnel:

```bash
ngrok http 8080
```

Then configure the webhook URL in your [Grid dashboard](https://app.lightspark.com) as:

```
https://<your-ngrok-id>.ngrok.io/api/webhooks
```

## Architecture

```
Browser (React) → Vite Dev Server (:5173) → Express Backend (:8080) → Grid API
proxy /api Grid TypeScript SDK
Grid Webhooks (POST)
SSE stream → Browser
```

The backend is a thin proxy — it holds your API credentials and translates JSON requests into Grid SDK calls. The frontend handles the step-by-step wizard flow.

## Sample Requests

Grid API calls are in `src/routes/`:

| File | Description |
|------|-------------|
| [`customers.ts`](src/routes/customers.ts) | Create a customer via `client.customers.create()` |
| [`externalAccounts.ts`](src/routes/externalAccounts.ts) | Link a bank account via `client.customers.externalAccounts.create()` |
| [`quotes.ts`](src/routes/quotes.ts) | Create and execute a quote via `client.quotes.create()` / `client.quotes.execute()` |
| [`sandbox.ts`](src/routes/sandbox.ts) | Simulate funding via `client.sandbox.sendFunds()` |
| [`webhooks.ts`](src/routes/webhooks.ts) | Receive incoming webhooks |

Client initialization is in [`gridClient.ts`](src/gridClient.ts).
Loading