Skip to main content
The following only apply to @stytch/vanilla-js v5 and below. We recommend upgrading to v6 to receive new features by following the upgrade guide.
This page documents old APIs used in @stytch/vanilla-js v5. APIs not described on this page are unchanged in v6.

​
StytchB2BUIClient and StytchB2BHeadlessClient

If you are using Stytch UI, use StytchB2BUIClient, otherwise use StytchB2BHeadlessClient from @stytch/vanilla-js/b2b/headless for smaller bundle size. 
// For Stytch UI
import { StytchB2BUIClient } from '@stytch/vanilla-js/b2b';

// Without Stytch UI
import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';

​
Imports

These imports are only available in @stytch/vanilla-js/b2b in v5 and should be imported separately from @stytch/react or @stytch/nextjs.
  • B2BProducts
  • Types for most SDK methods and configuration

​
Mounting

If you are using React or Next.js, pass the StytchB2BUIClient into <StytchB2BProvider>. 
<StytchB2BProvider stytch={stytch}>
  // Your app here
</StytchB2BProvider>
If you are only using @stytch/vanilla-js, use the mount functions on the client. elementId is a selector matching an element on the page to mount Stytch UI to. Make sure this element is included in your HTML file before the script tag containing your Stytch configuration. 
// Stytch login
stytch.mount({
  elementId: '#stytch-sdk',
  styles,
  callbacks,
  config,
  strings,
});

// Stytch identity provider
stytch.mountIdentityProvider({
  elementId: '#stytch-idp-container',
  styles,
});

​
Styles

Stytch UI v5 login component The style object allows you to customize the look of the SDK. You can specify some of them or none at all. We’ll use our defaults for the ones you don’t specify.
​
fontFamily
string
The font family that will apply to all text in the SDK.
​
hideHeaderText
boolean
When this value is true, the title and description text will not show in the SDK.
​
container
object
The configuration object for the Stytch UI container.
​
colors
object
The configuration object for colors used in the Stytch UI components.
​
buttons
object
The configuration object for buttons in the Stytch UI component.
​
inputs
object
The configuration object for text inputs in the Stytch UI components.
The configuration object for your custom logo.