Embed a promotional tile

If you don’t already use Stripe embedded components in your application, run through the Initialize Connect.js step of the Get started with Connect embedded components guide.

That guide covers:

1. Establishing a back-end route to use the Create Account Session API
2. Setting up Connect.js
3. Loading and initializing Connect.js

After completing that guide, you can proceed with the promotional tile implementation.

When creating an Account Session, enable the Capital financing promotion component by specifying 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;"

After creating the account session and initializing ConnectJS, you can render the Capital financing promotion 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 promotional 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 promotional 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.

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

As described above, consider implementing the promotional tile on your main homepage or other high-visibility pages where users make business decisions.

Additionally, you can hide the promotional 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;
  }
});

You can create an offer in a sandbox and set the offer status to delivered. Use this test offer to preview the promotional tile within your platform’s website or dashboard.