Private preview
Capital promotion component Private preview
Show promotional content about a connected account's Capital financing offer and launch a Capital application.
The Capital promotion component allows your eligible connected accounts to complete a financing application in your platform’s website or application. Connected accounts can select their offer amount and terms, view contractual details, and submit their application. This component displays educational and promotional content about the Capital program as the starting point in the application process.
Alternate components
- For a smaller version of this component, see the Capital promo tile component
- To exclude education and promotional information about the Capital program, see the Capital application component
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 promotion 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_promotion in the components parameter.
Command Line
Select a language
cURL
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
Render the component
Render the Capital promotion component in the front end:
capital-financing-promotion.js
Select a language
JavaScript
React
No results
// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
container.appendChild(capitalFinancingPromotion);
| 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. | |
setOnAdvanceToCapitalFinancingApplication | () => void | The connected account clicked View offer to advance to the financing application. | |
setDisableNestedCapitalFinancingApplication | boolean | If true, the component doesn’t open the built-in application dialog when the connected account clicks View offer. | false |
setLayout | full | banner | Controls the layout of the component. banner mode greatly reduces the vertical size of the component, which is useful when stacking the component with other content on the page. | full |
setOnEligibleFinancingOfferLoaded | ({productType: standard | refill | none}) => void | The connected account’s financing offer has been loaded. The productType field corresponds to the product_type field on the Financing Offer object. | |
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 |
setEligibilityCriteriaUrl | string | Absolute URL of a page with information about eligibility criteria for 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 promotion component on your platform’s home page, or a dedicated Financing page in your platform’s website or app. The application component displays content dynamically based on the connected account’s financing status:
- No active financing : If the connected account doesn’t have active financing, the component displays generic information about eligibility and the lending program.
- With active offer : If the connected account is eligible for an offer, the component shows full offer details with a Start application button. Listen for the onApplicationStepChange event to track the offer’s progress. Stripe emits this event when the connected account advances to the next step or returns to a previous step or page in the Capital application process. The next step name is provided in the step field of your handler. These steps can appear in any order and can repeat. Stripe can modify, add, or remove step names at any time.
- Offer in review : After an eligible connected account submits their financing application, the promotion component renders an empty screen while the application is under review. To display an application status tracker, use the Capital financing component .
- Submitted offer : After a connected account submits their financing application, the component renders an empty screen. Listen to the onApplicationSubmitted event to display a confirmation screen instead.
- Active financing in progress : If no refill offer is available for the connected account, the component doesn’t render and returns null . If a refill offer is available, the component behaves the same as the active offer state. It shows the full offer details and a Start application button.
Open the application in a custom dialog
To open the application in your dialog, enable both capital_financing_promotion and capital_financing_application when you create the Account Session. Set disableNestedCapitalFinancingApplication to true, then use onAdvanceToCapitalFinancingApplication to open a dialog containing ConnectCapitalFinancingApplication.
capital-financing-promotion.jsx
Callbacks in a custom dialog
Disabling the nested application prevents onApplicationSubmitted and onApplicationStepChange from firing on the promotion component. Set these callbacks on the separately rendered application component, as shown in the example.
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.