npm install @ramp-orchestrator/sdk
# or
yarn add @ramp-orchestrator/sdk
# or
pnpm add @ramp-orchestrator/sdk

import { RampWidget } from '@ramp-orchestrator/sdk';

const widget = new RampWidget({
  apiKey: 'your_api_key',
  projectId: 'your_project_id',
  externalUserId: 'user_123',
  containerId: 'widget-container',
});

widget.mount();

new RampWidget(config: RampWidgetConfig)

interface RampWidgetConfig {
  // Required
  apiKey: string;
  projectId: string;
  externalUserId: string;

  // Container (SDK mode)
  containerId?: string;

  // Mode
  mode?: 'buy' | 'sell';

  // Pre-fill options
  defaultCrypto?: string;
  defaultFiat?: string;
  defaultAmount?: string;
  walletAddress?: string;

  // Customization
  theme?: ThemeConfig;
  locale?: string;

  // Behavior
  closeOnComplete?: boolean;
  closeDelay?: number;
  animations?: boolean;

  // Currency restrictions
  allowedCryptoCurrencies?: string[];
  allowedFiatCurrencies?: string[];
}

widget.mount();

widget.unmount();

widget.refresh();

widget.setUser('new_user_456');

widget.setAmount('250.00');

widget.setCrypto('ETH');

widget.setFiat('EUR');

widget.setWallet('0x742d35Cc6634C0532925a3b844Bc9e7595f5bE21');

widget.goToStep('amount'); // or 'confirm', 'wallet', 'payment'

const state = widget.getState();
console.log(state);
// {
//   step: 'amount',
//   amount: '100',
//   crypto: 'ETH',
//   fiat: 'USD',
//   quote: { ... },
//   customer: { ... }
// }

widget.on('orderComplete', (order) => {
  console.log('Order completed:', order);
});

const handler = (order) => console.log(order);
widget.on('orderComplete', handler);
widget.off('orderComplete', handler);

widget.once('ready', () => {
  console.log('Widget is ready');
});

import { RampWidget, RampWidgetConfig, Order, Quote } from '@ramp-orchestrator/sdk';

const config: RampWidgetConfig = {
  apiKey: process.env.RAMP_API_KEY!,
  projectId: process.env.RAMP_PROJECT_ID!,
  externalUserId: userId,
  containerId: 'widget',
};

const widget = new RampWidget(config);

widget.on('orderComplete', (order: Order) => {
  console.log(`Order ${order.id} completed`);
});

widget.on('quoteGenerated', (quote: Quote) => {
  console.log(`Quote: ${quote.sourceAmount} ${quote.sourceCurrency} = ${quote.targetAmount} ${quote.targetCurrency}`);
});

<script src="https://cdn.yourdomain.com/sdk/ramp-widget.umd.js"></script>
<script>
  const widget = new RampOrchestrator.RampWidget({
    apiKey: 'your_api_key',
    projectId: 'your_project_id',
    externalUserId: 'user_123',
    containerId: 'widget-container',
  });

  widget.mount();
</script>

import { RampWidget, RampError } from '@ramp-orchestrator/sdk';

const widget = new RampWidget(config);

widget.on('error', (error: RampError) => {
  switch (error.code) {
    case 'INIT_FAILED':
      console.error('Widget failed to initialize');
      break;
    case 'NETWORK_ERROR':
      console.error('Network error - retrying...');
      widget.refresh();
      break;
    case 'SESSION_EXPIRED':
      console.error('Session expired');
      widget.refresh();
      break;
    case 'INVALID_CONFIG':
      console.error('Invalid configuration:', error.message);
      break;
    default:
      console.error('Unknown error:', error);
  }
});

import { RampWidget } from '@ramp-orchestrator/sdk';

class CryptoPurchaseManager {
  private widget: RampWidget | null = null;

  init(userId: string) {
    this.widget = new RampWidget({
      apiKey: process.env.RAMP_API_KEY,
      projectId: process.env.RAMP_PROJECT_ID,
      externalUserId: userId,
      containerId: 'ramp-widget',
      defaultCrypto: 'ETH',
    });

    this.setupEventHandlers();
    this.widget.mount();
  }

  private setupEventHandlers() {
    this.widget.on('ready', () => {
      console.log('Widget ready');
    });

    this.widget.on('quoteGenerated', (quote) => {
      analytics.track('Quote Generated', { amount: quote.sourceAmount });
    });

    this.widget.on('orderComplete', async (order) => {
      await this.handleOrderComplete(order);
    });

    this.widget.on('error', (error) => {
      errorReporter.capture(error);
    });
  }

  private async handleOrderComplete(order) {
    // Track conversion
    analytics.track('Purchase Complete', {
      orderId: order.id,
      amount: order.sourceAmount,
      crypto: order.targetCurrency,
    });

    // Update UI
    showSuccessMessage('Purchase complete!');
  }

  destroy() {
    this.widget?.unmount();
    this.widget = null;
  }
}