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

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, le montant et la devise. Ces valeurs déterminent les moyens de paiement présentés à votre client.

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

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.

FacultatifPersonnaliser la mise en page
Côté client

FacultatifPersonnaliser l'apparence
Côté client

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

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

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

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

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

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

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