SettleSettle | Developer Hub

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' })
  })
}