User Agent

When your web application runs inside the Despia native runtime, the user agent string includes “despia” along with platform identifiers like “iphone”, “ipad”, or “android”. Check navigator.userAgent to detect this and conditionally render platform-specific features.

Installation

Bundle
CDN

npm install despia-native

pnpm add despia-native

yarn add despia-native

import despia from 'despia-native';

<script src="https://cdn.jsdelivr.net/npm/despia-native/index.min.js"></script>

<script type="module">
    import despia from 'https://cdn.jsdelivr.net/npm/despia-native/+esm'
</script>

How it works

The Despia runtime injects “despia” into the user agent string alongside the standard platform identifiers. A simple substring check tells you which environment your code is running in.

// Any Despia runtime
const isDespia = navigator.userAgent.toLowerCase().includes('despia')

// iOS only
const isDespiaIOS = isDespia && (
    navigator.userAgent.toLowerCase().includes('iphone') ||
    navigator.userAgent.toLowerCase().includes('ipad')
)

// Android only
const isDespiaAndroid = isDespia && navigator.userAgent.toLowerCase().includes('android')

Conditional payment flow

Show an in-app purchase button inside Despia and a web checkout flow in the browser. This is the standard pattern for hybrid apps that ship to both the App Store and the web, since native stores require their own billing for digital goods.

import { useState, useEffect } from 'react'
import despia from 'despia-native'

function CheckoutButton() {
    const [isDespia, setIsDespia] = useState(false)

    useEffect(() => {
        setIsDespia(navigator.userAgent.toLowerCase().includes('despia'))
    }, [])

    if (isDespia) {
        return (
            <button onClick={() => despia('iap://?productId=pro_monthly')}>
                Purchase in App
            </button>
        )
    }

    return (
        <button onClick={() => window.location.href = 'https://checkout.stripe.com/...'}>
            Purchase with Stripe
        </button>
    )
}

Platform-specific UI

Render different layouts or copy depending on which platform the user is on. Useful for store review compliance, where iOS and Android have different policy requirements around external links and payment language.

function App() {
    const userAgent = navigator.userAgent.toLowerCase()
    const isDespia = userAgent.includes('despia')
    const isDespiaIOS = isDespia && (userAgent.includes('iphone') || userAgent.includes('ipad'))
    const isDespiaAndroid = isDespia && userAgent.includes('android')

    return (
        <div>
            {isDespia && (
                <div className="banner">
                    Running natively on {isDespiaIOS ? 'iOS' : 'Android'}
                </div>
            )}

            {!isDespia && (
                <a href="/download">Get the app</a>
            )}
        </div>
    )
}

SSR safety

navigator is undefined during server-side rendering in frameworks like Next.js or Remix. Guard the check with a typeof test or run it inside useEffect so it executes on the client only.

const isDespia = typeof navigator !== 'undefined' &&
    navigator.userAgent.toLowerCase().includes('despia')

Resources

NPM Package

despia-native

Support

support@despia.com

Deployment

Best Practices

Local Ecosystem

Authentication

Payments

Analytics

Connectivity

Machine Learning

Wallets

Native Features

Roadblocks

Store Rejections

Platform Support

Installation

How it works

Conditional payment flow

Platform-specific UI

SSR safety

Resources

NPM Package

Support

​Installation

​How it works

​Conditional payment flow

​Platform-specific UI

​SSR safety

​Resources

NPM Package

Support

Installation

How it works

Conditional payment flow

Platform-specific UI

SSR safety

Resources