OnRamp props reference

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. 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.

darkModeColor is singular. Earlier versions of this guide showed darkModeColors, which OnRamp ignores.

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

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

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.

useEffect(() => {
  const onError = (event: Event) => console.error(event);
  window.addEventListener('leenConnectionError', onError);
  return () => window.removeEventListener('leenConnectionError', onError);
}, []);

ngOnInit() {
  window.addEventListener('leenConnectionError', this.onError);
}

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

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

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

onMounted(() => window.addEventListener('leenConnectionError', onError));
onBeforeUnmount(() =>
  window.removeEventListener('leenConnectionError', onError),
);

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.

Get Started

Integrations

OnRamp

Webhooks

Required

Callbacks

Appearance

Behaviour

Object shapes

Response shape

Handling connection errors

Pinning a bundle version

​Required

​Callbacks

​Appearance

​Behaviour

​Object shapes

​Response shape

​Handling connection errors

​Pinning a bundle version

Required

Callbacks

Appearance

Behaviour

Object shapes

Response shape

Handling connection errors

Pinning a bundle version