# Integrate with Connect embedded components # Integrate with Connect embedded components > To create an account session, you can use the Stripe SDKs: > > - [Ruby](https://github.com/stripe/stripe-ruby) `>=15.4.0` - [Python](https://github.com/stripe/stripe-python) `>=12.4.0` - [PHP](https://github.com/stripe/stripe-php) `>=17.5.0` - [Node](https://github.com/stripe/stripe-node) `>=18.4.0` - [.NET](https://github.com/stripe/stripe-dotnet) `>=48.4.0` - [Java](https://github.com/stripe/stripe-java) `>=29.4.0` - [Go](https://github.com/stripe/stripe-go) `>=82.4.0` Build a full, working integration using [Connect embedded components](https://docs.stripe.com/connect/get-started-connect-embedded-components.md). Use Connect embedded components to add connected account dashboard functionality to your website in minutes. These libraries and their supporting API help you to get up and running with almost no code, giving your users access to Stripe products directly in your dashboard. // This is a placeholder - it should be replaced with your secret API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. 'sk_INSERT_YOUR_SECRET_KEY', app.post('/account_session', async (req, res) => { try { const accountSession = await stripe.accountSessions.create({ account: "{{CONNECTED_ACCOUNT_ID}}", components: { payments: { enabled: true, features: { refund_management: true, dispute_management: true, capture_payments: true, } } } }); res.json({ client_secret: accountSession.client_secret, }); } catch (error) { console.error('An error occurred when calling the Stripe API to create an account session', error); res.status(500); res.send({error: error.message}); } }); \# This is a placeholder - it should be replaced with your secret API key. # Sign in to see your own test API key embedded in code samples. # Don’t submit any personally identifiable information in requests made with this key. Stripe.api_key = 'sk_INSERT_YOUR_SECRET_KEY' post '/account_session' do content_type 'application/json' begin account_session = Stripe::AccountSession.create({ account: "{{CONNECTED_ACCOUNT_ID}}", components: { payments: { enabled: true, features: { refund_management: true, dispute_management: true, capture_payments: true } } } }) { client_secret: account_session[:client_secret] }.to_json rescue => error puts "An error occurred when calling the Stripe API to create an account session: #{error.message}"; return [500, { error: error.message }.to_json] end end \# This is a placeholder - it should be replaced with your secret API key. # Sign in to see your own test API key embedded in code samples. # Don’t submit any personally identifiable information in requests made with this key. stripe.api_key = 'sk_INSERT_YOUR_SECRET_KEY' @app.route('/account_session', methods=['POST']) def create_account_session(): try: account_session = stripe.AccountSession.create( account="{{CONNECTED_ACCOUNT_ID}}", components={ "payments": { "enabled": True, "features": { "refund_management": True, "dispute_management": True, "capture_payments": True } }, }, ) return jsonify({ 'client_secret': account_session.client_secret, }) except Exception as e: print('An error occurred when calling the Stripe API to create an account session: ', e) return jsonify(error=str(e)), 500 // This is your test secret API key. "api_key" => $stripeSecretKey, try { $account_session = $stripe->accountSessions->create([ 'account' => "{{CONNECTED_ACCOUNT_ID}}", 'components' => [ 'payments' => [ 'enabled' => true, 'features' => [ 'refund_management' => true, 'dispute_management' => true, 'capture_payments' => true, ], ], ], ]); echo json_encode(array( 'client_secret' => $account_session->client_secret )); } catch (Exception $e) { error_log("An error occurred when calling the Stripe API to create an account session: {$e->getMessage()}"); http_response_code(500); echo json_encode(['error' => $e->getMessage()]); } // This is a placeholder - it should be replaced with your secret API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. Stripe.apiKey = "sk_INSERT_YOUR_SECRET_KEY"; post("/account_session", (request, response) -> { response.type("application/json"); try { Map params = new HashMap<>(); params.put("account", "{{CONNECTED_ACCOUNT_ID}}"); Map payments = new HashMap<>(); payments.put("enabled", true); Map features = new HashMap<>(); features.put("refund_management", true); features.put("dispute_management", true); features.put("capture_payments", true); payments.put("features", features); Map components = new HashMap<>(); components.put("payments", payments); params.put("components", components); AccountSession accountSession = AccountSession.create(params); CreateAccountSessionResponse accountSessionResponse = new CreateAccountSessionResponse(accountSession.getClientSecret()); return gson.toJson(accountSessionResponse); } catch(Exception e) { System.out.println("An error occurred when calling the Stripe API to create an account session: " + e.getMessage()); response.status(500); return gson.toJson(new ErrorResponse(e.getMessage())); } }); package main import ( "bytes" "encoding/json" "io" "log" "net/http" "github.com/stripe/stripe-go/v82" "github.com/stripe/stripe-go/v82/accountsession" ) // This is a placeholder - it should be replaced with your secret API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. stripe.Key = "sk_INSERT_YOUR_SECRET_KEY" func CreateAccountSession(w http.ResponseWriter, r *http.Request) { if r.Method != "POST" { http.Error(w, http.StatusText(http.StatusMethodNotAllowed), http.StatusMethodNotAllowed) return } accountSession, err := accountsession.New( &stripe.AccountSessionParams{ Account: stripe.String("{{CONNECTED_ACCOUNT_ID}}"), Components: &stripe.AccountSessionComponentsParams{ Payments: &stripe.AccountSessionComponentsPaymentsParams{ Enabled: stripe.Bool(true), Features: &stripe.AccountSessionComponentsPaymentsFeaturesParams{ RefundManagement: stripe.Bool(true), DisputeManagement: stripe.Bool(true), CapturePayments: stripe.Bool(true), }, }, }, }, ) if err != nil { log.Printf("An error occurred when calling the Stripe API to create an account session: %v", err) w.WriteHeader(http.StatusInternalServerError) if stripeErr, ok := err.(*stripe.Error); ok { writeJSON(w, struct { Error string `json:"error"` }{ Error: stripeErr.Msg, }) } else { writeJSON(w, struct { Error string `json:"error"` }{ Error: err.Error(), }) } return } writeJSON(w, struct { ClientSecret string `json:"client_secret"` }{ ClientSecret: accountSession.ClientSecret, }) } // This is a placeholder - it should be replaced with your secret API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. services.AddSingleton(new StripeClient("<>")); [Route("account_session")] [ApiController] public class AccountSessionApiController : Controller { private readonly StripeClient _client; public AccountSessionApiController(StripeClient client) { _client = client; } [HttpPost] public ActionResult Post() { try { AccountSession accountSession = _client.V1.AccountSessions.Create( new AccountSessionCreateOptions { Account = "{{CONNECTED_ACCOUNT_ID}}", Components = new AccountSessionComponentsOptions { Payments = new AccountSessionComponentsPaymentsOptions { Enabled = true, Features = new AccountSessionComponentsPaymentsFeaturesOptions { RefundManagement = true, DisputeManagement = true, CapturePayments = true } } } } ); return Json(new { client_secret = accountSession.ClientSecret }); } catch(Exception ex) { Console.Write("An error occurred when calling the Stripe API to create an account session: " + ex.Message); Response.StatusCode = 500; return Json(new { error = ex.Message }); } } } { "require": { "stripe/stripe-php": "17.5.0" } } certifi==2026.1.4 chardet==5.2.0 click==8.3.1 Flask==3.1.2 idna==3.11 itsdangerous==2.2.0 Jinja2==3.1.6 MarkupSafe==3.0.3 requests==2.32.5 stripe==12.4.0 toml==0.10.2 Werkzeug==3.1.5 source 'https://rubygems.org/' gem 'sinatra' gem 'stripe', '15.4.0' 4.0.0 com.stripe.sample stripe-account-onboarding 1.0.0-SNAPSHOT org.slf4j slf4j-simple 2.0.3 com.sparkjava spark-core 2.9.4 com.google.code.gson gson 2.9.1 org.projectlombok lombok 1.18.20 provided com.stripe stripe-java 29.4.0 sample org.apache.maven.plugins maven-compiler-plugin 3.10.1 1.8 1.8 maven-assembly-plugin package single jar-with-dependencies Server module stripe.com/docs/connect/connect-embedded-components/quickstart go 1.21 require github.com/stripe/stripe-go/v82 v82.4.0 net8.0 StripeExample Major // Fetch the AccountSession client secret const response = await fetch('/account_session', { method: "POST" }); // Fetch the AccountSession client secret const response = await fetch('/account_session.php', { method: "POST", headers: { "Content-Type": "application/json", }, }); const stripeConnectInstance = loadConnectAndInitialize({ // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. publishableKey: "pk_INSERT_YOUR_PUBLISHABLE_KEY", fetchClientSecret: fetchClientSecret, appearance: { overlays: 'dialog', variables: { colorPrimary: '#625afa', }, }, }); const container = document.getElementById("container"); const paymentsComponent = stripeConnectInstance.create("payments"); container.appendChild(paymentsComponent); { "name": "stripe-sample-code", "version": "1.0.0", "description": "Build a full, working integration using Connect embedded components. Here are some basic scripts you can use to build and run the application.", "scripts": { "start": "parcel watch", "build": "parcel build" }, "author": "", "license": "ISC", "devDependencies": { "parcel": "^2.8.3" }, "source": "public/index.html", "dependencies": { "@stripe/connect-js": "3.3.27" } } { "name": "stripe-sample-code", "version": "1.0.0", "description": "Build a full, working integration using Connect embedded components. Here are some basic scripts you can use to build and run the application.", "scripts": { "start-client": "parcel watch", "start-server": "node server.js", "start": "concurrently \"yarn start-client\" \"yarn start-server\"", "build": "parcel build" }, "author": "", "license": "ISC", "devDependencies": { "concurrently": "4.1.2", "parcel": "^2.8.3" }, "source": "public/index.html", "dependencies": { "express": "^4.17.1", "stripe": "17.6.0", "@stripe/connect-js": "3.3.27" } } { "name": "stripe-sample", "version": "0.1.0", "dependencies": { "@stripe/connect-js": "3.3.27", "@stripe/react-connect-js": "3.3.25", "express": "^4.17.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.4.0", "stripe": "17.6.0" }, "devDependencies": { "concurrently": "4.1.2", "parcel": "^2.8.3" }, "homepage": "http://localhost:3000", "proxy": "http://localhost:4242", "source": "public/index.html", "scripts": { "start-client": "parcel watch", "start-server": "node server.js", "build": "parcel build", "test": "react-scripts test", "eject": "react-scripts eject", "start": "concurrently \"yarn start-client\" \"yarn start-server\"" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.4.0", "@stripe/connect-js": "3.3.27", "@stripe/react-connect-js": "3.3.25" }, "homepage": "http://localhost:3000", "proxy": "http://localhost:4242", "scripts": { "start": "parcel watch", "build": "parcel build" }, "source": "public/index.html", "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "parcel": "^2.8.3" } } import { ConnectPayments, ConnectComponentsProvider, } from "@stripe/react-connect-js"; const [stripeConnectInstance] = useState(() => { const fetchClientSecret = async () => { // Fetch the AccountSession client secret const response = await fetch('/account_session', { method: "POST" }); // Fetch the AccountSession client secret const response = await fetch('/account_session.php', { method: "POST", headers: { "Content-Type": "application/json", }, }); if (!response.ok) { // Handle errors on the client side here const {error} = await response.json(); console.log('An error occurred: ', error); return undefined; } else { const {client_secret: clientSecret} = await response.json(); return clientSecret; } }; return loadConnectAndInitialize({ // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. publishableKey: "pk_INSERT_YOUR_PUBLISHABLE_KEY", fetchClientSecret: fetchClientSecret, appearance: { overlays: 'dialog', variables: { colorPrimary: '#625afa', }, }, }) }); const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY); export default async function handler(req, res) { if (req.method === 'POST') { try { const accountSession = await stripe.accountSessions.create({ account: "{{CONNECTED_ACCOUNT_ID}}", components: { payments: { enabled: true, features: { refund_management: true, dispute_management: true, capture_payments: true, } } } }); res.json({ client_secret: accountSession.client_secret, }); } catch (error) { console.error('An error occurred when calling the Stripe API to create an account session', error); res.status(500); res.send({error: error.message}); } } } import { ConnectPayments, ConnectComponentsProvider, } from "@stripe/react-connect-js"; return loadConnectAndInitialize({ // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. publishableKey: "pk_INSERT_YOUR_PUBLISHABLE_KEY", fetchClientSecret: fetchClientSecret, appearance: { overlays: 'dialog', variables: { colorPrimary: '#625afa', }, }, }) }); \# This is a public sample test API key. # Don’t submit any personally identifiable information in requests made with this key. # Sign in to see your own test API key embedded in code samples. STRIPE_SECRET_KEY=sk_INSERT_YOUR_SECRET_KEY { "name": "stripe-sample", "version": "0.1.0", "scripts": { "dev": "next dev -p 4242" }, "dependencies": { "@stripe/connect-js": "3.3.27", "@stripe/react-connect-js": "3.3.25", "micro": "9.4.1", "micro-cors": "0.1.1", "next": "^13.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "stripe": "17.6.0" } } { "name": "stripe-sample", "version": "0.1.0", "private": true, "source": "public/index.html", "scripts": { "start-client": "parcel watch", "start-server": "node server.js", "build": "parcel build", "start": "concurrently \"yarn start-client\" \"yarn start-server\"" }, "dependencies": { "@stripe/connect-js": "3.3.27", "express": "^4.17.1", "stripe": "17.6.0", "vue": "^3.2.38" }, "devDependencies": { "@parcel/transformer-vue": "^2.9.3", "concurrently": "4.1.2", "parcel": "^2.9.3" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } { "name": "stripe-sample", "version": "0.1.0", "private": true, "scripts": { "start": "parcel watch", "build": "parcel build" }, "source": "public/index.html", "dependencies": { "@stripe/connect-js": "3.3.27", "vue": "^3.2.38" }, "devDependencies": { "@parcel/transformer-vue": "^2.9.3", "parcel": "^2.9.3" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } const response = await fetch('/account_session', { method: "POST" }); const response = await fetch('/account_session.php', { method: "POST" }); const stripeConnectInstance = loadConnectAndInitialize({ // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. publishableKey: "pk_INSERT_YOUR_PUBLISHABLE_KEY", fetchClientSecret: fetchClientSecret, appearance: { overlays: 'dialog', variables: { colorPrimary: '#625afa', }, }, }); const container = document.getElementById("container"); const paymentsComponent = stripeConnectInstance.create("payments"); container.appendChild(paymentsComponent); 1. Build the server ~~~ pip3 install -r requirements.txt ~~~ 2. Run the server ~~~ export FLASK_APP=server.py python3 -m flask run --port=4242 ~~~ 1. Build the server ~~~ bundle install ~~~ 2. Run the server ~~~ ruby server.rb -o 0.0.0.0 ~~~ 1. Build the server ~~~ composer install ~~~ 2. Run the server ~~~ php -S 127.0.0.1:4242 --docroot=dist ~~~ 1. Build the server ~~~ dotnet restore ~~~ 2. Run the server ~~~ dotnet run ~~~ 1. Build the server ~~~ mvn package ~~~ 2. Run the server ~~~ java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server ~~~ 1. Install the dependencies ~~ go mod download github.com/stripe/stripe-go/v82 ~~ 2. Run the server ~~~ go run server.go ~~~ 3. Build the client app ~~~ npm install ~~~ 4. Run the client app ~~~ npm start ~~~ 5. Go to [http://localhost:4242/index.html](http://localhost:4242/index.html) 1. Build the application ~~~ npm install ~~~ 2. Run the application ~~~ npm start ~~~ 3. Go to [http://localhost:4242/index.html](http://localhost:4242/index.html) 1. Build the application ~~~ npm install ~~~ 2. Run the application ~~~ npm run dev ~~~ 3. Go to [localhost:4242](http://localhost:4242) ### Install the Stripe Node library Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a `package.json` file, download the project files using the Download link in the code editor. #### npm Install the library: ```bash npm install --save stripe@18.4.0 ``` #### GitHub Download the stripe-node library source code directly [from GitHub](https://github.com/stripe/stripe-node/releases/tag/v18.4.0). ### Install the Stripe Ruby library Install the Stripe Ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor. #### Terminal Install the gem: ```bash gem install stripe -v 15.4.0 ``` #### Bundler Add this line to your Gemfile: ```bash gem 'stripe', '15.4.0' ``` #### GitHub Download the stripe-ruby gem source code directly [from GitHub](https://github.com/stripe/stripe-ruby/releases/tag/v15.4.0). ### Install the Stripe Java library Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a sample `pom.xml` file (for Maven), download the project files using the link in the code editor. #### Maven Add the following dependency to your POM. ```bash \ncom.stripe\nstripe-java\n29.4.0\n ``` #### Gradle Add the dependency to your `build.gradle` file. ```bash implementation "com.stripe:stripe-java:29.4.0" ``` #### GitHub Download the JAR directly [from GitHub](https://github.com/stripe/stripe-java/releases/tag/v29.4.0). ### Install the Stripe Python package Install the Stripe package and import it in your code. Alternatively, if you’re starting from scratch and need a `requirements.txt` file, download the project files using the link in the code editor. #### pip Install the package through pip: ```bash pip3 install stripe==12.4.0 ``` #### GitHub Download the stripe-python library source code directly [from GitHub](https://github.com/stripe/stripe-python/releases/tag/v12.4.0). ### Install the Stripe PHP library Install the library with composer and initialize it with your secret API key. Alternatively, if you’re starting from scratch and need a `composer.json` file, download the files using the link in the code editor. #### Composer Install the library: ```bash composer require stripe/stripe-php:17.5.0 ``` #### GitHub Download the stripe-php library source code directly [from GitHub](https://github.com/stripe/stripe-php/releases/tag/v17.5.0). ### Install the Stripe Go library Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a `go.mod` file, download the project files using the link in the code editor. #### Go Make sure to initialize with Go Modules: ```bash go get -u github.com/stripe/stripe-go/v82@v82.4.0 ``` #### GitHub Download the stripe-go module source code directly [from GitHub](https://github.com/stripe/stripe-go/releases/tag/v82.4.0). ### Install the Stripe.net library Install the package with .NET or NuGet. Alternatively, if you’re starting from scratch, download the files, which include a configured `.csproj` file. #### dotnet Install the library: ```bash dotnet add package Stripe.net --version 48.4.0 ``` #### NuGet Install the library: ```bash Install-Package Stripe.net -Version 48.4.0 ``` #### GitHub Download the Stripe.net library source code directly [from GitHub](https://github.com/stripe/stripe-dotnet/releases/tag/v48.4.0). ### Install the Stripe library Install the packages and import them in your code. Alternatively, if you’re starting from scratch and need a `package.json` file, download the project files using the link in the code editor. Install the libraries: ```bash npm install --save stripe@18.4.0 ``` ### Install the Stripe Node library Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a `package.json` file, download the project files using the Download link in the code editor. #### npm Install the library: ```bash npm install --save stripe@18.4.0 ``` #### GitHub Download the stripe-node library source code directly [from GitHub](https://github.com/stripe/stripe-node/releases/tag/v18.4.0). ### Install the Stripe Ruby library Install the Stripe Ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor. #### Terminal Install the gem: ```bash gem install stripe -v 15.4.0 ``` #### Bundler Add this line to your Gemfile: ```bash gem 'stripe', '15.4.0' ``` #### GitHub Download the stripe-ruby gem source code directly [from GitHub](https://github.com/stripe/stripe-ruby/releases/tag/v15.4.0). ### Install the Stripe Java library Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a sample `pom.xml` file (for Maven), download the project files using the link in the code editor. #### Maven Add the following dependency to your POM. ```bash \ncom.stripe\nstripe-java\n29.4.0\n ``` #### Gradle Add the dependency to your `build.gradle` file. ```bash implementation "com.stripe:stripe-java:29.4.0" ``` #### GitHub Download the JAR directly [from GitHub](https://github.com/stripe/stripe-java/releases/tag/v29.4.0). ### Install the Stripe Python package Install the Stripe package and import it in your code. Alternatively, if you’re starting from scratch and need a `requirements.txt` file, download the project files using the link in the code editor. #### pip Install the package through pip: ```bash pip3 install stripe==12.4.0 ``` #### GitHub Download the stripe-python library source code directly [from GitHub](https://github.com/stripe/stripe-python/releases/tag/v12.4.0). ### Install the Stripe PHP library Install the library with composer and initialize it with your secret API key. Alternatively, if you’re starting from scratch and need a `composer.json` file, download the files using the link in the code editor. #### Composer Install the library: ```bash composer require stripe/stripe-php:17.5.0 ``` #### GitHub Download the stripe-php library source code directly [from GitHub](https://github.com/stripe/stripe-php/releases/tag/v17.5.0). ### Install the Stripe Go library Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a `go.mod` file, download the project files using the link in the code editor. #### Go Make sure to initialize with Go Modules: ```bash go get -u github.com/stripe/stripe-go/v82@v82.4.0 ``` #### GitHub Download the stripe-go module source code directly [from GitHub](https://github.com/stripe/stripe-go/releases/tag/v82.4.0). ### Install the Stripe.net library Install the package with .NET or NuGet. Alternatively, if you’re starting from scratch, download the files, which include a configured `.csproj` file. #### dotnet Install the library: ```bash dotnet add package Stripe.net --version 48.4.0 ``` #### NuGet Install the library: ```bash Install-Package Stripe.net -Version 48.4.0 ``` #### GitHub Download the Stripe.net library source code directly [from GitHub](https://github.com/stripe/stripe-dotnet/releases/tag/v48.4.0). ### Install the Stripe library Install the packages and import them in your code. Alternatively, if you’re starting from scratch and need a `package.json` file, download the project files using the link in the code editor. Install the libraries: ```bash npm install --save stripe@18.4.0 ``` ### Set your environment variables Add your secret key to a `.env` file. Next.js automatically loads them into your application as [environment variables](https://nextjs.org/docs/basic-features/environment-variables). ### Create an endpoint on your server Add a new endpoint on your server for your client to call. ### Delegate API access to your connected account To make requests on behalf of your connected account, pass the connected account ID to the [AccountSessions API](https://docs.stripe.com/api/account_sessions.md). ### Enable specific embedded components for your connected accounts Specify the embedded components you want to enable for your connected accounts. For the full list of supported embedded components, see [Get started with Connect embedded components](https://docs.stripe.com/connect/supported-embedded-components.md). ### Create an AccountSession Call the `v1/account_sessions` API from your endpoint to create a new [AccountSession](https://docs.stripe.com/api/account_sessions.md). ### Return the client secret Return the `client_secret` property from the AccountSession in the response. ### Load the Connect.js script Import the [@stripe/connect-js](https://github.com/stripe/connect-js) module and call `loadConnectAndInitialize(initParams)` to load the code necessary to connect your client to Stripe. Connect.js loads synchronously and returns a `StripeConnectInstance` to the client. #### npm Install the library: ```bash npm install --save @stripe/connect-js ``` #### GitHub Download the @stripe/connect-js library source code directly [from GitHub](https://github.com/stripe/connect-js). ### Import React Connect.js Import the [@stripe/react-connect-js](https://github.com/stripe/react-connect-js) module. React Connect.js is a thin wrapper around Connect embedded components that allows you to add embedded components to any React app. #### npm Install the library: ```bash npm install --save @stripe/react-connect-js ``` #### GitHub Download the @stripe/react-connect-js library source code directly [from GitHub](https://github.com/stripe/react-connect-js). ### Initialize Connect.js `loadConnectAndInitialize(initParams)` returns a StripeConnectInstance object, which is used to create a StripeConnectInstance. Initialize the StripeConnectInstance by passing in your [publishable key](https://docs.stripe.com/keys.md) and the `fetchClientSecret` function to fetch a client secret. ### Include Connect embedded components Add Connect embedded components to the DOM. After initialization, the StripeConnectInstance handles making requests to Stripe and updating the UI of the web components. You can mount or unmount these elements from the DOM at any time and make the inner elements fit seamlessly within your page by wrapping them with your own HTML. After a successful initialization, StripeConnectInstance manages the context for all the Connect embedded components in your application and uses that client secret and publishable key to contact Stripe. ### Optional: Style Connect embedded components [Customize the appearance of Connect embedded components](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#customize-the-look-of-connect-embedded-components) by passing an `appearance` configuration to StripeConnect upon initialization. Connect embedded components already inherit the font-family of the parent HTML element, but you can make them match with the rest of your application by passing your company’s color scheme.