Capital promo tile componentPublic preview

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:

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

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

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
# This example uses the beta SDK.

curl https://api.stripe.com/v1/account_sessions \
  -u sk_test_26PHem9AhJZvU623DfE1x4sd: \
  -d "account"="{{CONNECTED_ACCOUNT_ID}}" \
  -d "components"='{"capital_financing_promotion": {"enabled": true}}' \
  -H "Stripe-Version: 2025-04-30.basil; embedded_connect_beta=v2;"

Render the Capital promo tile component in the front end.

The setLayout method controls whether to display the full embedded component or the smaller banner, which greatly reduces the vertical size of the component to stack it along with other content on your website or your platform’s dashboard.

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

You can customize the look and feel of embedded components. The Capital financing promotion component supports a set of styling options to match your design system. This ensures the promo tile feels like a native part of your platform rather than a third-party element.

You can customize colors, typography, border radius, and other visual elements through the Connect.js configuration. You can also try out different options before implementation using the embedded component appearance preview tool.

For more granular control, you can initialize multiple Connect.js instances if your promo tile requires different styling from other embedded components. This approach allows you to maintain distinct appearance configurations for different components throughout your platform.

For more information on additional configuration options for this component, see the Capital financing promotion documentation.

Add the promo tile on your main home page or the sidebar of that page yields the highest marketing impact. Position the tile where connected accounts frequently navigate to maximize visibility and engagement. Additionally, evaluate how your connected accounts interact with your platform to find the places that best apply to your use case (such as high-visibility or decision-making pages).

If multiple users have access to a connected account, consider only showing the promo tile to a logged-in owner or admin of the account (who can review and apply for a financing offer).

The component adapts its display based on the connected account’s financing status:

• With active offer: Shows full offer details with a Start application button.
• Active financing in progress: The component doesn’t render (returns null).
• No active financing: Displays generic eligibility information about the lending program.

Additionally, you can hide the promo tile component entirely if there’s no eligible financing offer. To accomplish this you can use the available onEligibleFinancingOfferLoaded callback:

// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);
capitalFinancingPromotion.setOnEligibleFinancingOfferLoaded(({productType}) => {
  switch (productType) {
    case 'none':
      capitalFinancingPromotion.parentElement.style.display = 'none';
      break;
    case 'standard':
    case 'refill':
      capitalFinancingPromotion.parentElement.style.display = 'block';
      break;
  }
});

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:

1. 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.
2. 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).
3. Submit the preview to Stripe. After approval, Stripe enables you to use the component in live mode.