Finaliser les paiements sur le serveur

Développez une intégration dans laquelle vous renvoyez le Payment Element avant de créer un PaymentIntent ou SetupIntent, puis confirmez l'Intent à partir de votre serveur.

Le composant Element Payment vous permet d’accepter plusieurs moyens de paiement à l’aide d’une seule intégration. Cette intégration permet de créer un tunnel de paiement personnalisé, où vous pourrez afficher le composant Element Payment, créer un PaymentIntent et confirmer le paiement depuis votre serveur.

Configurer Stripe
Côté serveur

Tout d’abord, créez un compte Stripe ou connectez-vous.

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

Activer des moyens de paiement

Mise en garde

Ce chemin d’intégration ne prend pas en charge BLIK ou les prélèvements automatiques qui utilisent le Système automatisé de compensation et de règlement (SACR).

Affichez vos paramètres des moyens de paiement et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un PaymentIntent.

Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page Prise en charge des moyens de paiement pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre page des tarifs pour prendre connaissance des frais que nous appliquons.

Recueillir les informations de paiement
Côté client

Use the Payment Element to securely send payment information collected in an iFrame to Stripe over an HTTPS connection.

Conflicting iFrames

Avoid placing the Payment Element within another iframe because it conflicts with payment methods that require redirecting to another page for payment confirmation.

Your checkout page URL must start with https:// rather than http:// for your integration to work. You can test your integration without using HTTPS, but remember to enable it when you’re ready to accept live payments.

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 un lot ni en héberger de copie.

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

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

checkout.js
// 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('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Ajouter le composant Payment Element à votre page de paiement

Le composant Payment Element 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 :

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

After your form loads, create an Elements instance with the mode, amount, and currency. These values determine which payment methods the Element presents to your customer.

Ensuite, créez une instance de l’Element Payment et montez-la sur le nœud DOM conteneur.

checkout.js
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  paymentMethodCreation: 'manual',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
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');

Le composant Element Payment affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le moyen de paiement sélectionné par le client.

Vous pouvez personnaliser le Payment Element pour l’adapter au design de votre site en transmettant l’objet Appearance dans les options lors de la création du fournisseur Elements.

Collecter les adresses

By default, the Payment Element only collects the necessary billing address details. Some behavior, such as calculating tax or entering shipping details, requires your customer’s full address. You can:

Use the Address Element to take advantage of autocomplete and localization features to collect your customer’s full address. This helps ensure the most accurate tax calculation.
Collect address details using your own custom form.

FacultatifPersonnaliser la mise en page
Côté client

Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section elements.create.

Vous pouvez commencer à utiliser les fonctionnalités de mise en page en transmettant un type de mise en page et d’autres propriétés facultatives lors de la création du Payment Element :

const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: true,
    spacedAccordionItems: false
  }
});

L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page :

Trois expériences de formulaire de paiement

Mise en page du composant Element Payment

FacultatifPersonnaliser l'apparence
Côté client

Maintenant que vous avez ajouté le composant Payment Element à votre page, vous pouvez personnaliser son apparence pour l’adapter à votre design. Pour en savoir plus sur la personnalisation de ce composant, consultez la page dédiée à l’API Elements Appearance.

Personnaliser le Payment Element

FacultatifEnregistrer et récupérer les moyens de paiement des clients

Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la fonctionnalité d’enregistrement des moyens de paiement, qui permet à Payment Element de :

De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
Enregistrer les moyens de paiement lorsque les clients y consentent
Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
Mise à jour automatique des cartes perdues ou expirées lorsque les clients les remplacent

Le composant Payment Element et une case à cocher pour le moyen de paiement enregistré

Enregistrez les moyens de paiement.

Le composant Payment Element avec un moyen de paiement enregistré sélectionné

Réutilisez un moyen de paiement précédemment enregistré.

Activer l’enregistrement du moyen de paiement dans le composant Payment Element

Créez une session CustomerSession sur votre serveur en fournissant un ID d’objet Customer et en activant le composant payment_element pour votre session. Configurez les fonctionnalités des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de payment_method_save vous permet d’afficher une case à cocher invitant les clients à enregistrer leurs informations de paiement pour une utilisation ultérieure.

Vous pouvez spécifier setup_future_usage sur un PaymentIntent ou une session Checkout pour remplacer le comportement par défaut à l’enregistrement d’un moyen de paiement. Ainsi, vous enregistrez automatiquement le moyen de paiement en vue d’une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer.

Mise en garde

Autoriser vos clients à supprimer les moyens de paiement qu’ils ont enregistrés en activant payment_method_remove a une incidence sur les abonnements qui dépendent de ce moyen de paiement. La suppression du moyen de paiement dissocie le PaymentMethod de cet objet Customer.

Votre instance Elements utilise la clé secrète du client de la session Client pour accéder aux moyens de paiement enregistrés de ce client. Gérez les erreurs correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.

Créez l’instance Elements à l’aide de la clé secrète du client de la session Client. Ensuite, utilisez l’instance Elements pour créer un Payment Element.

checkout.js
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

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

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

Lors de la création du ConfirmationToken, Stripe.js contrôle automatiquement le paramètre setup_future_usage sur le ConfirmationToken et allow_redisplay sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.

Exiger la collecte du CVC

Vous pouvez également spécifier require_cvc_recollection à la fois lors de la création du PaymentIntent et lors de la création d’Elements pour appliquer la collecte du CVC lorsqu’un client paie par carte.

Détecter la sélection d’un moyen de paiement enregistré

Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement change du composant Element Payment, qui contient le moyen de paiement sélectionné.

checkout.js
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

FacultatifMettre à jour les informations de paiement de manière dynamique
Côté client

Lorsque le client effectue des actions qui modifient les informations du paiement (par exemple s’il applique un code de réduction), mettez à jour l’instance d’Elements afin de prendre en compte les nouvelles valeurs. Certains moyens de paiement, comme Apple Pay et Google Pay, affichent le montant dans l’interface utilisateur, vous devez donc veiller à ce que celui-ci soit toujours exact et à jour.

checkout.js
async function handleDiscountCode(code) {
  // On the server, validate that the discount code is valid and return the new amount
  const {newAmount} = await fetch("/apply-discount", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({code}),
    });
  elements.update({amount: newAmount});
}

FacultatifOptions d'éléments supplémentaires
Côté client

L’objet Elements accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, le Payment Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la prise en charge des moyens de paiement.

Propriété	Type	Description	Obligatoire
`mode`	`payment` `setup` `subscription`	Indique si l’Payment Element est utilisé avec un PaymentIntent, un SetupIntent ou un abonnement.	Oui
`currency`	`string`	La devise du montant à facturer au client.	Oui
`amount`	`number`	Le montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL.	Pour les modes `payment` et `subscription`
`setupFutureUsage`	`off_session` `on_session`	Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Payment Element.	Non
`captureMethod`	`automatic` `automatic_async` `manual`	Détermine à quel moment capturer les fonds sur le compte du client.	Non
`onBehalfOf`	`string`	Connect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les cas d’usage pour déterminer si cette option est pertinente pour votre intégration.	Non
`paymentMethodTypes`	`string[]`	Liste des types de moyens de paiement à afficher. Vous pouvez omettre cet attribut pour gérer vos moyens de paiement dans le Dashboard Stripe.	Non
`paymentMethodConfiguration`	`string`	La configuration des moyens de paiement à utiliser lors de la gestion de vos moyens de paiement dans le Dashboard Stripe. Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée.	Non
`paymentMethodCreation`	`manual`	Autorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de stripe.createPaymentMethod.	Non
`paymentMethodOptions`	`{us_bank_account: {verification_method: string}}`	Options de vérification pour le moyen de paiement `us_bank_account`. Accepte les mêmes méthodes de vérification que les Payment Intents.	Non
`paymentMethodOptions`	`{card: {installments: {enabled: boolean}}}`	Permet d’activer manuellement l’interface utilisateur de sélection du calendrier de versements échelonnés par carte, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le Dashboard Stripe. Vous devez définir `mode='payment'` et spécifier explicitement des `paymentMethodTypes`. Dans le cas contraire, une erreur est générée. Non compatible avec `paymentMethodCreation='manual'`.	Non

Créer le ConfirmationToken
Côté client

Utiliser createPaymentMethod par le biais d'une ancienne implémentation

Si vous utilisez une ancienne implémentation, vous utilisez peut-être les informations de stripe.createPaymentMethod pour finaliser les paiements sur votre serveur. Nous vous recommandons de suivre ce guide pour migrer vers les tokens de confirmation, mais vous pouvez toujours accéder à notre ancienne documentation pour finaliser les paiements sur le serveur

Lorsque le client envoie votre formulaire de paiement, appelez stripe.createConfirmationToken pour créer un ConfirmationToken à envoyer à votre serveur et pour appliquer une logique métier ou une validation supplémentaire avant la confirmation du paiement.

La confirmation du PaymentIntent génère un objet PaymentMethod. Vous pouvez lire l’ID du payment_method à partir de la réponse de confirmation du PaymentIntent .

Mise en garde

Vous devez immédiatement utiliser l’objet ConfirmationToken ainsi créé pour confirmer un PaymentIntent. S’il n’est pas utilisé, il expire au bout de 12 heures.

checkout.js
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

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

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

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

  // Create the ConfirmationToken using the details collected by the Payment Element
  // and additional shipping information
  const {error, confirmationToken} = await stripe.createConfirmationToken({
    elements,
    params: {
      shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
      return_url: 'https://example.com/order/123/complete'
    }
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
    return;
  }

  // Create the PaymentIntent
  const res = await fetch("/create-confirm-intent", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({
      confirmationTokenId: confirmationToken.id,
    }),
  });

  const data = await res.json();

  // Handle any next actions or errors. See the Handle any next actions step for implementation.
  handleServerResponse(data);
});

FacultatifInsérer une logique métier personnalisée
Côté serveur

Avant de créer et de confirmer le paiement, vous pouvez exécuter votre logique métier personnalisée. Vous pouvez afficher certaines informations de paiement du client en consultant le ConfirmationToken que vous avez créé. Si vous utilisez le SDK Stripe, assurez-vous que votre SDK est à jour pour les versions suivantes :

stripe-php v13.15.0
stripe-go v76.22.0
stripe-ruby v10.13.0
stripe-java v24.21.0
stripe-node v14.22.0
stripe-python v8.8.0
stripe-dotnet v43.20.0

Créer et envoyer le paiement à Stripe
Côté serveur

Lorsque le client envoie votre formulaire de paiement, utilisez un PaymentIntent pour faciliter le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur en spécifiant les attributs amount et currency. Dans la dernière version de l’API, la spécification du paramètre automatic_payment_methods est facultative, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les moyens de paiement depuis le Dashboard. Stripe gère le l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, décidez toujours du montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

Vous pouvez utiliser le ConfirmationToken envoyé par votre client pour créer et confirmer le PaymentIntent en une seule requête.

app.js
const stripe = require("stripe")("sk_test_BQokikJOvBiI2HlWgH4olfQ2"
);
const express = require('express');
const app = express();

app.set('trust proxy', true);
app.use(express.json());
app.use(express.static("."));

app.post('/create-confirm-intent', async (req, res) => {
  try {
    const intent = await stripe.paymentIntents.create({
      confirm: true,
      amount: 1099,
      currency: 'usd',
      // In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
      automatic_payment_methods: {enabled: true},
      confirmation_token: req.body.confirmationTokenId, // the ConfirmationToken ID sent by your client
    });
    res.json({
      client_secret: intent.client_secret,
      status: intent.status
    });
  } catch (err) {
    res.json({
      error: err
    })
  }
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Gérer les actions suivantes
Côté client

Si le PaymentIntent exige une action supplémentaire de la part du client, par exemple l’authentification 3D Secure ou la redirection vers un autre site, vous devez déclencher ces actions. Utilisez stripe.handleNextAction pour déclencher l’interface utilisateur afin de gérer l’action du client et d’effectuer le paiement.

checkout.js
Sélectionner une langueJavaScript
 No results
const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.status === "requires_action") {
    // Use Stripe.js to handle the required next action
    const {
      error,
      paymentIntent
    } = await stripe.handleNextAction({
      clientSecret: response.clientSecret
    });

    if (error) {
      // Show error from Stripe.js in payment form
    } else {
      // Actions handled, show success message
    }
  } else {
    // No actions needed, show success message
  }
}

FacultatifGérer les événements post-paiement

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire 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 workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les différences entre les différents moyens de paiement pris en charge.

Gérer les événements manuellement dans le Dashboard
Utilisez le Dashboard pour afficher vos paiements de test dans le Dashboard, envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.
Créer un webhook personnalisé
Créez un gestionnaire de webhook personnalisé pour écouter les événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhook localement avec la CLI Stripe.
Intégrer une application prédéfinie
Gérez les événements commerciaux courants, tels que l’automatisation ou le marketing et les ventes, en intégrant une application partenaire.

Voir aussi

Concevoir une intégration

Finaliser les paiements sur le serveur

Développez une intégration dans laquelle vous renvoyez le Payment Element avant de créer un PaymentIntent ou SetupIntent, puis confirmez l'Intent à partir de votre serveur.

Configurer StripeCôté serveur

Activer des moyens de paiement

Mise en garde

Recueillir les informations de paiementCôté client

Conflicting iFrames

Configurer Stripe.js

Ajouter le composant Payment Element à votre page de paiement

Collecter les adresses

FacultatifPersonnaliser la mise en pageCôté client

FacultatifPersonnaliser l'apparenceCôté client

FacultatifEnregistrer et récupérer les moyens de paiement des clients

Activer l’enregistrement du moyen de paiement dans le composant Payment Element

Mise en garde

Exiger la collecte du CVC

Détecter la sélection d’un moyen de paiement enregistré

FacultatifMettre à jour les informations de paiement de manière dynamiqueCôté client

FacultatifOptions d'éléments supplémentairesCôté client

Créer le ConfirmationTokenCôté client

Utiliser createPaymentMethod par le biais d'une ancienne implémentation

Mise en garde

FacultatifInsérer une logique métier personnaliséeCôté serveur

Créer et envoyer le paiement à StripeCôté serveur

Gérer les actions suivantesCôté client

FacultatifGérer les événements post-paiement

Voir aussi

Configurer Stripe
Côté serveur

Recueillir les informations de paiement
Côté client

FacultatifPersonnaliser la mise en page
Côté client

FacultatifPersonnaliser l'apparence
Côté client

FacultatifMettre à jour les informations de paiement de manière dynamique
Côté client

FacultatifOptions d'éléments supplémentaires
Côté client

Créer le ConfirmationToken
Côté client

FacultatifInsérer une logique métier personnalisée
Côté serveur

Créer et envoyer le paiement à Stripe
Côté serveur

Gérer les actions suivantes
Côté client