Connect.js ES Module

The Connect.js library and its supporting API allows you to add connected account dashboard functionality to your website. This NPM package contains initialization logic for Connect embedded components along with related types.

Calling loadConnectAndInitialize always loads the latest version of Connect.js, regardless of which version of @stripe/connect-js you use. Updates for this package only impact tooling around the loadConnectAndInitialize helper itself and the TypeScript type definitions provided for Connect.js. Updates do not affect runtime availability of features of Connect.js.

The embedded onboarding component is generally available now. Please refer to our documentation for more information.

Note: Some Connect embedded components are currently still in preview. These can be viewed on our doc site, where you can also request preview access.

Installation

Use npm to install the Connect.js module:

1npm install @stripe/connect-js

Documentation

• Connect embedded components
• Quickstart guide

Usage

loadConnectAndInitialize

This synchronous function takes in a publishable key, a function to retrieve the client secret returned from the Account Session API, and other initialization parameters. It returns a StripeConnectInstance. If necessary, it will load Connect.js for you by inserting the Connect.js script tag.

1import { loadConnectAndInitialize } from "@stripe/connect-js";
2const fetchClientSecret = async () => {
3  // Fetch the AccountSession client secret by making an API call to your service
4};
5
6const instance = loadConnectAndInitialize({
7  publishableKey: "{{pk test123}}",
8  fetchClientSecret: fetchClientSecret,
9});

We’ve placed a random API key in this example. Replace it with your actual publishable API keys to test this code through your Connect account.

If you have deployed a Content Security Policy, make sure to include Connect.js in your directives.

Import as a side effect

Import @stripe/connect-js as a side effect in code that will be included throughout your site (e.g. your root module). This will make sure the Connect.js script tag is inserted immediately upon page load.

1import "@stripe/connect-js";

Importing loadConnectAndInitialize without side effects

If you would like to use loadConnectAndInitialize in your application, but defer loading the Connect.js script until loadConnectAndInitialize is first called, use the alternative @stripe/connect-js/pure import path:

1import { loadConnectAndInitialize } from "@stripe/connect-js/pure";
2
3// Connect.js will not be loaded until `loadConnect` is called
4const instance = loadConnectAndInitialize({
5  publishableKey: "{{pk test123}}",
6  fetchClientSecret: fetchClientSecret,
7});