Private preview

Capital financing component Private preview

Allow a connected account to view and manage their active Capital financing.

The Capital financing embedded component allows connected accounts to view and manage their financing status after they accept an offer. Connected accounts can:

View their payment progress
Monitor transaction history
Make payments, if applicable to their type of financing

Interested in the Capital financing component?

Enter your email to request access.

Before you begin

Embedded components are available to display to connected accounts in the United States (US), United Kingdom (GB), France (FR), Germany (DE), and Australia (AU).
Before you activate Capital, you must enable automatic offers and submit your integration to Stripe for review .
When you render the component , it links out to Stripe content by default. You can replace the link for Privacy policy and How Capital for platforms works with your equivalent documentation.

Install Capital embedded components

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

Ruby >= 15. 5. 0-beta. 1
Python >= 12. 5. 0b1
PHP >= 17. 6. 0-beta. 1
Node >= 18. 5. 0-beta. 1
.NET >= 48. 5. 0-beta. 1
Java >= 29. 5. 0-beta. 1
Go >= 82. 5. 0-beta. 1

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

Set up Connect.js

If you don’t already use Stripe embedded components in your application, initialize Connect.js before you integrate the financing component.

Create an Account Session

In your create an Account Session request, specify capital_financing in the components parameter to enable the financing component.

Command Line

Select a language

cURL

Ruby

Python

PHP

Java

Node.js

.NET

No results

Render the component

Render the Capital financing component in the front end:

capital-financing.js

Select a language

JavaScript

React

No results

// Include this element in your HTML
const capitalFinancing = stripeConnectInstance.create('capital-financing');
container.appendChild(capitalFinancing);

Method	Type	Description	Default
`setDefaultFinancingOffer`	`string`	ID of the FinancingOffer to display by default. If omitted, or no matching financing is available, the component displays the active or most recent financing.
`setShowFinancingSelector`	`boolean`	Controls the display of financing status: When true, the component displays the Current and Past tabs, and the Activity tab includes transactions across all financings. When false, the component hides the Current and Past tabs, and the Activity tab only shows transactions for the selected financing. For rejected or revoked financing, the component displays only the Past tab, regardless of this setting. In layouts with neither Current nor Past tabs, the Activity tab only shows transactions for the selected financing, regardless of this setting.	`true`
`setOnFinancingsLoaded`	`({total: number}) => void`	The component loaded the connected account’s financing history.
`setSupportUrl`	`string`	URL for the support link shown to connected accounts. Defaults to the Stripe Capital support email.	`mailto:`
`setHowCapitalWorksUrl`	`string`	Absolute URL of a page with information about the Capital program.	`https://docs.stripe.com/capital/how-stripe-capital-works`

To render the single-financing view, call setDefaultFinancingOffer(...) and setShowFinancingSelector(false) (using HTML + JS), or set defaultFinancingOffer and showFinancingSelector={false} (using React).

For most financing states, this configuration displays only the Activity tab and scopes its transaction list to the selected financing.
For connected accounts with dual-merchant financing, the component displays that financing instead of the financing specified by defaultFinancingOffer .
For rejected or revoked financing, the component displays only the Past tab.

Style and customize the component

Customize embedded components to align the component’s fonts, colors, and UI style with your platform’s branding.

Set the display state

Place the financing component on a page your connected accounts currently use to view payments and payouts reporting information, or a dedicated Financing page.

The financing component displays content dynamically based on the connected account’s financing status:

No financing history: If a connected account has an offer, but hasn’t accepted or applied for it yet, the financing component displays nothing. Listen to the onFinancingsLoaded event to display a custom message in the financing component for this state or hide the financing component until financing data becomes available.
Offer in review: After an eligible connected account accepts and applies for a financing offer, use this state to render the component to display an application status tracker while they wait for offer approval.

Handle load errors

After rendering the component, review how to handle load errors to make sure your integration can gracefully manage cases when components fail to load.

Submit the component for review

To use any of the Capital components in live mode, Stripe and our financial partners must review and approve all customer-facing content that references Stripe Capital:

Create a test offer in a sandbox , and set the offer status to delivered . Use this test offer to preview the application component in your platform’s website or dashboard.
Capture a preview of the sandbox offer and how the embedded component displays in your platform’s UI (such as screenshots or a recorded video).
Submit the preview to Stripe . After approval, Stripe enables you to use the component in live mode.

Capital financing component