Tracking Usage in React Native
Building an iOS or Android app with React Native? You absolutely MUST use a backend proxy. If you ship your ss_live key inside your mobile binary, anyone can unpack it and steal your balance!
The "Secure Vibe" Architecture
text
[React Native App]
↓ (Secure HTTPS Call with User JWT)
[Your Backend (Node/NextJS)] <-- SS Key lives safely here
↓ (SettleSettle SDK)
[SettleSettle API]Step 1: Create the Endpoint in Your Backend
In your Next.js, Express, or NestJS backend, create a route handler:
typescript
// Next.js: app/api/user-action/route.ts
import { settle } from '@/lib/settle'
import { NextResponse } from 'next/server'
export async function POST(req: Request) {
const { userId, actionType } = await req.json()
// 1. Logically process the task (e.g. generate an image)
// 2. Trigger the usage event safely using the server-side SDK
settle.events.track({ userId, eventType: actionType })
return NextResponse.json({ success: true })
}Step 2: Consume in React Native
typescript
async function handleButtonPress() {
const response = await fetch('https://api.yourapp.com/api/user-action', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ userId: 'user_998877', actionType: 'MOBILE_AI_RUN' })
})
}