Introduction
The fastest way to ship a branded Partner API front end is to clone the example app that already speaks OAuth, demo/real wallets, charts, contracts, and webhooks. Reskin it, point it at your sandbox client, then deploy the same tree from GitHub to Vercel.
The example lives in this repo at packages/partner-example. It is a Vite React app plus same-origin /api/oauth/start and /api/oauth/token handlers so CLIENT_SECRET never reaches the browser.
Clone the repo
From GitHub, clone brian-kiplagat/indices and install from the monorepo root so the trading SDK resolves as a workspace package.
Clone and install
git clone https://github.com/brian-kiplagat/indices.git
cd indices
pnpm install
pnpm --filter @smartbet/trading-sdk build
cp packages/partner-example/.env.example packages/partner-example/.envIf your organization forks the repo, clone that fork instead. Keep the package path packages/partner-example unless you extract it into its own project.
Register redirect and env
In Referrals, open Apps and create a sandbox OAuth app (partner_test_*). Register the redirect URI exactly. Locally that is http://localhost:5174/callback. On Vercel it is https://<your-app>.vercel.app/callback.
Put these values in packages/partner-example/.env (local) and in the Vercel project env (Production + Preview). Never prefix CLIENT_SECRET with VITE_.
CLIENT_ID— sandbox or live OAuth client idCLIENT_SECRET— server-only; used by/api/oauth/tokenAPI_BASE_URL— Partner API origin, e.g.https://api.coinpes.comREDIRECT_URI— must match the registered URI character for characterOAUTH_SCOPE— includecontract:readandcontract:writeif you show or place timed contracts
Run locally
Dev server
pnpm --filter partner-example devOpen http://localhost:5174, connect a test Coinpes user, and place a demo contract. Confirm the wallet, chart ticks, and activity list before you change branding.
Reskin the UI
Keep the SDK calls and OAuth routes. Change look and copy in:
packages/partner-example/src/index.css— colors, type, layout tokenspackages/partner-example/public/ui— logos and icons (dark theme at the root, light theme underpublic/ui/light)- Header copy and product names in
src/App.tsxand the ticket/panels undersrc/components
Leave api/oauth/*.ts and PKCE in place. Those files exist so the secret stays on the server when you deploy.
Deploy from GitHub
In Vercel, import the GitHub repo. Set the project Root Directory to packages/partner-example. The package vercel.json already installs from the monorepo root, builds @smartbet/trading-sdk, then builds the Vite app.
- Connect the GitHub repo (or your fork) to Vercel.
- Root Directory:
packages/partner-example. - Add the same env vars as local, with
REDIRECT_URIset to the production callback URL. - Register that production callback on the OAuth client.
- Deploy. Connect from the live origin and complete one demo fill before you switch to a
partner_live_*client.
Preview deployments get their own origin. Either add each preview callback URI on the OAuth client, or restrict OAuth testing to Production until the URI list is stable.
Frequently asked questions
Where is the example app in the repo?
Can CLIENT_SECRET go in the Vite bundle?
What redirect URI should I register locally?
Related guides
6 MINUsing the Partner API
What the Partner API is for, how a user session works, and what still lives in the Referrals dashboard.
6 MINConnect users with OAuth
Let traders sign in or register on Coinpes with OAuth 2.0 and PKCE, then exchange the code on your server.
6 MINPlace trades from your app
List wallets, send idempotent CFD orders, and open timed contracts with a user access token.
5 MINStream prices and positions
Bootstrap the Partner WebSocket, stream quotes and positions, and reconnect after drops.
8 MINReceive webhook events
Register HTTPS endpoints in Referrals, verify HMAC signatures, Test a signed delivery, and process events once.
5 MINTest in sandbox
Use partner_test clients and demo accounts to finish OAuth, trades, sockets, and webhooks safely.
5 MINKeep credentials safe
Where secrets belong, which tokens to rotate, and how partner routes handle trader PII.
6 MINPartner API reference
Full Partner API reference: OAuth, trading routes, WebSocket, webhooks, and OpenAPI.