Private preview

Capital application component Private preview

Show an end-to-end application flow for Capital financing.

The Capital application component allows your eligible connected accounts to complete a financing application in your platform’s website or application. They can select their offer amount and terms, view contractual details, and submit their application.

This component is similar to the Capital promotion component, but it invokes the application directly and excludes educational or promotional content. Use this embedded component if you want to customize how to display the financing offer and program information to eligible connected accounts.

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.

Interested in the Capital application component?

Enter your email to request access.

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 application component.

Create an Account Session

In your create an Account Session request, specify capital_financing_application in the components parameter.

Command Line

Select a language

cURL

Ruby

Python

PHP

Java

Node.js

.NET

No results

Render the application component

Render the Capital application component in the front end:

capital-financing-application.js

Select a language

JavaScript

React

No results

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

Method	Type	Description	Default
`setOnApplicationSubmitted`	`() => void`	The connected account has successfully submitted their application for financing.
`setOnApplicationStepChange`	`({step: string}) => void`	The connected account has navigated through the application.
`setOnApplicationInitiated`	`() => void`	The connected account clicked Continue on the offer selection screen and initiated the application.
`setResumeInitiatedApplication`	`boolean`	If true, the component skips the offer selector and resumes an already-initiated application.	false
`setPrivacyPolicyUrl`	`string`	Absolute URL of a page containing your privacy policy.	`https://stripe.com/privacy`
`setHowCapitalWorksUrl`	`string`	Absolute URL of a page with information about the Capital program.	`https://docs.stripe.com/capital/how-capital-for-platforms-works`

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

Add the application component on a page your connected accounts use to view payments and payouts reporting information, or a dedicated Financing page in your platform’s UI. Make sure to use a different location than the Connect promotion component (if applicable).

To determine if a connected account is eligible for an offer, call the List financing offers endpoint and pass the connected account ID in the connected_account parameter.

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

No active financing: If an account doesn’t have an eligible financing offer, then the application component doesn’t render (returns null).
With active offer: If the connected account is eligible for an offer, the component shows the full offer details and a Start application button. Listen for the onApplicationStepChange event to track the connected account’s progress through the application. Stripe emits this event when the connected account moves to the next step or returns to a previous step in the Capital application process. Your handler receives the step name in the step field. Steps can appear in any order and can repeat. Stripe can modify, add, or remove step names at any time. Only use the onApplicationStepChange object for analytics purposes, such as tracking the average page completion time or pages with the most drop off. Don’t use the onApplicationStepChange object to trigger operational or support workflows, such as sending emails to connected accounts who stopped application progress at a specific page.
Offer in review: After an eligible connected account submits their financing application, the application component renders an empty screen while the application is under review. To display an application status tracker, use the Capital financing component.
Submitted offer: If a connected account has already submitted their financing application, the Capital financing application component renders an empty screen. Listen to the onApplicationSubmitted event to display a confirmation screen instead.

Continue the application in a custom dialog

Use this configuration to move the full application from your landing page to a dedicated dialog after the connected account selects an offer. When they click Continue, open a second application component with resumeInitiatedApplication set to true. The second component skips the offer selector and resumes the application at the next step.

capital-financing-application.jsx

The onApplicationStepChange type

The onApplicationStepChange type is defined in connect.js. Every time the connected account navigates from one step to another in the Capital application process, the step change handler receives a onApplicationStepChange object with the following property:

Name	Type	Example value
`step`	`string` (must be a valid step name)	`business_type`
The unique reference to an onboarding step.

Step Names

Step Restrictions

The StepChange object is only for analytics.
Steps can appear in any order and can repeat.
The list of valid step names can change at any time, without notice.

Use the onApplicationStepChange object only for analytics, such as tracking average page completion time or identifying the pages with the most drop-off. Don’t use the onApplicationStepChange object to trigger operational or support workflows, such as sending emails to connected accounts that stopped the application process on a specific page.

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 application component