Accepter un paiement

Acceptez les paiements en ligne en toute sécurité.

Créez un formulaire de paiement ou utilisez une page de paiement préconfigurée pour commencer à accepter les paiements en ligne.

Intégrez un formulaire de paiement préconfiguré sur votre site à l’aide de Stripe Checkout. Comparez cette intégration aux autres types d’intégration de Stripe.

powdur.me

Effort d'intégration

Peu de codage

Type d'intégration

Intégrer un formulaire de paiement préconfiguré sur votre site

Personnalisation de l'interface utilisateur

Personnalisation limitée

Utilisez les paramètres de l’image de marque dans le Dashboard Stripe pour faire correspondre Checkout à la conception de votre site.

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 une session Checkout
Côté serveur

Sur votre serveur, créez une session Checkout et définissez le paramètre ui_mode to embedded. Vous pouvez configurer la session Checkout pour y inclure des postes de facture et d’autres options telles que la devise.

Vous pouvez également créer une session Checkout pour un client existant, ce qui vous permet de remplir automatiquement les coordonnées des clients connus dans les champs Checkout et d’unifier leur historique d’achat.

Pour rediriger les clients vers une page personnalisée que vous hébergez sur votre site Web, précisez l’adresse URL de cette page dans le paramètre return_url. Incluez la variable de modèle {CHECKOUT_SESSION_ID} dans l’URL pour récupérer l’état de la session sur la page de retour. Checkout remplace automatiquement la variable par l’ID de session Checkout avant la redirection.

En savoir plus sur la configuration de la page de retour et les autres options pour personnaliser le comportement de redirection.

Après avoir créé la session Checkout, utilisez le client_secret retourné dans la réponse pour charger Checkout.

Monter Checkout
Côté client

Checkout est disponible dans Stripe.js. Intégrez le script Stripe.js à votre page en l’ajoutant à l’en-tête de votre fichier HTML. Ensuite, créez un nœud DOM vide (conteneur) à utiliser lors du montage.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Initialisez Stripe.js avec votre clé API publique.

Créez une fonction asynchrone fetchClientSecret qui envoie une requête à votre serveur pour créer la session Checkout et récupérer la clé secrète du client. Transmettez cette fonction dans options lorsque vous créez l’instance Checkout :

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout est affiché dans une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS.

Erreur fréquente

Évitez de placer Checkout dans une autre balise iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour obtenir la confirmation du paiement.

Personnaliser l’apparence

Personnalisez Checkout pour qu’il corresponde à la conception de votre site en définissant la couleur d’arrière-plan, la couleur des boutons, la taille de la bordure et les polices dans les paramètres de marque de votre compte.

Par défaut, Checkout est rendu sans rembourrage ou marge externe. Nous vous recommandons d’utiliser un élément conteneur tel qu’un div pour appliquer la marge souhaitée (par exemple, 16 pixels de tous les côtés).

Afficher une page de retour

Une fois que votre client a effectué une tentative de paiement, Stripe le redirige vers une page de retour que vous hébergez sur votre site. Lors de la création de la session Checkout, vous avez spécifié l’URL de la page de retour dans le paramètre return_url. En savoir plus sur les autres options pour personnaliser le comportement de redirection.

Lors de l’affichage de votre page de retour, récupérez l’état de la session Checkout à l’aide de l’ID de session Checkout qui figure dans l’URL. Gérez le résultat en fonction de l’état de la session comme suit :

complete : le paiement a été effectué. Utilisez les informations de la session Checkout pour afficher une page de confirmation de paiement.
open : le paiement a échoué ou a été annulé. Chargez Checkout à nouveau afin que votre client puisse réessayer.

client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

Moyens de paiement basés sur la redirection

Lors du paiement, certains moyens de paiement redirigent le client vers une page intermédiaire, telle qu’une page d’autorisation bancaire. Lorsqu’il a terminé de remplir cette page, Stripe le redirige vers votre page de retour.

En savoir plus sur les modes de paiement avec redirection et le comportement de redirection.

Gérer les événements post-paiement

Stripe envoie un événement checkout.session.completed lorsqu’un client finalise le paiement de la session Checkout. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks pour recevoir et gérer ces événements, qui peuvent vous amener à :

Envoyer un courriel de confirmation de commande à votre client.
Enregistrer la vente dans une base de données.
Démarrer un processus d’expédition.

Écoutez ces événements plutôt que d’attendre que votre client soit redirigé vers votre site Web. Le déclenchement du traitement uniquement à partir de votre page de renvoi Checkout n’est pas fiable. Si vous configurez votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de modes de paiement avec une seule intégration.

Pour en savoir plus, consultez notre guide de traitement avec Checkout.

Gérez les événements suivants lors de l’encaissement de paiements avec Checkout :

Événement	Description	Action
checkout.session.completed	Envoyé lorsqu’un client finalise avec succès la session Checkout.	Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_succeeded	Envoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) aboutit.	Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_failed	Envoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) échoue.	Informez le client de l’échec et redirigez-le vers la session pour qu’il effectue une nouvelle tentative de paiement.

Testez votre intégration

Pour tester l’intégration de votre formulaire de paiement intégré :

Créez une session de paiement intégrée et montez Checkout sur votre page.
Remplissez le formulaire de paiement et indiquez-y un moyen de paiement qui provient du tableau ci-dessous.
- Saisissez une date d’expiration postérieure à la date du jour.
- Saisissez un code CVC à 3 chiffres.
- Saisissez un code postal de facturation.
Cliquez sur Payer. Vous êtes alors redirigé vers votre return_url.
Accédez au Dashboard et cherchez le paiement sur la page Transactions. Si votre paiement a été effectué, vous le verrez dans cette liste.
Cliquez sur votre paiement pour voir plus d’informations, comme un résumé Checkout qui comprend les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter la commande.

Découvrez comment tester votre intégration.

Numéro de carte	Scénario	Comment tester
	Le paiement par carte est réussi et ne nécessite pas d’authentification.	Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.
	Le paiement par carte requiert une authentification.	Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un 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 de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.
	Le numéro de carte UnionPay a une longueur variable de 13 à 19 chiffres.	Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.

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

FacultatifAjouter d'autres moyens de paiement

Par défaut, Checkout prend en charge de nombreux modes de paiement. Vous devez prendre des mesures supplémentaires pour activer et afficher certains modes de paiement, comme Apple Pay, Google Pay et les modes de paiement fractionné.

Apple Pay et Google Pay

Pour accepter les paiements provenant d’Apple Pay et de Google Pay, vous devez effectuer ce qui suit :

Activez-les dans vos paramètres des moyens de paiement. Apple Pay est activé par défaut.
Utilisez votre application via HTTPS en mode développement et production.
Enregistrez votre domaine.
Utilisez votre application au moyen de HTTPS en mode développement et production. Vous pouvez utiliser un service comme ngrok en vue de réaliser des tests locaux de votre application.

De plus, une session Checkout n’affiche le bouton Apple Pay pour les clients que lorsque toutes les conditions suivantes sont remplies :

L’appareil du client exécute macOS version 17 ou iOS version 17 (ou des versions ultérieures).
Le client utilise le navigateur Safari.
Le client a enregistré une carte valide auprès d’Apple Pay.

Une session Checkout n’affiche le bouton Google Pay pour les clients que lorsque all des conditions suivantes sont remplies :

L’appareil du client fonctionne avec la version Chrome 61 ou une version plus récente.
Le client a enregistré une carte valide auprès de Google Pay.

Tests régionaux
Inde

Stripe Checkout ne prend pas en charge Apple Pay ou Google Pay pour les comptes ou les clients Stripe en Inde. Si votre adresse IP est en Inde, vous ne pourrez pas tester votre intégration Apple Pay ou Google Pay, même si le compte Stripe est hébergé en dehors de l’Inde.

FacultatifCréer des produits et des tarifs

Avant de créer une session Checkout, vous pouvez créer des produits et des prix à l’avance. Utilisez des produits pour représenter différents biens physiques ou niveaux de service, et des prix pour représenter le prix de chaque produit.

Par exemple, vous pouvez créer un T-shirt en tant que produit au prix de 20 USD. Cela vous permet de mettre à jour et d’ajouter des prix sans avoir à modifier les détails de vos produits sous-jacents. Vous pouvez créer des produits et des prix avec le Dashboard ou l’API Stripe. En savoir plus sur le fonctionnement des produits et des tarifs.

L’API ne nécessite que d’un attribut name pour créer un produit. Checkout affiche les paramètres name, description et images du produit que vous fournissez.

Ensuite, créez un objet Price pour définir le montant à débiter pour votre produit. Cela inclut le coût du produit et la devise à utiliser.

Chaque prix que vous créez possède un ID. Lorsque vous créez une session Checkout, référencez l’ID du prix et la quantité. Si vous effectuez des ventes en plusieurs devises, affichez un prix multidevises. Checkout déterminera automatiquement la devise locale du client et présentera au client le prix adapté, si la devise est prise en charge.

FacultatifRemplir automatiquement les données du client
Côté serveur

Si vous avez déjà collecté l’adresse courriel de votre client et que vous souhaitez la faire remplir automatiquement dans une session Checkout, transmettez le paramètre customer_email lors de la création de la session Checkout.

FacultatifEnregistrer les informations du moyen de paiement
Côté serveur

Par défaut, les moyens de paiement utilisés pour effectuer un paiement ponctuel avec Checkout ne sont pas disponibles pour une utilisation future.

Enregistrer les moyens de paiement pour les débiter hors session

Vous pouvez configurer Checkout de façon à enregistrer les modes de paiement utilisés pour effectuer des paiements ponctuels en transmettant l’argument payment_intent_data.setup_future_usage. Cela peut notamment vous permettre de capturer un mode de paiement enregistré afin de prélever des frais futurs, comme des frais d’annulation ou de non-présentation.

Si vous utilisez Checkout en mode subscription, Stripe enregistre automatiquement le mode de paiement pour le débiter lors des paiements suivants. Les modes de paiement par carte enregistrés pour les clients utilisant les modes setup_future_usage ou subscription ne s’affichent pas dans Checkout pour les achats récurrents (plus d’informations à ce sujet ci-dessous). Nous vous recommandons d’utiliser du texte personnalisé pour rediriger vos clients vers les conditions pertinentes concernant l’utilisation des informations de paiement enregistrées.

Avertissement

Les lois internationales en matière de protection de la vie privée sont complexes et nuancées. Nous vous recommandons de contacter votre conseiller juridique et votre équipe responsable de la conformité avant de mettre en œuvre setup_future_usage, car cela pourrait impliquer votre cadre de conformité existant en matière de confidentialité. Pour en savoir plus sur l’enregistrement des informations de paiement. reportez-vous aux directives du Comité européen de la protection des données.

Enregistrer les moyens de paiement pour qu’ils soient remplis automatiquement dans Checkout

Par défaut, Checkout utilise Link pour offrir à vos clients la possibilité d’enregistrer et de réutiliser leurs informations de paiement en toute sécurité. Si vous préférez gérer vous-même les modes de paiement, utilisez saved_payment_method_options.payment_method_save lors de la création d’une session Checkout. Vos clients pourront ainsi enregistrer leurs modes de paiement pour leurs futurs achats dans Checkout.

La transmission de ce paramètre en mode paiement ou abonnement affiche une case à cocher facultative qui permet aux clients d’enregistrer explicitement leur mode de paiement pour leurs futurs achats. Lorsque les clients cochent cette case, Checkout enregistre le mode de paiement avec allow_redisplay : always. Checkout utilisera ce paramètre pour déterminer si un mode de paiement peut être rempli automatiquement lors des futurs achats. Lorsque vous utilisez saved_payment_method_options.payment_method_save, vous n’avez pas besoin de transmettre setup_future_usage pour enregistrer le mode de paiement.

L’utilisation de saved_payment_method_options.payment_method_save nécessite un Customer. Pour enregistrer un nouveau client, définissez le paramètre customer_creation de la session Checkout sur always. Sinon, la session n’enregistre, ni le client, ni le mode de paiement.

Si payment_method_save n’est pas transmis ou si le client refuse d’enregistrer le mode de paiement, Checkout enregistre toutefois les modes de paiement créés en mode subscription ou à l’aide de setup_future_usage. La valeur allow_redisplay de ces modes de paiement est définie sur limited. Cela évite qu’ils soient remplis automatiquement pour les achats récurrents, et vous permet de vous conformer aux règles des réseaux de cartes et aux réglementations en matière de protection des données. Découvrez comment modifier le comportement par défaut activé par ces modes et comment modifier ou remplacer le comportement allow_redisplay.

Remarques

Vous pouvez utiliser Checkout pour enregistrer des cartes et d’autres modes de paiement afin de les débiter hors session, mais Checkout ne remplit automatiquement que les cartes enregistrées. Découvrez comment remplir automatiquement les cartes enregistrées. Pour enregistrer un mode de paiement sans paiement initial, utilisez Checkout en mode configuration.

Autoriser les clients à supprimer des modes de paiement enregistrés

Pour permettre à vos clients de supprimer un mode de paiement enregistré afin qu’il ne réapparaisse pas pour des paiements ultérieurs, utilisez saved_payment_method_options.payment_method_remove lors de la création d’une session Checkout.

Le client ne peut pas supprimer un mode de paiement s’il est associé à un abonnement actif et qu’aucun mode de paiement par défaut n’est enregistré pour les paiements de factures et d’abonnements.

FacultatifGestion des comptes clients
Aucun codage requis

Laissez vos clients gérer leurs propres comptes en partageant un lien vers votre portail client. Le portail client permet aux clients de se connecter avec leur adresse courriel pour gérer leurs abonnements, mettre à jour leurs modes de paiement et plus encore.

FacultatifSéparer l'autorisation et la capture
Côté serveur

Stripe prend en charge les paiements par carte en deux temps afin que vous puissiez d’abord autoriser une carte, puis capturer des fonds plus tard. Lorsque Stripe autorise un paiement, l’émetteur de la carte garantit les fonds et retient le montant du paiement sur la carte du client. Vous avez ensuite un certain temps pour capturer les fonds, en fonction de la carte. Si vous ne capturez pas le paiement avant l’expiration de l’autorisation, le paiement sera annulé et l’émetteur libérera les fonds retenus.

La séparation de l’autorisation et de la capture est utile si vous devez prendre des mesures supplémentaires entre la confirmation de la solvabilité du client et la collecte du paiement. Par exemple, si vous vendez des articles dont l’inventaire est limité, vous devrez peut-être vérifier que l’article acheté par votre client avec Checkout est toujours disponible avant de capturer le paiement et de traiter la commande. Pour ce faire, procédez comme suit :

Confirmez que Stripe a autorisé le moyen de paiement du client.
Consultez votre système de gestion d’inventaire pour vous assurer que l’article est toujours disponible.
Mettez à jour votre système de gestion d’inventaire pour indiquer qu’un client a acheté l’article.
Capturez le paiement du client.
Indiquez au client si l’achat a réussi sur votre page de confirmation.

Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de payment_intent_data.capture_method à manual lorsque vous créez la session Checkout. Ainsi, Stripe autorise uniquement le montant sur la carte du client.

Pour capturer un paiement non capturé, vous pouvez utiliser le Dashboard ou le point de terminaison de capture. La capture de paiements par voie programmatique implique d’accéder au PaymentIntent créé lors de la session Checkout, que vous pouvez obtenir à l’aide de l’objet Session.

FacultatifTraitement des commandes

Découvrez comment recevoir une notification par voie programmatique chaque fois qu’un client effectue un paiement.