Integrate SDK

Revolut ID Web SDK is available for integration as NPM package with full TypeScript support or as simple CDN script. Choose your preferred installation method:

NPM package

npm install @revolut/id

yarn add @revolut/id

pnpm add @revolut/id

bun add @revolut/id

or CDN script

<!-- Sandbox -->
<script src="https://sandbox-sso.revolut.com/revolut-id.js"></script>

<!-- Production -->
<script src="https://sso.revolut.com/revolut-id.js"></script>

Integration

HTML container

Specify on your HTML page container for mounting Revolut ID button

<div id="revolut-id-button-container"></div>

Initialisation and mounting

Initialisation configuration and processing auth callback depends on selected display mode popup or redirect.

Authentication opens in a popup window, user stays on the original page.

import { RevolutIdLoader } from '@revolut/id'

const revolutId = await RevolutIdLoader({ mode: 'production' })

const { mountButton } = revolutId.initialise({
  clientId: 'your-client-id',
  redirectUri: 'https://your-app.com/callback',
  scope: ['openid', 'profile', 'email'],
  displayMode: 'popup',
  onAuthSuccess: ({ code, codeVerifier }) => {
    // Send to backend for token exchange
    console.log('Success:', { code, codeVerifier })
  },
})

const container = document.getElementById('revolut-id-button-container')

const buttonClient = mountButton(container, {
  kind: 'sign_up',
  size: 'large',
  variant: 'light-outlined',
  radius: 'round',
})

import { RevolutIdLoader } from '@revolut/id'

const revolutId = await RevolutIdLoader({ mode: 'production' })

const { mountButton } = revolutId.initialise({
  clientId: 'your-client-id',
  redirectUri: 'https://your-app.com/callback',
  scope: ['openid', 'profile', 'email'],
  displayMode: 'popup',
  onAuthSuccess: ({ code, codeVerifier }) => {
    // Send to backend for token exchange
    console.log('Success:', { code, codeVerifier })
  },
})

const container = document.getElementById('revolut-id-button-container')

const buttonClient = mountButton(container, {
  kind: 'sign_up',
  size: 'large',
  variant: 'light-outlined',
  radius: 'round',
})

If you're using the CDN script, window.revolut.id will be available globally and you can use it directly without importing RevolutIdLoader.

Unmounting

Unmount button if needed.

buttonClient.unmount()

API reference

Revolut ID Web SDK provide interface RevolutId that can be returned by RevolutIdLoader (NPM installation) or be available in global window scope via window.revolut.id.

export interface ButtonClient {
  mount: (container: HTMLElement, params?: ButtonStyle) => ButtonClient
  unmount: () => void
}

export interface RevolutId {
  initialise: (config: Config) => {
    mountButton: (container: HTMLElement, params?: ButtonStyle) => ButtonClient
  }

  processRedirectParams: () => SuccessResult | ErrorResult | null
}

export interface ButtonClient {
  mount: (container: HTMLElement, params?: ButtonStyle) => ButtonClient
  unmount: () => void
}

export interface RevolutId {
  initialise: (config: Config) => {
    mountButton: (container: HTMLElement, params?: ButtonStyle) => ButtonClient
  }

  processRedirectParams: () => SuccessResult | ErrorResult | null
}

Config - initialisation parameters (required)

Parameter	Type	Description	Required
`clientId`	`string`	Your Revolut application client ID	Yes
`redirectUri`	`string`	URI to redirect to after authentication	Yes
`scope`	`OpenIdScope[]`	Array of requested OpenID scopes	Yes
`displayMode`	`popup \| redirect`	Authentication display mode	No
`mode`	`production \| sandbox`	Environment mode	No (defaults to 'production')
`colorScheme`	`ColorScheme`	UI theme preference	No
`countryCodes`	`string[]`	Array of allowed country codes	No
`locale`	`string`	Language/locale code	No
`onAuthSuccess`	`(result: SuccessResult) => void`	Success callback function	Yes (popup mode only)
`onAuthFailure`	`(result: ErrorResult) => void`	Error callback function	No (popup mode only)

For complete configuration documentation and advanced options, see Config API reference.

ButtonStyle - button styling parameters (optional)

Parameter	Type	Description	Default	Required
`kind`	`continue \| sign_in \| sign_up \| verify \| icon`	Button text and purpose	`continue`	No
`size`	`large \| small`	Button size	`large`	No
`variant`	`dark \| light \| light-outlined`	Visual style	`dark`	No
`radius`	`none \| default \| round`	Corner rounding	`default`	No

For complete button styling documentation and usage examples, see ButtonStyle API reference.

Environment setup

The environment you use must match your client environment configuration.

Use production mode with your production client ID for live applications
Use sandbox mode with your sandbox client ID for development and testing

See environment configuration for more details.

Next steps

Learn how to exchange code for user ID token - code exchange.

NPM package​

or CDN script​

Integration​

HTML container​

Initialisation and mounting​

Unmounting​

API reference​

Config - initialisation parameters (required)​

ButtonStyle - button styling parameters (optional)​

Next steps​