Composant de tuile promotionnelle CapitalVersion bêta publique

Installez une version bêta des SDK Stripe pour créer des sessions de compte avec des composants de la version bêta privée :

• 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

Utilisez la version bêta des bibliothèques côté client de Stripe pour afficher les composants de la version bêta privée :

Si vous n’utilisez pas encore les composants embarqués Stripe dans votre application, initialisez Connect.js avant d’intégrer le composant tuile promo.

Dans votre demande de session de compte, spécifiez capital_financement_promotion dans le paramètre composants .

# 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;"

Affichez le composant de tuile promo Capital dans le front-end.

La méthode setLayout contrôle s’il faut afficher le composant intégré full ou la petite bannière. Cela réduit considérablement la taille verticale du composant de façon à l’empiler avec d’autres contenus sur votre site web ou le Dashboard de votre plateforme.

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

Vous pouvez personnaliser l’apparence et la sensation des composants intégrés. Le volet Promotion du financement du capital prend en charge un ensemble d’options de style correspondant à votre système de conception. Cela garantit que la tuile promo se sent comme une partie native de votre plateforme plutôt que comme un élément tiers.

Vous pouvez personnaliser les couleurs, la typographie, le rayon de la bordure et d’autres éléments visuels grâce à la configuration Connect.js. Vous pouvez également essayer différentes options avant l’implémentation à l’aide de l’outil de prévisualisation de l’apparence des composants intégrés.

Pour un contrôle plus granulaire, vous pouvez initialiser plusieurs instances Connect.js si votre tuile promo nécessite un style différent des autres composants embarqués. Cette approche vous permet de maintenir des configurations d’apparence distinctes pour différents composants sur toute votre plateforme.

Pour plus d’informations sur les options de configuration supplémentaires de ce composant, consultez la documentation relative à la promotion du financement Capital.

Ajoutez la tuile promo sur votre page d’accueil principale ou la barre latérale de cette page produit l’impact marketing le plus élevé. Positionnez la tuile là où les comptes connectés naviguent fréquemment pour maximiser la visibilité et l’engagement. En outre, évaluez comment vos comptes connectés interagissent avec votre plateforme pour trouver les endroits qui s’appliquent le mieux à votre cas d’utilisation (tels que les pages à haute visibilité ou les pages décisionnelles).

Si plusieurs utilisateurs ont accès à un compte connecté, pensez à ne montrer la tuile promotionnelle qu’à un propriétaire ou un administrateur connecté du compte (qui peut examiner et demander une offre de financement).

Le composant adapte son affichage en fonction de l’état de financement du compte connecté :

• Avec offre active: affichez tous les détails de l’offre avec un bouton Démarrer la demande.
• Financement actif en cours : le composant ne rend pas (rend nul).
• Pas de financement actif : affichez des informations génériques sur l’admissibilité du programme de prêt.

En outre, vous pouvez masquer entièrement le composant de tuile promo s’il n’y a pas d’offre de financement admissible. Pour ce faire, vous pouvez utiliser le rappel disponible onEligibleFinancingOfferLoaded :

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

Pour utiliser l’un des composants Capital en mode live, Stripe et ses partenaires financiers doivent examiner et approuver tous les contenus orientés clients qui font référence à Stripe Capital :

1. Créez une offre de test dans un environnement de test, et définissez le statut de l’offre sur livré. Utilisez cette offre de test pour prévisualiser le composant applicatif dans le site Web ou le Dashboard de votre plateforme.
2. Capturez un aperçu de l’offre de l’environnement de test et de la façon dont le composant intégré s’affiche dans l’interface utilisateur de votre plateforme (comme des captures d’écran ou une vidéo enregistrée).
3. Soumettre l’aperçu à Stripe. Après approbation, Stripe vous permet d’utiliser le composant en mode live.