> ## Documentation Index
> Fetch the complete documentation index at: https://docs.leen.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# OnRamp props reference

> Every configuration option accepted by Leen's OnRamp component, with types and defaults, across the React, Angular and Vue wrappers.

Every OnRamp wrapper accepts the same configuration. Only the names of the two
callbacks differ, because each follows its framework's conventions.

Defaults below are OnRamp's own defaults, so omitting a prop and passing its
default value are equivalent.

## Required

| Prop    | Type     | Description                                                                                                                                                                     |
| ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `token` | `string` | Connection invite token from the [Create Connection Invite Token API](/api-reference/onramp/create-connection-invite-token). Scoped to a single vendor and a single connection. |

## Callbacks

These are the only props whose shape differs between frameworks.

| React                   | Angular                       | Vue                             | Payload                           |
| ----------------------- | ----------------------------- | ------------------------------- | --------------------------------- |
| `setLeenOnRampResponse` | `(leenOnRampResponse)` output | `@response` event               | `LeenOnRampResponse \| undefined` |
| `setShowLeenOnRamp`     | `(showLeenOnRamp)` output     | `v-model:show` / `@update:show` | `boolean`                         |

## Appearance

| Prop            | Type                           | Default                  | Description                                                                      |
| --------------- | ------------------------------ | ------------------------ | -------------------------------------------------------------------------------- |
| `modalSize`     | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'`                   | Modal width.                                                                     |
| `primaryColor`  | `string`                       | `'#B5FF56'`              | Accent color for primary buttons. Any CSS color.                                 |
| `logoUrl`       | `string`                       | Leen's logo              | Logo shown in the modal header.                                                  |
| `darkMode`      | `boolean`                      | `false`                  | Switch to the dark theme.                                                        |
| `darkModeColor` | `DarkModeColorOptions`         | Leen's dark palette      | Dark theme color overrides. Only applied when `darkMode` is `true`.              |
| `fontFamily`    | `string`                       | `'Inter'`                | Font family name. Pair with `fontUrl` unless your page already loads the font.   |
| `fontUrl`       | `string`                       | Inter, from Google Fonts | Stylesheet URL for the font — what you would normally add to your document head. |
| `fontSizes`     | `OnRampFontSizeOptions`        | see below                | Per-element font sizes.                                                          |
| `textOverrides` | `TextOverrides`                | —                        | Override button copy.                                                            |

<Info>
  `darkModeColor` is singular. Earlier versions of this guide showed
  `darkModeColors`, which OnRamp ignores.
</Info>

## Behaviour

| Prop                | Type             | Default        | Description                                                                                                                               |
| ------------------- | ---------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `requireIdentifier` | `boolean`        | `false`        | Require the user to supply a connection identifier.                                                                                       |
| `docsUrlOverrides`  | `DocsUrlMapping` | Leen's docs    | Per-vendor documentation links, keyed by vendor.                                                                                          |
| `containerId`       | `string`         | auto-generated | Id of the element OnRamp mounts into. The Angular and Vue wrappers generate a unique id per instance, so several can coexist on one page. |
| `config`            | `LeenConfig`     | —              | Passed through to OnRamp. Use `region` here for non-US Leen regions.                                                                      |

## Object shapes

```typescript theme={null}
interface OnRampFontSizeOptions {
  headerSize?: string; // default '1.25rem'
  bodySize?: string;   // default '1rem'
  buttonSize?: string; // default '0.875rem'
}

// Only applied when darkMode is true.
interface DarkModeColorOptions {
  primary?: string;   // hex
  secondary?: string; // hex
  border?: string;    // hex
}

interface TextOverrides {
  button?: {
    create?: string; // copy for the create-connection button
    update?: string; // copy for the update-connection button
  };
}

// Keyed by vendor, e.g. { SNYK: 'https://link.to/docs/snyk' }
type DocsUrlMapping = Record<string, string>;

interface LeenConfig {
  region?: string; // e.g. 'eu-c1'. Defaults to Leen's US region.
  [key: string]: unknown;
}
```

Font sizes accept any standard CSS unit (`px`, `rem`, `em`, …).

## Response shape

```typescript theme={null}
interface LeenOnRampResponse {
  data: ConnectionResponse;
  httpStatus: number;
  message: string;
}

interface ConnectionResponse {
  id: string;
  vendor: string;
  refresh_interval_secs: number;
  timeout_secs: number;
  organization_id: string;
  is_active: boolean;
  oauth2_authorize_url?: string;
  identifier: string;
}
```

## Handling connection errors

OnRamp dispatches a `leenConnectionError` event on `window` when connection
creation fails. No wrapper surfaces this as a framework-level event, so listen for
it directly.

<CodeGroup>
  ```typescript React theme={null}
  useEffect(() => {
    const onError = (event: Event) => console.error(event);
    window.addEventListener('leenConnectionError', onError);
    return () => window.removeEventListener('leenConnectionError', onError);
  }, []);
  ```

  ```typescript Angular theme={null}
  ngOnInit() {
    window.addEventListener('leenConnectionError', this.onError);
  }

  ngOnDestroy() {
    window.removeEventListener('leenConnectionError', this.onError);
  }

  private onError = (event: Event) => console.error(event);
  ```

  ```typescript Vue theme={null}
  const onError = (event: Event) => console.error(event);

  onMounted(() => window.addEventListener('leenConnectionError', onError));
  onBeforeUnmount(() =>
    window.removeEventListener('leenConnectionError', onError),
  );
  ```
</CodeGroup>

## Pinning a bundle version

The Angular and Vue wrappers accept a `bundleVersion` prop controlling which
OnRamp bundle they load: `"dev"` for the development bundle, or a version string
to pin a specific release. It defaults to `latest`.