Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in

Set up Capital embedded componentsPrivate preview

Embed a financing flow into your website.

Use Capital embedded components to integrate financing directly into your application. You can use these prebuilt components to:

  • Manage the user application process, display financing offers, and handle repayment logic
  • Promote and present offer details in a user-friendly and compliant way
  • Customize the styling to provide a white-labeled integration that fits your application’s interface

To learn more, see Get Started with Connect embedded components.

Example UI using Capital Financing embedded component

An example website that features the Capital financing component

Capital provides three key embedded components:

ComponentDescription
Capital financing promotionPromote new offers and educate your customers about eligibility and offer terms. Render the promotion component to upsell your financing program, and provide an entry point for your customers to apply for an offer.
Capital financingDisplay active financing offers, repayment progress, transaction history, and facilitate user’s payments toward their financing. Embed the financing component in your application’s Capital dashboard or reporting page.
Capital financing applicationHost and manage the complete application flow for your customers. Use the standalone application component only if you want to offer a more customized frontend. Otherwise, the financing promotion component enables your customers to complete the application flow in a dialog.

Setup

Capital components are currently in private preview and require the use of beta SDKs.

Install a beta version of the Stripe SDKs to create account sessions for private preview components:

Use the beta version of the Stripe’s client-side libraries to render private preview components:

Install the library:

npm install --save @stripe/connect-js@preview

If you’re using React in your application:

npm install --save @stripe/react-connect-js@preview

To test your embedded component integration, use Capital test mode tooling in the Dashboard to create a test financing offer.

Create an Account Session

Create an Account Session to give your connected accounts access to an embedded component. To use the Capital embedded components, make sure to include the capital_financing_promotion, capital_financing_application, and capital_financing in the components parameter of your request.

Capital components are in private preview and require the inclusion of the beta header on the Account Session creation request: embedded_connect_beta=v2;

Command Line
curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -H "Stripe-Version: 2025-02-24.acacia; embedded_connect_beta=v2;" \
  -d account=
{{CONNECTED_ACCOUNT_ID}}
 \
  -d "components[capital_financing][enabled]"=true \
  -d "components[capital_financing_promotion][enabled]"=true \
  -d "components[capital_financing_application][enabled]"=true

Render the Capital component

After creating the Account Session, initialize a StripeConnectInstance using the returned client secret. To learn more about how to initialize and configure Connect.js, see Load and Initialize ConnectJS.

After you initialize StripeConnectInstance, you can render the Capital components on the frontend. Each component features custom events and callback functions, allowing you to tailor them to fit your website’s specific needs. The components also offer the option to provide custom URLs for a fully white-labeled integration for your customers.

capital-financing.js
// Include these elements
const capitalFinancing = stripeConnectInstance.create('capital-financing');
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
const capitalFinancingApplication = stripeConnectInstance.create('capital-financing-application');
container.appendChild(capitalFinancing);
container.appendChild(capitalFinancingPromotion);
container.appendChild(capitalFinancingApplication);

Style and customize the components

You have the ability to customize embedded components to align with your company’s branding. For detailed instructions on how to adjust the UI to match your brand’s design, see Customizing Connect Embedded Components.

See also

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
Powered by Markdoc