Integrate SDK

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

NPM package

npm install @revolut/revolut-id

yarn add @revolut/revolut-id

pnpm add @revolut/revolut-id

bun add @revolut/revolut-id

or CDN script

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

<!-- Production -->
<script src="https://sso.revolut.com/static/js/revolut-id-sdk.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/revolut-id'

const revolutId = await RevolutIdLoader({ mode: 'production' }) // mode is optional, defaults to 'production'; use 'sandbox' for testing

const { mountButton } = revolutId.initialise({
  clientId: 'your-client-id',
  redirectUri: 'https://your-app.com/callback',
  scope: ['profile'], // 'openid' scope is included by default
  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/revolut-id'

const revolutId = await RevolutIdLoader({ mode: 'production' }) // mode is optional, defaults to 'production'; use 'sandbox' for testing

const { mountButton } = revolutId.initialise({
  clientId: 'your-client-id',
  redirectUri: 'https://your-app.com/callback',
  scope: ['profile'], // 'openid' scope is included by default
  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.revolutId will be available globally and you can use it directly without importing RevolutIdLoader.

Unmounting

Unmount button if needed.

buttonClient.unmount()

API reference

The Revolut ID Web SDK provides the RevolutId interface, which is returned by RevolutIdLoader (NPM installation) or available in the global window scope via window.revolut.revolutId (CDN script).

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 (`openid` included by default)	Yes
`displayMode`	`popup \| redirect`	Authentication display mode	No (defaults to `redirect`)
`mode`	`production \| sandbox`	Environment mode	No (defaults to 'production')
`uiColorScheme`	`light \| dark \| system`	UI theme preference	No
`uiBackground`	`blue \| deep-blue \| green \| orange \| teal \| purple \| holo \| minimal`	Authentication page background	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	`sign_in`	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​