# Capital promo tile component

Increase adoption for your Capital program by more prominently displaying offers.

The Capital promo tile component displays available financing offers to your connected accounts. This guide describes how to embed a smaller tile version of the [Capital promotion component](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md) as a white-labeled promotion in your platform’s website or app.

The promo tile can help:

- **Increase visibility**: Display financing options where connected accounts make business decisions, improving awareness and application rates.
- **Fill gaps**: Provide visible, prequalified financing offers with exact amounts, addressing limitations of email-only marketing.
- **Reduce friction**: Enable direct application access from your website or dashboard.
- **Drive adoption**: Present timely offers with clear terms to motivate action.
- **Maintain branding**: Customize the promo tile to match your platform’s design.
![Promo tile in Furever, the Stripe embedded components demo](https://b.stripecdn.com/docs-statics-srv/assets/embedded-furever-capital-for-platforms-promo-tile.179b301e8ddea70e5501dad40db7e8b4.png)

Promo tile in Furever, the Stripe embedded components demo

## Before you begin

- Embedded components are only available to display to connected accounts in the US and UK.
- Before you go live, you must [enable automatic offers](https://docs.stripe.com/capital/embedded-component-integration.md#enable-automatic-offers) and [submit your integration to Stripe for review](https://docs.stripe.com/capital/promotional-tile.md#submit-for-review).
- When you [render the component](https://docs.stripe.com/capital/promotional-tile.md#render-the-component), it links out to Stripe content by default. You can replace the link for [Privacy policy](https://stripe.com/privacy) and [How Capital for platforms works](https://docs.stripe.com/capital/how-capital-for-platforms-works.md) 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](https://github.com/stripe/stripe-ruby/#public-preview-sdks) `>=15.5.0-beta.1`
- [Python](https://github.com/stripe/stripe-python/#public-preview-sdks) `>=12.5.0b1`
- [PHP](https://github.com/stripe/stripe-php/#public-preview-sdks) `>=17.6.0-beta.1`
- [Node](https://github.com/stripe/stripe-node/#public-preview-sdks) `>=18.5.0-beta.1`
- [.NET](https://github.com/stripe/stripe-dotnet#public-preview-sdks) `>=48.5.0-beta.1`
- [Java](https://github.com/stripe/stripe-java#public-preview-sdks) `>=29.5.0-beta.1`
- [Go](https://github.com/stripe/stripe-go#public-preview-sdks) `>=82.5.0-beta.1`

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

#### npm

Install the library:

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

If you’re using React in your application:

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

#### GitHub

Download the [@stripe/connect-js](https://github.com/stripe/connect-js) and [@stripe/react-connect-js](https://github.com/stripe/react-connect-js) libraries source code directly from GitHub.

## Set up Connect.js

If you don’t already use Stripe embedded components in your application, [initialize Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#account-sessions) before you integrate the promo tile component.

## Create an Account Session

In your [create an Account Session](https://docs.stripe.com/api/account_sessions/create.md) request, specify `capital_financing_promotion` in the `components` parameter.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; embedded_connect_beta=v2;" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[capital_financing_promotion][enabled]=true"
```

## Render the component

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.

#### JavaScript

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

## Customize the component's appearance

[Customize embedded components](https://docs.stripe.com/connect/customize-connect-embedded-components.md) to align the component’s fonts, colors, and UI style with your platform’s branding.

## Set the display state

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:

#### JavaScript

```js
// 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;
  }
});
```

## Handle load errors

After rendering the component, review how to [handle load errors](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-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:

1. [Create a test offer in a sandbox](https://docs.stripe.com/capital/testing.md#create-offer), and set the offer status to `delivered`. Use this test offer to preview the application component in your platform’s website or dashboard.
1. 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).
1. [Submit the preview to Stripe](https://form.asana.com/?k=8K51UWmWhttehNFD5qBLdg&d=974470123217835). After approval, Stripe enables you to use the component in live mode.

## Optional: Additional embedded components

The promotion component is one of several [embedded components](https://docs.stripe.com/capital/embedded-component-integration.md#select-components) available for Capital for platforms. For example, you can embed the [Capital financing component](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.md), which allows your connected accounts to manage their payments and view transaction history.

## See also

- [Set up Capital embedded components](https://docs.stripe.com/capital/embedded-component-integration.md)