Accéder directement au contenu
Créez un compte
 ou
connectez-vous
Le logo de la documentation Stripe
/
Créer un compte
Connectez-vous

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.

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. Découvrez comment cette intégration se compare aux autres types d’intégration de Stripe.

Le code côté client et côté serveur crée un formulaire de paiement qui accepte divers modes de paiement.

Pays du client
Taille
Thème
Disposition
Pour voir comment fonctionne Link pour un utilisateur récurrent, saisissez l'adresse courriel demo@stripe.com. Pour voir comment fonctionne Link lors d'une nouvelle inscription, saisissez une autre adresse courriel et remplissez le reste du formulaire. Cette démo n'affiche Google Pay ou Apple Pay que si vous avez une carte active avec l'un ou l'autre des portefeuilles numériques.

Effort d'intégration

API

Type d'intégration

Combiner les composants d’interface utilisateur dans un flux de paiement personnalisé

Personnalisation de l'interface utilisateur

Personnalisation au niveau CSS avec l’API Apparence

Vous souhaitez utiliser Stripe Tax, les réductions, l'expédition ou la conversion de devises?

Stripe dispose d’une intégration de Payment Element qui gère pour vous les taxes, les réductions, les frais d’expédition et la conversion de devises. Consultez la section Créer une page de paiement pour en savoir plus.

Set up Stripe
Server-side

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

Use our official libraries to access the Stripe API from your application:

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Créer un PaymentIntent
Côté serveur

Remarques

Si vous souhaitez présenter le Payment Element avant de créer un PaymentIntent, consultez la page Collecter les informations de paiement avant de créer un Intent.

L’objet PaymentIntent représente votre intention d’encaisser le paiement d’un client et suit les tentatives de débit et changements d’état tout au long du processus de paiement.

Créer le PaymentIntent

Créez un PaymentIntent sur votre serveur avec les attributs amount et currency. Dans la dernière version de l’API, la définition du paramètre automatic_payment_methods est facultative, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les modes de paiement à partir du Dashboard. Stripe gère le retour des modes de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement.

Stripe utilise vos paramètres de modes de paiement pour afficher les modes de paiement que vous avez activés. Pour voir comment vos modes de paiement s’affichent pour les clients, saisissez un identifiant de transaction ou définissez un montant et une devise de commande dans le Dashboard. Pour remplacer les modes de paiement, répertoriez manuellement ceux que vous souhaitez activer à l’aide de l’attribut payment_method_types.

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]"=true

Remarques

Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malveillants puissent définir leurs propres prix.

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

L’objet PaymentIntent comprend une clé secrète du client utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client.

Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction fetch du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer la clé secrète du client :

main.rb
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

Ensuite, récupérez la clé secrète du client avec 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 à l’aide du Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations de paiement pour divers modes de paiement.

Le Payment Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Évitez de placer le Payment Element dans une autre balise iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour obtenir la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut allow iframe doit être défini à "payment *".

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https:// plutôt que par http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque vous serez prêt(e) à accepter des paiements réels.

Configurer Stripe.js

Le composant 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 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 Payment Element à votre page de paiement

Le Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneurs) 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">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Une fois le formulaire précédent chargé, créez une instance du Payment Element et intégrez-la au nœud DOM du conteneur. Transmettez la clé secrète du client de l’étape précédente dans les options lorsque vous créez l’instance Elements :

Manipulez la clé secrète du client avec prudence, car elle peut finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne l’exposez à personne d’autre que votre client.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
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 Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de remplir toutes les informations de paiement nécessaires.

Personnaliser l’apparence

Personnalisez le Payment Element pour l’adapter à l’apparence 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 Payment Element recueille uniquement les informations de facturation nécessaires. Pour collecter l’adresse de facturation complète d’un client (par exemple, pour calculer la taxe sur les biens et services numériques) ou l’adresse de livraison, utilisez l’Address Element.

Demander le jeton marchand d’Apple Pay

Si vous avez configuré votre intégration afin d’accepter les paiements Apple Pay, nous vous recommandons de configurer l’interface Apple Pay de manière à renvoyer un jeton marchand afin d’activer les transactions effectuées par le marchand. Demander le type de jeton marchand approprié dans le composant Payment Element.

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations du Payment Element. Ajoutez une return_url à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur une fois le paiement effectué. Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page return_url. Une fois que le paiement par carte a fonctionné, le client est immédiatement redirigé vers la page return_url.

Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte après la finalisation, vous pourrez définir la redirection à if_required. De cette manière, seuls les clients qui choisissent un mode 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ètreDescription
payment_intentL’identifiant unique du PaymentIntent.
payment_intent_client_secretLa clé secrète du client de l’objet PaymentIntent.

Avertissement

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 ce qui doit être présenté à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez l’objet 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 sur les webhooks pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient 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 intégration.

En plus de gérer l’événement payment_intent.succeeded, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element :

ÉvénementDescriptionAction
payment_intent.succeededEnvoyé lorsqu’un client a effectué un paiement.Envoyez au client une confirmation de commande et traitez sa commande.
payment_intent.processingEnvoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend 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, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué.
payment_intent.payment_failedEnvoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue.Si un paiement passe de l’état processing à l’état payment_failed, proposez au client de retenter le paiement.

Testez votre intégration

Pour tester votre intégration de paiement personnalisée :

  1. Créez un Payment Intent et récupérez la clé secrète du client.
  2. Remplissez le formulaire de paiement et indiquez-y une méthode qui provient du tableau suivant.
    • Saisissez une date d’expiration postérieure à la date du jour.
    • Saisissez un code CVC à 3 chiffres.
    • Saisissez un code postal de facturation.
  3. Soumettez le paiement à Stripe. Vous êtes alors redirigé vers votre return_url.
  4. Accédez au Dashboard et recherchez le paiement sur la page Transactions. Si votre paiement a été effectué, vous le verrez dans cette liste.
  5. Cliquez sur votre paiement pour voir plus d’informations, comme 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 carteScénarioComment 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.

Présenter les informations de Stripe à vos clients

Stripe recueille des informations sur les interactions des clients avec Elements pour vous fournir des services, prévenir la fraude et améliorer ses services. Cela inclut l’utilisation de témoins et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une seule session de paiement. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour permettre à Stripe d’utiliser les données de cette manière. Pour en savoir plus, rendez-vous sur notre centre de confidentialité.

Voir aussi

Cette page vous a-t-elle été utile?
OuiNon
Besoin d'aide? Contactez le service d'assistance.
Rejoignez notre programme d'accès anticipé.
Consultez notre journal des modifications.
Des questions? Contactez l'équipe commerciale.
GML? Lire llms.txt.
Optimisé par Markdoc
Code quickstart
Guides associés
API Elements Appearance
Plus de scénarios de paiement
Fonctionnement des cartes
Produits utilisés
Payments
Elements
Checkout