Building Payment Apps with Bolt.new and MoneyGraph
How to use Bolt.new (StackBlitz) with MoneyGraph SDK. Build and deploy payment applications directly in your browser.
Bolt.new (powered by StackBlitz) is a browser-based AI development environment. Build and deploy full-stack applications without leaving your browser—no local setup required.
Why Bolt.new + MoneyGraph?
| Bolt.new Feature | MoneyGraph Integration | Result |
|---|---|---|
| Instant Environment | Zero setup time | Start building immediately |
| AI-Assisted Coding | Claude integration | Compliant code generation |
| One-Click Deploy | Production hosting | Live apps in seconds |
| Package Management | npm install works | Full SDK available |
| Real-Time Preview | Instant feedback | See changes live |
Quick Setup
Step 1: Create Vite + React + TypeScript project in Bolt.new
Step 2: Add SDK to src/lib/moneygraph.ts (single-file distribution)
Step 3: Configure .env:
``
MONEYGRAPH_API_KEY=sk_test_your_key_here
``
Step 4: Initialize:
``typescript
import { MoneyGraph } from './lib/moneygraph';
const mg = new MoneyGraph({
apiKey: import.meta.env.MONEYGRAPH_API_KEY
});
``
Quick Start Prompt
Tell Bolt.new:
Create a payment app using MoneyGraph SDK with Vite + React + TypeScript.Setup: - npm install @moneygraph/sdk - Create src/lib/moneygraph.ts with SDK initialization - Add MONEYGRAPH_API_KEY to .env
Build these components:
- SendMoneyForm:
- - Amount input (USD)
- - Country dropdown (Nigeria, Kenya, Ghana)
- - Recipient details form
- - Real-time FX quote with countdown
- - "Send" button (checks KYC first)
- QuoteDisplay:
- - Shows exchange rate
- - Displays fees
- - Shows recipient amount
- - 2-minute countdown timer
- PayoutStatus:
- - Transaction ID
- - Status badge (pending/completed/failed)
- - Track payment button
Use server actions for all MoneyGraph API calls. Include loading states and error handling. ```
Bolt.new will generate a complete React payment app in your browser!
Server Actions Pattern
Create server actions for API calls:
// src/actions/payments.ts
'use server';
import { MoneyGraph } from '../lib/moneygraph';const mg = new MoneyGraph({ apiKey: process.env.MONEYGRAPH_API_KEY! });
export async function sendPayout(params) { // Check KYC first const status = await mg.customers.kyc.canPayout(params.customerId); if (!status.allowed) { return { success: false, error: 'Complete KYC verification first' }; }
// Use smart payout return mg.executeSmartPayout({ customer_id: params.customerId, from_currency: 'USD', to_currency: 'NGN', amount: params.amount, recipient: params.recipient, priority: 'cost', }); } ```
Deployment Tips
| Tip | Why |
|---|---|
| Use TypeScript | Better autocomplete with SDK types |
| Create services folder | Keep API logic separate from UI |
| Add loading states | API calls take 1-3 seconds |
| Test sandbox first | Always use `sk_test_*` during development |
| Handle quote expiry | Show countdown and auto-refresh |
Why Bolt.new Works for Fintech
Bolt.new's instant environment eliminates setup friction, letting you focus on payment logic instead of configuration. Combined with MoneyGraph's compliance-ready SDK, you can prototype and deploy fintech features faster than ever.
Next Steps:
- Bolt.new Platform - Start building in your browser
- MoneyGraph SDK Docs - Complete API reference
- React Integration Guide - React-specific patterns
Bolt.new + MoneyGraph = Production-ready payment apps in your browser.
Ready to Get Started?
Install MoneyGraph SDK and start building AI-native payment applications today