# Créer des paiements indirects

Créez des paiements sur votre compte de plateforme, percevez les frais et transférez immédiatement les fonds restants vers vos comptes connectés.

Créez des *paiements indirects* lorsque les clients effectuent des transactions sur votre plateforme pour des produits ou des services proposés par vos comptes connectés et transférez immédiatement des fonds vers vos comptes connectés. Avec ce type de paiement :

- Vous créez un paiement sur le compte de votre plateforme.
- Vous déterminez si ces fonds sont à transférer partiellement ou en totalité dans votre compte connecté.
- Le solde de votre compte sera débité du coût de la commission Stripe, des remboursements et des contestations de paiement.

Ce type de paiement est le mieux adapté aux places de marché telles qu’Airbnb (location de logements) ou Lyft (covoiturage).

À [quelques exceptions près](https://docs.stripe.com/connect/account-capabilities.md#transfers-cross-border), si votre plateforme et un compte connecté ne se trouvent pas dans la même région, vous devez indiquer le compte connecté comme [entité de règlement](https://docs.stripe.com/connect/destination-charges.md#settlement-merchant) en utilisant le paramètre `on_behalf_of` sur le [Payment Intent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-on_behalf_of)  , ou `payment_intent_data.on_behalf_of` sur la [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-on_behalf_of)

Nous vous recommandons d’utiliser les paiements indirects pour les comptes connectés qui n’ont pas accès au Dashboard Stripe complet.

Créez une intégration de paiement personnalisée en intégrant des composants d’interface utilisateur sur votre site à l’aide de [Stripe Elements](https://docs.stripe.com/payments/elements.md). Le code côté client et côté serveur permet de créer un formulaire de paiement qui accepte différents moyens de paiement. [Comparez les différents types d’intégration proposés par Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

#### Effort d'intégration
Complexity: 3/5
#### Type d'intégration

Combinez des composants d’interface utilisateur dans un tunnel de paiement personnalisé

#### Personnalisation de l'interface utilisateur

Personnalisation au niveau CSS avec l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md)

Tout d’abord, [inscrivez-vous](https://dashboard.stripe.com/register) pour créer un Compte Stripe.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Créer un PaymentIntent [Côté serveur]

Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus.

Vue d'ensemble de l'intégration des paiements illustrée par ce document. (See full diagram at https://docs.stripe.com/connect/destination-charges)

```text
[Client] -- Renvoient vers la page de paiement --> [Client]
[Client] -- Envoient les informations relatives à la commande --> [Serveur]
[Serveur] -- POST /v1/payment_intents --> [Stripe]
[Stripe] -- payment_intent.created: Crée un PaymentIntent --> [Stripe]
[Stripe] -- Renvoient un nouveau PaymentIntent --> [Serveur]
[Serveur] -- Renvoient le client_secret du PaymentIntent --> [Client]
[Client] -- Fournissent les informations de facturation et finalisent le paiement --> [Client]
[Client] -- Appellent stripe.confirmPayment() avec l’instance d’Elements --> [Stripe]
[Stripe] -- Exécution d’une tentative de paiement (redirection éventuelle vers le site du partenaire) --> [Stripe]
[Stripe] -- Redirige l’utilisateur vers la page return_url --> [Client]
[Client] -- Affichent l’état du paiement --> [Client]
[Stripe] -- Envoie un événement webhook avec l’état du paiement --> [Serveur]
```

Les [moyens de paiement présentés aux clients](https://docs.stripe.com/connect/manage-payment-methods.md) lors du processus de paiement sont également inclus dans le `PaymentIntent`. Vous pouvez laisser Stripe récupérer automatiquement les moyens de paiement à partir des paramètres de votre Dashboard, ou les lister manuellement.

À moins que votre intégration n’exige une option basée sur du code pour proposer des moyens de paiement, ne listez pas les moyens de paiement manuellement. Stripe évalue la devise, les restrictions des moyens de paiement et d’autres paramètres pour déterminer la liste des moyens de paiement pris en charge.

Stripe donne la priorité aux moyens de paiement qui peuvent contribuer à augmenter la conversion et qui sont les plus pertinents pour la devise et le lieu du client. Stripe masque les moyens de paiement moins prioritaires dans un menu de débordement.

#### Gérer les moyens de paiement dans le Dashboard

Créez un `PaymentIntent` sur votre serveur avec un montant et une devise activés. La spécification du paramètre `automatic_payment_methods` est facultative, car sa valeur par défaut est true. Stripe identifie les moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1000 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d application_fee_amount=123 \
  -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}"
```

#### Répertorier manuellement les moyens de paiement

Créez un `PaymentIntent` sur votre serveur avec un montant, une devise et la liste des types de moyens de paiement que vous souhaitez proposer. Définissez toujours le montant à débiter côté serveur, soit un environnement sécurisé, plutôt que côté client. De cette façon, un client malveillant ne pourra pas fixer son propre tarif.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=eur \
  -d "allowed_payment_method_types[]=bancontact" \
  -d "allowed_payment_method_types[]=card" \
  -d "allowed_payment_method_types[]=eps" \
  -d "allowed_payment_method_types[]=ideal" \
  -d "allowed_payment_method_types[]=p24" \
  -d "allowed_payment_method_types[]=sepa_debit" \
  -d application_fee_amount=123 \
  -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}"
```

Choisissez la devise en fonction des moyens de paiement que vous souhaitez proposer. Certains moyens de paiement prennent en charge plusieurs devises et pays. Cet exemple utilise Bancontact, les cartes bancaires, EPS, iDEAL, Przelewy24 et le prélèvement automatique SEPA.

> Chaque moyen de paiement doit prendre en charge la devise transmise dans le PaymentIntent et le pays où votre entreprise est établie. Pour en savoir plus, consultez les [options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md).

### Récupérer la clé secrète du client

Le PaymentIntent contient une *clé secrète* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

#### Application monopage

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction `fetch` du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client&nbsp;:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client&nbsp;:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Rendu côté serveur

Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur.

Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent&nbsp;:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## Collecter les informations de paiement [Côté client]

Collectez les informations de paiement du client avec le [Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element.md). Le Payment&nbsp;Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment&nbsp;Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment&nbsp;Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’iframe doit être défini sur égal à `"payment *"`.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’[activer](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels.

#### HTML + JS

### Configurer Stripe.js

Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans une offre groupée ni en héberger de copie.

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement&nbsp;:

```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

### Ajouter le Payment Element à votre page de paiement

Le composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement&nbsp;:

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

Lors du chargement du formulaire précédent, créez une instance du composant Payment&nbsp;Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create), transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) définie à l’étape précédente dans les `options`&nbsp;:

Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

```

#### React

### Configurer Stripe.js

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm&nbsp;:

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

### Ajouter le fournisseur Elements à votre page de paiement et le configurer

Pour utiliser le composant Element Payment, enveloppez le composant de votre page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez la `Promise` renvoyée au fournisseur `Elements`. Transmettez également la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’étape précédente en tant qu’`options` au fournisseur `Elements`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Ajouter le composant Element Payment

Utilisez le composant `PaymentElement` pour créer votre formulaire&nbsp;:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Stripe&nbsp;Elements est un ensemble de composants d’interface utilisateur modulables. Pour personnaliser davantage votre formulaire ou collecter d’autres informations client, consultez la [documentation relative à Elements](https://docs.stripe.com/payments/elements.md).

Le composant Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de renseigner toutes les informations de paiement nécessaires.

### Personnaliser l’apparence

Personnalisez le Payment&nbsp;Element pour qu’il corresponde à l’apparence de votre site en ajoutant l’[objet Appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans `options` lors de la création du fournisseur `Elements`.

### Collecter les adresses

Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez&nbsp;:

- Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.

### Demander un token de marchand Apple Pay

Si vous avez configuré votre intégration pour [accepter les paiements Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), nous vous recommandons de configurer l’interface Apple Pay afin de renvoyer un token de marchand pour activer les transactions initiées par le marchand (MIT). [Demandez le type de token de marchand approprié](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) dans le composant Payment Element.

## Envoyer le paiement à Stripe [Côté client]

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour effectuer le paiement à l’aide des informations du composant Payment&nbsp;Element. Ajoutez un paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre `return_url`. L’utilisateur sera immédiatement redirigé vers la page `return_url` après un paiement réussi par carte.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez assigner au paramètre [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) la valeur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

Pour appeler [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#useelements-hook).

Si vous préférez les composants de classe traditionnels aux hooks, vous pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#elements-consumer).

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;
```

Veillez à ce que le paramètre `return_url` corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page `return_url`, nous fournissons les paramètres de requête d’URL suivants&nbsp;:

| Paramètre | Description |
| --- | --- |
| `payment_intent` | L’identifiant unique du `PaymentIntent`. |
| `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. |

> Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine `stripe.com` à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble.

Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’[état du PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) pour déterminer les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL `return_url`&nbsp;; ils seront conservés tout au long du processus de redirection.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

```jsx
import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

### Collecter les informations du wallet

Si vous acceptez Apple Pay ou Google Pay, appelez [elements.submit()](https://docs.stripe.com/js/elements/submit) au début de votre gestionnaire de soumission. Cela déclenche la validation du formulaire et affiche la page de paiement native pour que votre client puisse autoriser le paiement.

#### HTML + JS

```javascript
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Confirm the payment
});
```

#### React

```jsx
const handleSubmit = async (event) => {
  event.preventDefault();

  if (!stripe || !elements) {
    // Stripe.js hasn't yet loaded.
    // Make sure to disable form submission until Stripe.js has loaded.
    return;
  }

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Confirm the payment
};
```

## Gérer les événements post-paiement [Côté serveur]

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide consacré aux webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Certains clients malintentionnés peuvent d’autre part tenter de manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule et même intégration.

En plus de l’événement `payment_intent.succeeded`, nous vous recommandons de gérer ces autres événements lorsque vous encaissez des paiements à l’aide de l’Element Payment&nbsp;:

| Événement | Description | Action |
| --- | --- | --- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Envoyé lorsqu’un client effectue un paiement avec succès. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Envoyé lorsqu’un client initie un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client initie un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`. | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, vous pourrez traiter la commande sans attendre que le paiement soit effectué. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé lorsqu’un client effectue une tentative de paiement qui se solde par un échec. | Si un paiement passe de l’état `processing` à `payment_failed`, proposez au client de retenter le paiement. |

## Tester l'intégration

#### Cartes bancaires

| Numéro de carte | Scénario | Méthode de test |
| --- | --- | --- |
| 4242424242424242 | Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| 4000002500003155 | Le paiement par carte bancaire requiert une *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| 4000000000009995 | La carte est refusée avec un code de refus de type `insufficient_funds`. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| 6205500000000000004 | La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19&nbsp;chiffres. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |

#### Portefeuilles

| Moyen de paiement | Scénario | Méthode de test |
| --- | --- | --- |
| Alipay | Le montant dû est réglé via un moyen de paiement avec redirection et à [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page qui s’affiche. |

#### Virements avec redirection bancaire

| Moyen de paiement | Scénario | Méthode de test |
| --- | --- | --- |
| Bancontact, EPS, iDEAL et Przelewy24 | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification immédiate. | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page qui s’affiche. |
| Pay by Bank | Le montant dû est réglé via un moyen de paiement avec redirection et à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page qui s’affiche. |
| Pay by Bank | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification différée. | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page qui s’affiche. |
| BLIK | Les paiements BLIK échouent de diverses manières&nbsp;: échecs immédiats (par exemple, code expiré ou non valide), erreurs différées (refus de la banque) ou expirations du délai (le client n’a pas répondu à temps). | Utiliser des modèles d’e-mail pour [simuler les différents échecs.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) |

#### Prélèvements bancaires

| Moyen de paiement | Scénario | Méthode de test |
| --- | --- | --- |
| Prélèvement automatique BECS | Le montant dû est réglé par prélèvement automatique BECS. | Remplissez le formulaire à l’aide du numéro de compte `900123456` et du BSB `000000`.La confirmation de la demande de PaymentIntent passe d’abord à l’état `processing`, puis à l’état `succeeded` trois minutes plus tard. |
| Prélèvement automatique BECS | Le paiement de votre client échoue avec un code d’erreur `account_closed`. | Remplissez le formulaire à l’aide du numéro de compte `111111113` et du BSB `000000`. |
| Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement automatique SEPA. | Remplissez le formulaire à l’aide du numéro de compte `AT321904300235473204`. Le PaymentIntent confirmé passe d’abord à l’état processing, puis à l’état succeeded trois&nbsp;minutes plus tard. |
| Prélèvement automatique SEPA | L’intention de paiement de votre client passe de l’état `processing` à l’état `requires_payment_method`. | Remplissez le formulaire à l’aide du numéro de compte `AT861904300235473202`. |

#### Coupons

| Moyen de paiement | Scénario | Méthode de test |
| --- | --- | --- |
| Boleto, OXXO | Le montant dû est réglé par coupon Boleto ou OXXO. | Sélectionnez Boleto ou OXXO comme moyen de paiement, puis envoyez le paiement. Fermez la boîte de dialogue qui s’affiche. |

Consultez la section consacrée aux [tests](https://docs.stripe.com/testing.md) pour obtenir des informations supplémentaires sur la manière de tester votre intégration.

## Percevoir des frais

Lorsqu’un paiement est traité, plutôt que de transférer le montant total de la transaction vers un compte connecté, vous pouvez décider que votre plateforme prélève une partie du montant de la transaction sous forme de frais. Vous pouvez définir la tarification des frais de deux manières différentes&nbsp;:

- Utilisez les [outils de tarification de la plateforme](https://docs.stripe.com/connect/platform-pricing-tools.md) pour définir des règles de tarification des commissions de plateforme et les tester. Cette fonctionnalité no-code du Dashboard Stripe n’est actuellement disponible que pour les plateformes responsables du paiement des frais Stripe.

- Définissez vos règles de tarification en interne, en spécifiant les frais directement dans un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) à l’aide du paramètre [application_fee_amount](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-application_fee_amount) ou du paramètre [transfer_data[amount]](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-transfer_data-amount). Les frais définis avec cette méthode remplacent la logique tarifaire spécifiée dans les outils de tarification de la plateforme.

#### application_fee_amount

Lorsque vous créez des paiements avec un paramètre `application_fee_amount`, la totalité du montant du paiement est transférée de la plateforme vers le compte `transfer_data[destination]` directement après la capture du paiement. Le montant des commissions, `application_fee_amount` (qui ne peut dépasser le montant du paiement) est ensuite de nouveau transféré, du compte vers la plateforme.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1000 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d application_fee_amount=123 \
  -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}"
```

Une fois les frais de plateforme perçus, un objet [Commission de la plateforme](https://docs.stripe.com/api/application_fees/object.md) est créé. Vous pouvez afficher la liste de ces frais dans le [Dashboard](https://dashboard.stripe.com/connect/application_fees), via la section [frais d’application](https://docs.stripe.com/api/application_fees/list.md), ou dans [Sigma](https://docs.stripe.com/data/how-sigma-works.md). Vous pouvez également utiliser la propriété `amount` de l’objet de frais de plateforme pour générer des rapports détaillés par poste.

Lorsque vous utilisez `application_fee_amount`, il convient de savoir les choses suivantes&nbsp;:

- Le `application_fee_amount` est plafonné au montant total de la transaction.
- Le montant `application_fee_amount` est toujours calculé dans la même devise que la transaction.
- La commission de la plateforme *est réglée* (When funds are available in your Stripe balance) dans la même devise que la devise de règlement du compte connecté. Pour les paiements transfrontaliers par destination, cela peut [différer de la devise de règlement de votre plateforme](https://docs.stripe.com/connect/currencies/fx-quotes-api.md#destination-charges-without-on-behalf-of).
- Votre plateforme paie les frais Stripe après le transfert du `application_fee_amount` dans votre compte.
- Aucune commission Stripe supplémentaire n’est appliquée au montant.
- Votre plateforme peut utiliser le reporting intégré des commissions de plateforme pour rapprocher les [commissions encaissées](https://dashboard.stripe.com/connect/application_fees).
- Dans les Dashboards ou les composants hébergés par Stripe, tels que le [composant d’informations de paiement](https://docs.stripe.com/connect/supported-embedded-components/payment-details.md), votre compte connecté peut afficher à la fois le montant total et le montant des commissions de la plateforme.

### Flux de fonds avec paiements indirects

Avec le code ci-dessus, le montant total du paiement (10&nbsp;USD) est ajouté au solde en attente du compte connecté. La somme correspondant au paramètre `application_fee_amount` (1,23&nbsp;USD) est déduite du montant du paiement et transférée sur votre plateforme. Les frais Stripe (0,59&nbsp;USD) sont déduits du solde du compte de votre plateforme. Le montant de la commission de plateforme moins les frais Stripe (1,23&nbsp;USD - 0,59&nbsp;USD = 0,64&nbsp;USD) reste dans le solde du compte de votre plateforme.
![Mouvements de fonds pour les paiements indirects](https://b.stripecdn.com/docs-statics-srv/assets/destination_charge_app_fee.c9ef81298155b38f986df02d0efa9167.png)

Le montant `application_fee_amount` devient disponible selon la fréquence normale de transfert sur le compte la plateforme, tout comme les fonds provenant des paiements ordinaires Stripe.

#### transfer_data[amount]

Le paramètre `transfer_data[amount]` est un nombre entier positif correspondant au montant du paiement à transférer vers `transfer_data[destination]`. Vous déduisez les commissions de votre plateforme du montant du paiement puis transmettez le résultat de ce calcul sous le paramètre `transfer_data[amount]`.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1000 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "transfer_data[amount]=877" \
  -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}"
```

Lorsque vous utilisez `transfer_data[amount]`, les conditions suivantes s’appliquent&nbsp;:

- Le montant est plafonné au montant total de la transaction.
- Le montant est toujours calculé dans la même devise que la transaction.
- Le montant *est réglé* (When funds are available in your Stripe balance) dans [la même devise que la devise de règlement de votre plateforme](https://docs.stripe.com/connect/currencies/fx-quotes-api.md#destination-charges-without-on-behalf-of).
- Dans les tableaux de bord ou composants hébergés par Stripe, tels que le Dashboard Stripe ou le Dashboard Express, votre compte connecté ne peut pas afficher le montant total du paiement. Il affiche uniquement le montant transféré.
- Votre plateforme paie séparément les frais Stripe associés au paiement.
- Aucune commission Stripe supplémentaire n’est appliquée au montant.
- Pour [calculer les frais](https://docs.stripe.com/data/query-all-fees-data.md#fees-paid-by-connected-accounts) après la création d’un paiement, par exemple à des fins de reporting, [récupérez le PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) et soustrayez la valeur `transfer_data[amount]` du `amount` sur le ce dernier.

Envisagez d’utiliser le [montant des commissions de plateforme](https://docs.stripe.com/connect/destination-charges.md#application-fee) pour simplifier les rapports en créant des commissions explicites qui sont liés au paiement.

### Mouvements de fonds

Avec le code ci-dessus, le `amount` du paiement (10,00&nbsp;USD) est ajouté au solde du compte de la plate-forme. Le `transfer_data[amount]` (8,77&nbsp;USD) est soustrait du solde du compte de la plateforme et ajouté au solde en attente du compte Connect. Le `amount` du paiement (10,00&nbsp;USD) moins le `transfer_data[amount]` (8,77&nbsp;USD) moins les frais de plateforme (sur le `amount` du paiement), pour un montant net de 0,64&nbsp;USD, reste dans le solde en attente du compte de la plateforme.
![](https://b.stripecdn.com/docs-statics-srv/assets/destination_charge_amount.46cd59f6496607d68020b546aa1af85f.png)

Le `transfer_data[amount]` devient disponible selon la fréquence normale de transfert sur le compte connecté, tout comme les fonds provenant des paiements ordinaires Stripe.

Les plateformes peuvent savoir le montant qu’elles retiennent des paiements `transfer_data[amount]` en consultant la colonne «&nbsp;Destination Platform Fee&nbsp;» dans l’export de l’historique du solde.

## Sélectionner l’entité de règlement

Le choix de l’entité de règlement dépend des [fonctionnalités](https://docs.stripe.com/connect/account-capabilities.md) définies sur un compte et de la manière dont un paiement est créé. L’entité de règlement détermine quelles seront les informations à utiliser pour effectuer le paiement. Elles comprennent le libellé du relevé (celui de la plateforme ou celui du compte connecté) affiché sur la carte de crédit du client ou le relevé bancaire pour ce paiement.

Préciser l’entité de règlement vous permet d’être plus explicite concernant les personnes pour lesquelles les paiements doivent être créés. Par exemple, certaines plateformes préfèrent être l’entité de règlement parce que le client final communique directement avec leur plateforme (comme dans le cas des plateformes à la demande). Cependant, certaines plateformes ont des comptes connectés qui communiquent directement avec les clients finaux (par exemple, une vitrine sur une plateforme d’e-commerce). Dans ce scénario, il est plus logique que le compte connecté soit l’entité de règlement.

Vous pouvez définir le paramètre `on_behalf_of` sur l’ID d’un compte connecté pour faire de ce compte l’entité de règlement pour le paiement. Lorsque vous utilisez `on_behalf_of`&nbsp;:

- Les paiements sont *réglés* (When funds are available in your Stripe balance) dans le pays et dans la *devise de règlement* (The settlement currency is the currency your bank account uses) du compte connecté.
- La structure des frais appliquée est celle du pays du compte connecté.
- Le libellé de relevé bancaire du compte connecté apparaît sur le relevé de carte bancaire du client.
- Si le compte connecté relève d’un autre pays que celui de la plateforme, l’adresse et le numéro de téléphone du compte connecté sont affichés sur le relevé de carte bancaire du client.
- Le nombre de jours durant lesquels un [solde en attente](https://docs.stripe.com/connect/account-balances.md) est bloqué avant d’être versé dépend du paramètre [delay_days](https://docs.stripe.com/api/accounts/create.md#create_account-settings-payouts-schedule-delay_days) du compte connecté.

> #### API Accounts v2
> 
> Vous ne pouvez pas utiliser l’API Accounts v2&nbsp;pour gérer les paramètres de virement. Utilisez l’API Accounts v1.

Si le paramètre `on_behalf_of` est ignoré, la plateforme est l’entreprise de référence pour le paiement.

> Le paramètre `on_behalf_of` est uniquement pris en charge pour les comptes connectés disposant d’une fonctionnalité de paiement comme [card_payments](https://docs.stripe.com/connect/account-capabilities.md#card-payments). Les comptes soumis au [contrat de service pour les bénéficiaires](https://docs.stripe.com/connect/service-agreement-types.md#recipient) ne peuvent pas demander `card_payments` ou d’autres fonctionnalités de paiement.

## Émettre des remboursements

Si vous utilisez l’API Payment Intents, les remboursements doivent être effectués sur [le moyen de paiement le plus récent créé](https://docs.stripe.com/payments/payment-intents/verifying-status.md#identifying-charges).

Les paiements créés sur le compte de la plateforme peuvent être remboursés en utilisant la clé secrète du compte de la plateforme. Lorsque vous remboursez un paiement comportant un `transfer_data[destination]`, par défaut le compte de destination garde les fonds transférés, laissant le compte de la plateforme couvrir le solde négatif du remboursement. Pour récupérer les fonds du compte connecté afin de couvrir le remboursement, définissez le paramètre `reverse_transfer` sur `true` lors de la création du remboursement&nbsp;:

```curl
curl https://api.stripe.com/v1/refunds \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "charge={{CHARGE_ID}}" \
  -d reverse_transfer=true
```

Par défaut, la totalité du paiement est remboursée, mais vous pouvez créer un remboursement partiel en définissant le paramètre `amount` sur un nombre entier positif.

Si le remboursement entraîne le remboursement de la totalité du paiement, la totalité du transfert est annulée. Dans le cas contraire, un montant proportionnel du transfert est annulé.

### Rembourser les commissions de la plateforme

Lorsque vous remboursez un paiement comportant une commission de la plateforme, par défaut le compte de la plateforme garde les fonds correspondant à la commission. Pour rediriger ces fonds vers le compte connecté, définissez le paramètre [refund_application_fee](https://docs.stripe.com/api/refunds/create.md#create_refund-refund_application_fee) sur `true` lors de la création du remboursement&nbsp;:

```curl
curl https://api.stripe.com/v1/refunds \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "charge={{CHARGE_ID}}" \
  -d reverse_transfer=true \
  -d refund_application_fee=true
```

Si vous remboursez la commission de la plateforme pour un paiement indirect, vous devez également annuler le transfert. Si le remboursement se traduit par le remboursement de la totalité du paiement, le remboursement inclut également la totalité de la commission. Dans le cas contraire, vous remboursez un montant proportionnel de la commission.

Vous pouvez également indiquer la valeur **false** pour `refund_application_fee` et rembourser la commission de la plateforme séparément [via l’API](https://docs.stripe.com/api.md#create_fee_refund).

### Remboursements ayant échoué

Si un remboursement échoue ou si vous [l’annulez](https://docs.stripe.com/refunds.md#cancel-refund), le montant du remboursement ayant échoué est recrédité sur le solde Stripe de votre compte de plateforme. Créez un [transfert](https://docs.stripe.com/connect/separate-charges-and-transfers.md#create-transfer) pour envoyer les fonds vers le compte connecté, le cas échéant.

## Gérer les litiges

Pour les paiements indirects, avec ou sans le paramètre `on_behalf_of`, Stripe débite le montant du litige et les frais de votre compte de plateforme.

Nous vous recommandons de configurer [un webhook](https://docs.stripe.com/webhooks.md) pour écouter les [événements créés par un litige](https://docs.stripe.com/api/events/types.md#event_types-charge.dispute.created). Dans ce cas, vous pouvez tenter de récupérer les fonds auprès du compte connecté en annulant le transfert dans le [Dashboard](https://dashboard.stripe.com/test/transfers) ou en [créant une annulation de transfert](https://docs.stripe.com/api/transfer_reversals/create.md).

Lorsque le compte connecté a un solde négatif, Stripe tente de [débiter son compte externe](https://docs.stripe.com/connect/account-balances.md#automatically-debit-connected-accounts) si `debit_negative_balances` est défini sur `true`.

Si vous contestez le litige et obtenez gain de cause, vous pouvez renvoyer le paiement précédemment annulé au compte connecté. Si le solde de votre plateforme est insuffisant, le transfert échoue. Pour éviter tout problème lié aux soldes insuffisants, [ajoutez des fonds à votre solde Stripe](https://docs.stripe.com/get-started/account/add-funds.md).

> Le retransfert d’une annulation antérieure est soumis à des [restrictions sur les transferts transfrontaliers](https://docs.stripe.com/connect/account-capabilities.md#transfers-cross-border). Cela signifie que dans certains cas, il pourra être impossible de rembourser votre compte connecté. Dans ce cas, attendez que plutôt que le litige soit perdu avant de recouvrer les fonds de paiements indirects `on_behalf_of` par transfert transfrontalier.

## Échecs de paiement asynchrones

Pour les paiements indirects utilisant des moyens de paiement asynchrones (comme ACH Debit ou SEPA Debit), un délai existe entre l’initiation du paiement et la confirmation des fonds. Pendant cette période, la charge et le transfert vers le solde en attente du compte connecté restent tous deux à l’état pending.

Si le paiement asynchrone échoue, Stripe annule automatiquement le transfert. Aucun fonds n’est transféré définitivement vers le compte connecté.

## Transferts ignorés en raison de l’état du compte

Pour les paiements utilisant des moyens de paiement asynchrones (comme l’ACH ou le prélèvement SEPA), il y a un délai entre le moment où le paiement est autorisé et le moment où les fonds sont disponibles. Pendant ce temps, si le compte de destination perd la [fonctionnalité de transfert](https://docs.stripe.com/connect/account-capabilities.md#supported-capabilities) requise ou est fermé, Stripe ne peut pas effectuer le transfert tel qu’il a été demandé à l’origine.

Lorsque Stripe tente de créer un transfert, mais n’y parvient pas à cause d’une perte de fonctionnalité ou d’une suppression de compte, nous passons la création du transfert et les fonds restent sur le solde de votre plateforme.

Pour détecter les transferts ignorés, écoutez l’événement de webhook `charge.updated`. Si la valeur de [transfer_data](https://docs.stripe.com/api/charges/object.md#charge_object-transfer_data) sur l’objet Charge est `null`, cela indique un transfert ignoré.

Lorsque vous détectez un transfert ignoré, vous pouvez créer un transfert une fois le problème résolu.

## Composants intégrés Connect

Les paiements indirects sont pris en charge par les [ composants intégrés de Connect](https://docs.stripe.com/connect/get-started-connect-embedded-components.md). En utilisant le [composant de paiement intégré](https://docs.stripe.com/connect/supported-embedded-components/payments.md), vous pouvez permettre à vos comptes connectés de voir les informations de paiement depuis votre site. Pour les paiements indirects avec `on_behalf_of`, vous pouvez utiliser la fonctionnalité [destination_on_behalf_of_charge_management](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-destination_on_behalf_of_charge_management) pour permettre à vos comptes connectés de voir des informations supplémentaires, de gérer les remboursements, les litiges et de permettre la capture des paiements.

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.

Les composants suivants affichent des informations pour les paiements indirects&nbsp;:

- [Composant de paiement](https://docs.stripe.com/connect/supported-embedded-components/payments.md)&nbsp;: Affiche tous les paiements et litiges d’un compte.

- [Informations des paiements](https://docs.stripe.com/connect/supported-embedded-components/payment-details.md)&nbsp;: Affiche tous les paiements et litiges d’un compte.

- [Composant de la liste des litiges](https://docs.stripe.com/connect/supported-embedded-components/disputes-list.md)&nbsp;: Affiche tous les litiges d’un compte.

- [Litiges pour un composant de paiement](https://docs.stripe.com/connect/supported-embedded-components/disputes-for-a-payment.md)&nbsp;: Affiche les litiges pour un seul paiement spécifié. Vous pouvez l’utiliser pour inclure la fonctionnalité de gestion des litiges sur une page avec votre interface utilisateur.

## See also

- [Gérer plusieurs devises](https://docs.stripe.com/connect/currencies.md)
- [Libellés de relevé bancaire avec Connect](https://docs.stripe.com/connect/statement-descriptors.md)