# Composant de financement Capital Autoriser un compte connecté à visualiser et à gérer son financement actif Capital. Le composant intégré de financement Capital permet aux comptes connectés de consulter et de gérer leur état de financement après avoir accepté une offre. Les comptes connectés peuvent : - Consulter la progression du paiement. - Surveiller l’historique des transactions. - Effectuer des paiements, le cas échéant, selon leur [type de financement](https://docs.stripe.com/capital/how-capital-for-platforms-works.md#types-of-financing-offers) Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production. ## Avant de commencer - Les composants intégrés sont uniquement disponibles pour les comptes connectés aux États-Unis et au Royaume-Uni. - Avant d’entrer en ligne, vous devez [activer les offres](https://docs.stripe.com/capital/embedded-component-integration.md#enable-automatic-offers) et [soumettre votre intégration à Stripe pour examen](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.md#submit-for-review). - Lorsque vous [rendez le composant](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.md#render-the-component), il renvoie par défaut au contenu Stripe. Vous pouvez remplacer le lien pour la [politique de confidentialité](https://stripe.com/privacy) et [le fonctionnement Capital pour les plateformes](https://docs.stripe.com/capital/how-capital-for-platforms-works.md) par votre documentation équivalente. ## Installer les composants intégrés Capital 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](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` Utilisez la version bêta des bibliothèques côté client de Stripe pour afficher les composants de la version bêta privée : #### npm Installez la bibliothèque : ```bash npm install --save @stripe/connect-js@preview ``` Si vous utilisez React dans votre application : ```bash npm install --save @stripe/react-connect-js@preview ``` #### GitHub Téléchargez le [@stripe/connect-js](https://github.com/stripe/connect-js) et le code source des bibliothèques [@stripe/react-connect-js](https://github.com/stripe/react-connect-js) directement depuis GitHub. ## Configurer Connect.js Si vous n’utilisez pas encore les composants intégrés Stripe dans votre application, [initialisez Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#account-sessions) avant d’intégrer le composant de financement. ## Créer une session de compte Lors de la [création d’une session Account](https://docs.stripe.com/api/account_sessions/create.md), activez le composant de financement Capital en indiquant `capital_financing` dans le paramètre `components`. ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; embedded_connect_beta=v2;" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[capital_financing][enabled]=true" ``` ## Rendu du composant Affichez le composant de financement Capital dans le front-end. #### JavaScript ```js // Include this element in your HTML const capitalFinancing = stripeConnectInstance.create('capital-financing'); container.appendChild(capitalFinancing); ``` #### HTML + JS | Moyen de paiement | Type | Description | Par défaut | | -------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | `setDefaultFinancingOffer` | `string` | Indiquez l’identifiant de l’[offre de financement](https://docs.stripe.com/api/capital/financing_offers.md) à afficher lors du chargement initial du composant. Par défaut, le composant affiche le financement actif ou le plus récent. | | | `setShowFinancingSelector` | `boolean` | Si « true », affichez le sélecteur de financement sur liste déroulante pour permettre au compte connecté de modifier le financement affiché. | `true` | | `setOnFinancingsLoaded` | `({total: number}) => void` | Le composant a chargé l’historique de financement du compte connecté. | | | `setSupportUrl` | `string` | URL absolue de votre site de support. | `https://support.stripe.com/` | | `setHowCapitalWorksUrl` | `string` | URL absolue d’une page contenant des informations sur le programme Capital. | `https://docs.stripe.com/capital/how-stripe-capital-works` | #### React | Propriété React | Type | Description | Par défaut | Obligatoire ou facultatif | | ----------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ------------------------- | | `defaultFinancingOffer` | `string` | Indiquez l’identifiant de l’[offre de financement](https://docs.stripe.com/api/capital/financing_offers.md) à afficher lors du chargement initial du composant. Par défaut, le composant affiche le financement actif ou le plus récent. | `null` | facultatif | | `showFinancingSelector` | `boolean` | Si « true », affichez le sélecteur de financement sur liste déroulante pour permettre au compte connecté de modifier le financement affiché. | `true` | facultatif | | `onFinancingsLoaded` | `({total: number}) => void` | Le composant a chargé l’historique de financement du compte connecté. | | facultatif | | `supportUrl` | `string` | URL absolue de votre site de support. | `https://support.stripe.com/` | facultatif | | `howCapitalWorksUrl` | `string` | URL absolue d’une page contenant des informations sur le programme Capital. | `https://docs.stripe.com/capital/how-stripe-capital-works` | facultatif | ## Style et personnalisation du composant [Personnalisez les composants intégrés](https://docs.stripe.com/connect/customize-connect-embedded-components.md) afin d’aligner les polices, les couleurs et le style d’interface utilisateur du composant avec l’image de marque de votre plateforme. ## Définir l’état d’affichage Placez le composant de financement sur une page que vos comptes connectés utilisent actuellement pour afficher les informations de reporting sur les paiements et les virements, ou sur une page **Financement** dédiée. Le composant de financement affiche le contenu dynamiquement en fonction de l’état de financement du compte connecté : - **Aucun historique de financement** : Si un compte connecté a une offre, mais qu’il ne l’a pas encore acceptée ou demandée, le composant de financement n’affiche rien. Écoutez l’événement `onFinancingsLoaded` pour afficher un message personnalisé dans le composant de financement pour cet état ou masquer le composant de financement jusqu’à ce que les données de financement soient disponibles. - **Offre en cours de vérification** : une fois qu’un compte connecté éligible accepte et demande une offre de financement, utilisez cet état pour afficher le composant qui montre un suivi de l’état de la demande en attendant l’approbation de l’offre. ## Gérer les erreurs de chargement Après avoir affiché le composant, consultez comment [gérer les erreurs de chargement](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-load-errors) afin de garantir que votre intégration peut gérer correctement les cas où les composants ne se chargent pas. ## Soumettre la composante à l'examen 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](https://docs.stripe.com/capital/testing.md#create-offer), 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. 1. 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). 1. [Soumettre l’aperçu à Stripe](https://form.asana.com/?k=8K51UWmWhttehNFD5qBLdg&d=974470123217835). Après approbation, Stripe vous permet d’utiliser le composant en mode live. ## Optional: Composants intégrés supplémentaires Le composant de financement est l’un des nombreux composants intégrés disponibles pour Capital. Pour en savoir davantage sur les composants intégrés, consultez le guide [Configurer des composants intégrés Capital](https://docs.stripe.com/capital/embedded-component-integration.md). ## See also - [Installer les composants intégrés Capital](https://docs.stripe.com/capital/embedded-component-integration.md)