Integration Overview

Integration Approaches
Next Steps

Your frontend application orchestrates the complete purchase flow: user authentication, eligibility verification, and requesting purchase permits. There are two integration approaches depending on your architecture.

Integration Approaches

Frontend-only

Best for: SPAs without a backendAll authentication and API calls happen client-side using React hooks. Tokens are stored in browser storage.

Simpler to implement

Uses @echoxyz/sonar-react hooks

Example app →

Frontend with Backend

Best for: Apps that already have a backendOAuth tokens are stored server-side and all Sonar API requests are proxied through your backend.

More secure (tokens never exposed to browser)

Automatic token refresh on server

Example app →

Next Steps

Once your frontend integration is complete, see the Custom Contracts guide if you need to build your own sale contract with permit validation.

Configuration Options Frontend-only

⌘I

Frontend-only

Frontend with Backend

Planning Your Sale

Integration Guides

Technical Features

Contract Reference

JS Reference

HTTP Reference

Integration Approaches

Next Steps

Planning Your Sale

Integration Guides

Technical Features

Contract Reference

JS Reference

HTTP Reference

​Integration Approaches

Frontend-only

Frontend with Backend

​Next Steps

Integration Approaches

Next Steps