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: Majority of Connect embedded components are currently still in beta. Please contact us to request beta access.
Installation
Use npm
to install the Connect.js module:
npm install @stripe/connect-js
Documentation
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.
import { loadConnectAndInitialize } from "@stripe/connect-js";
const fetchClientSecret = async () => {
// Fetch the AccountSession client secret by making an API call to your service
};
const instance = loadConnectAndInitialize({
publishableKey: "{{pk test123}}",
fetchClientSecret: fetchClientSecret
});
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.
import "@stripe/connect-js";
loadConnectAndInitialize
without side effects
Importing 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:
import { loadConnectAndInitialize } from "@stripe/connect-js/pure";
// Connect.js will not be loaded until `loadConnect` is called
const instance = loadConnectAndInitialize({
publishableKey: "{{pk test123}}",
fetchClientSecret: fetchClientSecret
});