Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageManaged Payments
Moyens de paiement
Interfaces de paiement
Scénarios de paiement
Paiements par TPE
Au-delà des paiements

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.

Un flux de configuration vous permet de configurer un moyen de paiement en vue de paiements futurs, sans avoir à débiter votre client immédiatement. Cette intégration permet de créer un tunnel de paiement personnalisé, dans lequel vous pourrez afficher le composant Payment Element, créer le SetupIntent et confirmer la configuration à partir de 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 :

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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

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

Vous êtes prêt à recueillir les informations de paiement de votre client à l’aide du composant Element Payment, un composant préconfiguré de l’interface utilisateur qui simplifie cette collecte pour de nombreux moyens de paiement.

Le composant 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 dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

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 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/basil/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>

Une fois le formulaire ci-dessus chargé, créez une instance Elements avec le mode ‘setup’. Ensuite, créez une instance de l’Element Payment et montez-la sur le nœud DOM conteneur.

checkout.js
const options = {
  mode: 'setup',
  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

Par défaut, le composant Payment Element ne collecte que les informations nécessaires relatives à l’adresse de facturation. Si vous souhaitez obtenir l’adresse de facturation (par exemple, pour calculer la taxe sur les biens et services numériques) ou l’adresse de livraison complètes d’un client, utilisez le composant Address Element.

Créer un objet Customer
Côté serveur

Pour configurer un moyen de paiement en vue de paiements ultérieurs, vous devez l’associer à un objet Customer. Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Les objets Customer permettent de réutiliser des moyens de paiement et de suivre plusieurs paiements.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

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 SetupIntent génère un objet PaymentMethod. Vous pouvez lire l’ID du payment_method à partir du SetupIntent .

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: {
      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 SetupIntent
  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);
});

Envoyer les données de paiement à Stripe
Côté serveur

Lorsque le client envoie votre formulaire de paiement, créez un SetupIntent sur votre serveur. 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.

Vous pouvez utiliser le PaymentMethod envoyé par votre client pour créer et confirmer le SetupIntent 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.setupIntents.create({
      confirm: true,
      customer: req.cookies['customer'], // the Customer ID you previously created
      // 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
    });
    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 SetupIntent 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 effectuer la configuration.

checkout.js
JavaScript
No results
const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server in payment setup form
  } else if (response.status === "requires_action") {
    // Use Stripe.js to handle the required next action
    const {
      error,
      setupIntent
    } = await stripe.handleNextAction({
      clientSecret: response.clientSecret
    });

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

Débiter un moyen de paiement précédemment enregistré
Côté serveur

Avertissement

Par défaut, bancontact et ideal sont des moyens de paiement ponctuels. Si vous les configurez pour une utilisation ultérieure, ils génèrent le type de moyen de paiement réutilisable sepa_debit. Vous devez donc rechercher sepa_debit pour trouver les moyens de paiement enregistrés.

Conformité

Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Lorsque vous présentez au client final des moyens de paiement précédemment utilisés en vue d’effectuer ses prochains achats, assurez-vous de lister les moyens de paiement pour lesquels vous avez obtenu le consentement du client à l’enregistrement des informations de paiement aux fins des futurs achats. Le paramètre allow_redisplay vous permet de différencier les moyens de paiement associés au client qui peuvent ou non être présentés pour les achats futurs.

Au moment de débiter votre client hors session, utilisez l’ID des objets Customer et PaymentMethod afin de créer un PaymentIntent. Pour trouver un moyen de paiement à débiter, répertoriez les moyens de paiement associés à votre client. Cet exemple liste des cartes, mais vous pouvez répertorier n’importe quel type de moyen de paiement pris en charge.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d type=card

Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session :

  • Définissez l’attribut off_session sur true pour indiquer que le client ne se trouve pas dans votre tunnel de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une banque ou un autre établissement de paiement. Si un partenaire demande une authentification dans le tunnel de paiement, Stripe demande une exemption en s’appuyant sur les informations utilisée par le client pendant une session précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut renvoyer une erreur.
  • Définissez la propriété confirm du PaymentIntent sur la valeur true, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
  • Renseignez l’ID du PaymentMethod dans payment_method et l’ID du client dans customer.
Command Line
curl
Interface de ligne de commande Stripe
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true

Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402. L’état du PaymentIntent est requires_payment_method. Vous devez inviter votre client à revenir dans votre application pour finaliser le paiement (par e-mail ou par une notification dans l’application par exemple).

Vérifiez le code de l’erreur levée par l’API Library Stripe. Si le paiement a échoué en raison d’un code de refus de paiement authentication_required, utilisez la clé secrète du client du PaymentIntent refusée avec confirmPayment pour permettre au client d’authentifier le paiement.

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

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

  const {error} = await stripe.confirmPayment({
    // The client secret of the PaymentIntent
    clientSecret,
    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`.
  }
});

Remarque

L’exécution de la méthode stripe.confirmPayment peut prendre plusieurs secondes. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente. Si le client doit effectuer des actions supplémentaires pour mener à bien le paiement, comme une authentification, Stripe.js le guide tout au long de ce processus.

Si le paiement a échoué pour d’autres raisons, par exemple parce que les fonds sont insuffisants, dirigez votre client vers une page de paiement sur laquelle il pourra spécifier un autre moyen de paiement. Vous pouvez ensuite réutiliser l’objet PaymentIntent existant pour retenter de réaliser le paiement avec les nouvelles données de paiement.

Voir aussi

Cette page vous a-t-elle été utile ?
OuiNon