Skip to main content
CursorOpen in Cursor
How it works: When your Lovable-generated web application runs inside the Despia native runtime on iOS or Android, the user agent string automatically includes “despia” along with platform identifiers like “iphone”, “ipad”, or “android”. Your JavaScript code can check navigator.userAgent to detect this and conditionally render platform-specific features, such as showing RevenueCat in-app purchase buttons when running natively in Despia, or Stripe checkout buttons when running in a standard web browser.

​
Installation

No installation required! The user agent string is automatically set by the browser/runtime environment.

​
Usage

​
1. Basic Platform Detection

// Detect if running in Despia
const isDespia = navigator.userAgent.toLowerCase().includes('despia');

// Detect iOS in Despia
const isDespiaIOS = isDespia && 
  (navigator.userAgent.toLowerCase().includes('iphone') || 
   navigator.userAgent.toLowerCase().includes('ipad'));

// Detect Android in Despia
const isDespiaAndroid = isDespia && 
  navigator.userAgent.toLowerCase().includes('android');

​
2. Conditional Feature Rendering

import { useState, useEffect } from 'react';

function CheckoutButton() {
  const [platform, setPlatform] = useState({
    isDespia: false,
    isIOS: false,
    isAndroid: false
  });

  useEffect(() => {
    const userAgent = navigator.userAgent.toLowerCase();
    const isDespia = userAgent.includes('despia');
    
    setPlatform({
      isDespia: isDespia,
      isIOS: isDespia && (userAgent.includes('iphone') || userAgent.includes('ipad')),
      isAndroid: isDespia && userAgent.includes('android')
    });
  }, []);

  // Show Stripe checkout for web, RevenueCat for native
  if (!platform.isDespia) {
    return (
      <button 
        className="bg-blue-600 text-white px-6 py-3 rounded-lg"
        onClick={() => {
          // Stripe checkout logic
          window.location.href = 'https://checkout.stripe.com/...';
        }}
      >
        Purchase with Stripe
      </button>
    );
  }

  // Show in-app purchase for Despia (iOS or Android)
  return (
    <button 
      className="bg-green-600 text-white px-6 py-3 rounded-lg"
      onClick={() => {
        // RevenueCat in-app purchase logic
        console.log('Trigger in-app purchase');
      }}
    >
      Purchase in App
    </button>
  );
}

​
3. Platform-Specific UI

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 className="p-4">
      <h1 className="text-2xl font-bold mb-4">My App</h1>
      
      {/* Platform indicator */}
      {isDespia && (
        <div className="mb-4 p-3 bg-blue-100 rounded">
          Running in Despia on {isDespiaIOS ? 'iOS' : 'Android'}
        </div>
      )}
      
      {/* Conditional payment button */}
      <CheckoutButton />
    </div>
  );
}

​
Resources

  • User Agent Check: navigator.userAgent.toLowerCase().includes('despia')
  • iOS Detection: Check for “iphone” or “ipad” in user agent
  • Android Detection: Check for “android” in user agent
  • Automatically available in all JavaScript environments
  • No external packages or configuration needed
For additional support or questions about platform detection, please contact our support team at support@despia.com