Créer des paiements directs

Créez des paiements directement sur le compte connecté et prélevez des frais.

Créez des paiements directs lorsque des clients effectuent des transactions directement avec un compte connecté, souvent sans connaître l’existence de votre plateforme. Grâce aux paiements directs :

Le paiement apparaît comme un débit sur le compte connecté, et non sur le compte de votre plateforme.
Le solde du compte connecté augmente à chaque prélèvement.
Le solde de votre compte augmente avec les commissions de la plateforme sur chaque paiement.

Ce type de paiement est le mieux adapté aux plateformes SaaS. Par exemple, Shopify fournit des outils pour créer des vitrines en ligne et Thinkific permet aux enseignants de proposer des cours en ligne.

Remarque

Nous vous recommandons d’utiliser les paiements directs pour les comptes connectés qui ont accès à l’intégralité du Dashboard Stripe.

Web

iOS

Android

React Native

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. 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.

Pour voir le fonctionnement de Link avec un utilisateur récurrent, saisissez l'adresse e-mail demo@stripe.com. Pour voir le fonctionnement de Link avec une nouvelle inscription, saisissez toute autre adresse e-mail et remplissez le reste du formulaire. Cette démo affiche uniquement Google Pay ou Apple Pay si vous disposez d'une carte active sur l'un de ces portefeuilles.

Effort d'intégration

Code

Type d'intégration

Combiner les composants de l’interface utilisateur dans un tunnel de paiement personnalisé

Personnalisation de l'interface utilisateur

Personnalisation au niveau CSS avec l’API Appearance

Tout d’abord, inscrivez-vous pour créer un Compte Stripe.

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

Créer un PaymentIntent
Côté serveur

Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus.

Les moyens de paiement présentés aux clients lors du processus de paiement sont également inclus dans le PaymentIntent. Vous pouvez laisser Stripe extraire automatiquement les moyens de paiement des paramètres du Dashboard, ou bien les répertorier manuellement.

À moins que votre intégration ne nécessite un 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 dresser la liste des moyens de paiement pris en charge. Stripe privilégie les moyens de paiement qui contribuent à augmenter la conversion et qui sont les plus pertinents par rapport à la devise et à l’emplacement du client. Stripe masque les moyens de paiement moins prioritaires dans un menu de débordement.

Créez un PaymentIntent sur votre serveur avec un montant et une devise. Dans la dernière version de l’API, la spécification du paramètre automatic_payment_methods est facultative car Stripe active ses fonctionnalités par défaut. Vous pouvez gérer les moyens de paiement à partir du Dashboard. Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement.

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

Le PaymentIntent contient une clé secrète à 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.

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 :

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

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

Collecter les informations de paiement
Côté client

Collectez les informations de paiement du client avec le Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment 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 Element à l’intérieur d’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 de l’iframe doit être "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 lorsque vous souhaitez commencer à accepter des paiements réels.

Configurer Stripe.js

Le Payment Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant au head votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme aux normes PCI. N’incluez pas le script dans un lot et n’en hébergez pas de copie.

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

Sur votre page de paiement, créez une instance de Stripe avec le code JavaScript suivant :

checkout.js
// Initialize Stripe.js with the same connected account ID used when creating
// the PaymentIntent.
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'

});

Ajouter Stripe Elements et Payment Element à votre page de paiement

Le PaymentElement doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement.

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Pay</button>
</form>

Une fois que le formulaire a été chargé, créez une instance du Payment Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance Elements, transmettez la clé secrète du client obtenue à l’étape précédente en tant qu’option.

La clé secrète du client doit être manipulée avec précaution car elle peut servir à finaliser un paiement. Ne l’enregistrez pas, ne l’intégrez pas dans une URL et ne la dévoilez à personne d’autre qu’au client.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with the Appearance API
  appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form using the client secret
const elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");

Le Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Ce formulaire recueille automatiquement toutes les informations nécessaires pour le moyen de paiement sélectionné par le client. Vous pouvez personnaliser l’apparence du Payment Element pour qu’il corresponde au design de votre site lorsque vous configurez l’objet Elements.

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour effectuer le paiement à l’aide des informations du composant Payment Element. Ajoutez un paramètre 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 la valeur if_required. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

checkout.js
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`.
  }
});

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 :

Paramètre	Description
`payment_intent`	L’identifiant unique du `PaymentIntent`.
`payment_intent_client_secret`	La clé secrète du client de l’objet `PaymentIntent`.

Mise en garde

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 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 ; ils seront conservés tout au long du processus de redirection.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

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

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks 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 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 :

Événement	Description	Action
payment_intent.succeeded	Envoyé lorsqu’un client effectue un paiement avec succès.	Envoyez au client une confirmation de commande et traitez sa commande.
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	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

Numéro de carte	Scénario	Méthode de test
	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.
	Le paiement par carte bancaire requiert une 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.
	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.
	La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19 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.

Consultez la section consacrée aux tests pour obtenir des informations supplémentaires sur la manière de tester votre intégration.

FacultatifActiver d'autres moyens de paiement

Encaisser des commissions

Lorsqu’un paiement est traité, votre plateforme peut prélever une partie de la transaction sous forme de commissions de plateforme. Vous pouvez définir le tarif des commissions de plateforme de deux manières :

Utilisez les outils de tarification de la plateforme pour définir des règles de tarification 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 commissions de plateforme directement dans un PaymentIntent. Les frais définis avec cette méthode remplacent la logique tarifaire spécifiée dans les outils de tarification de la plateforme.

Votre plateforme peut accepter une commission de plateforme avec les limites suivantes :

La valeur de application_fee_amount doit être positive et inférieure au montant du paiement. La commission de plateforme collectée est plafonnée au montant capturé du paiement.
Aucune commission Stripe supplémentaire n’est appliquée à la commission de la plateforme.
Conformément aux lois et réglementations du Brésil, les plateformes situées en dehors du Brésil comportant des comptes connectés brésiliens ne pourront pas prélever de commission de plateforme par le biais de Stripe.
La devise de application_fee_amount dépend de quelques facteurs de plusieurs devises.

L’opération sur solde du paiement inclut une répartition détaillée des commissions de la plateforme et des frais Stripe. Pour faciliter la génération des rapports, un objet Application Fee est créé après le prélèvement des commissions de la plateforme. Utilisez la propriété amount sur l’objet Application Fee pour créer des rapports. Vous pouvez ensuite accéder à ces objets à partir de l’endpoint Application Fees.

Les commissions de la plateforme reçues sont ajoutées au solde disponible de votre compte à la même fréquence que les fonds issus des paiements Stripe réguliers. Les commissions de la plateforme peuvent être affichées dans la section Frais perçus du Dashboard.

Mise en garde

Par défaut, les commissions de plateforme pour les paiements directs sont créées de façon asynchrone. Si vous développez l’objet application_fee dans une demande de création de paiement, la commission de plateforme est créée de façon synchrone dans le cadre de cette demande. Ne développez l’objet application_fee que si cela est nécessaire, car cela augmente la latence de la demande.

Pour accéder aux objets des commissions de la plateforme pour les commissions créées de façon asynchrone, visualisez l’événement webhook application_fee.created.

Mouvement de fonds avec frais

Lorsque vous indiquez une commission de plateforme pour un paiement, le montant de la commission est transféré vers le compte Stripe de votre plateforme. Lorsque vous traitez un paiement directement depuis le compte connecté, le montant du paiement, moins les frais Stripe et la commission de la plateforme, est versé sur le compte connecté.

Par exemple, si vous effectuez un paiement de 10 USD avec une commission de la plateforme de 1,23 USD (comme dans l’exemple précédent), le montant de cette commission est transféré sur le compte de votre plateforme. Le compte connecté reçoit directement la somme de 8,18 USD (10 USD - 1,23 USD - 0,59 USD, en cas de facturation de frais Stripe standard pour les États-Unis).

Mouvements de fonds pour un paiement avec commission de plateforme

Si vous traitez des paiements dans plusieurs devises, consultez la rubrique sur la manière dont les devises sont traitées dans Connect.

Effectuer des remboursements

De la même façon que les plateformes peuvent créer des paiements sur les comptes connectés, elles peuvent également créer des remboursements. Créez un remboursement à l’aide de la clé secrète de votre plateforme en étant identifié avec un compte connecté.

Les commissions de la plateforme ne sont pas automatiquement remboursées lors d’un remboursement. Votre plateforme doit explicitement rembourser la commission de la plateforme, car dans le cas contraire, le compte connecté (le compte sur lequel le paiement a été créé) perd ce montant. Vous pouvez rembourser les commissions de la plateforme en indiquant la valeur true pour refund_application_fee dans la demande de remboursement :

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é de la commission de plateforme est remboursée. Dans le cas contraire, un montant proportionnel de la commission de la plateforme est remboursé. Vous pouvez également indiquer la valeur false pour refund_application_fee et rembourser la commission de la plateforme séparément.

Créer des paiements directs

Créez des paiements directement sur le compte connecté et prélevez des frais.

Remarque

Effort d'intégration

Type d'intégration

Personnalisation de l'interface utilisateur

Créer un PaymentIntentCôté serveur

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

Collecter les informations de paiementCôté client

Configurer Stripe.js

Ajouter Stripe Elements et Payment Element à votre page de paiement

Envoyer le paiement à StripeCôté client

Mise en garde

Gérer les événements post-paiementCôté serveur

Tester l'intégration

FacultatifActiver d'autres moyens de paiement

Encaisser des commissions

Mise en garde

Mouvement de fonds avec frais

Effectuer des remboursements

Voir aussi

Créer un PaymentIntent
Côté serveur

Collecter les informations de paiement
Côté client

Envoyer le paiement à Stripe
Côté client

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