Onramp

import { checkout } from '@imtbl/sdk';
import { Environment } from '@imtbl/sdk/config';

const { Checkout, WidgetType, WidgetTheme, CommerceFlowType, CommerceEventType } = checkout;

const checkoutSDK = new Checkout({
  baseConfig: {
    environment: Environment.SANDBOX,
    publishableKey: 'YOUR_PUBLISHABLE_KEY',
  },
});

// Basic onramp flow - buy crypto with fiat
export async function openOnramp(elementId: string) {
  const widgets = await checkoutSDK.widgets({ config: { theme: WidgetTheme.DARK } });
  const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);

  widget.mount(elementId, { flow: CommerceFlowType.ONRAMP });

  widget.addListener(CommerceEventType.SUCCESS, (data) => {
    console.log('Onramp complete:', data);
    widget.unmount();
  });

  widget.addListener(CommerceEventType.FAILURE, (data) => {
    console.error('Onramp failed:', data);
    widget.unmount();
  });

  widget.addListener(CommerceEventType.CLOSE, () => {
    widget.unmount();
  });

  return widget;
}

// Onramp with pre-selected token and amount
export async function onrampWithAmount(
  elementId: string,
  options: {
    tokenAddress?: string;
    amount?: string;
  }
) {
  const widgets = await checkoutSDK.widgets({ config: { theme: WidgetTheme.DARK } });
  const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);

  widget.mount(elementId, {
    flow: CommerceFlowType.ONRAMP,
    tokenAddress: options.tokenAddress,
    amount: options.amount,
  });

  return widget;
}

1. User selects token and amount
    ↓
2. Enter payment details (first time only)
    ↓
3. KYC verification (if required for amount)
    ↓
4. Payment processed
    ↓
5. Tokens delivered to wallet