概要

A promotional tile highlights available financing offers to your users to increase awareness. This guide describes how to embed a Capital Financing Promotion component as a white-labeled promotion in your website or app.

A promotional tile can increase financing application rates more than an email-only program.

Key benefits

• Increase awareness: Highlight available financing options in the same place users make business decisions so that those options are part of the decision making process.
• Fill gaps: Address the limitations of email-only marketing and components buried on secondary pages by instead providing a visible, in-context promotional tile.
• Reduce friction: Allow users to click directly to the application flow.
• Drive adoption: Present timely offers with clear terms that motivate action.
• Maintain brand consistency: You can customize the look and feel of your offers to match your platform’s design system.

Promo tile in Furever, the Stripe embedded components demo

配置

Our analysis of successful implementations shows that placing the promotional tile on your main home page or the sidebar of that page yields the highest marketing impact.

By positioning the tile where users frequently navigate, you can maximize visibility and engagement. This strategic placement ensures that users see financing offers at the most opportune moments, which can lead to higher application rates and adoption.

Additionally, evaluate how your customer interacts with your platform to find the places that make the most sense for your specific use case.

利用の開始

Follow these steps to embed a promotional tile that presents Capital financing offers to your users:

1. Set up Connect.js

If you don’t already have 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.

2. Enable capital_financing_promotion in the Account Session route

アカウントセッションを作成する際は、components パラメーターの capital_financing_promotion を指定して、Capital 融資プロモーションコンポーネントを有効にします。

curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -H "Stripe-Version: 2025-02-24.acacia; embedded_connect_beta=v2;" \
  -d account=
{{CONNECTED_ACCOUNT_ID}} \
  -d "components[capital_financing_promotion][enabled]"=true

2. Render the promotional tile

After creating the account session and initializing ConnectJS, you can render the Capital financing promotion component in the front end:

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

4. Customize the component’s appearance

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.

5. Understanding display states

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.

6. Optional: Hide the tile if there is no offer

A common styling preference is to hide the card entirely unless there is an eligible offer. To accomplish this you can use the available onEligibleFinancingOfferLoaded callback:

// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
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;
  }
}

7. Finding additional component documentation

The promotional tile is one of several embedded components available for Capital.

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

You can also learn more about embedded components in our Capital for Platforms Embedded Components guide.

Post-implementation steps

After implementing the promotional tile:

• Consider A/B testing: Segment users and measure the impact of the promotional tile on application rates.
• Extend your integration: Extend your integration to other embedded components, such as the Capital application flow

Need implementation support? Contact our Capital for Platforms partnerships team for personalized guidance.