Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez 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.

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

Aperçu de Checkout intégréAperçu de Checkout intégré
powdur.me

Effort d'intégration

Low-code

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 marque dans le Dashboard Stripe pour adapter l’apparence de Checkout à celle 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 :

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'

Créer une session Checkout
Côté serveur

Sur votre serveur, créez une session Checkout et définissez le paramètre ui_mode sur embedded. Vous pouvez configurer la session Checkout pour qu’elle inclue les postes de facture et d’autres options, par exemple la devise.

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

Pour rediriger vos clients vers une page personnalisée hébergée sur votre site web, indiquez l’URL de cette page dans le paramètre return_url. Ajoutez 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 d’autres options pour personnaliser le comportement de redirection.

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

Ruby
Python
PHP
Java
Node
Go
.NET
No results
# This example sets up an endpoint using the Sinatra framework.
# To learn more about Sinatra, watch this video: https://youtu.be/8aA9Enb8NVc.
require 'json'
require 'sinatra'
require 'stripe'

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-checkout-session' do
  session = Stripe::Checkout::Session.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',
    ui_mode: 'embedded',
    return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end

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 pour le 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 fetchClientSecret asynchrone qui demande à votre serveur de créer la session Checkout et de récupérer la clé secrète du client. Transmettez cette fonction dans la propriété 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 s’affiche dans un iframe qui envoie de manière sécurisée les informations de paiement à Stripe via une connexion HTTPS.

Erreur fréquente

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

Personnaliser l’apparence

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

Par défaut, Checkout s’affiche sans espacement externe ni marge. Nous vous recommandons d’utiliser un élément de conteneur tel qu’un espace div pour appliquer la marge souhaitée (par exemple, 16 px sur 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 renseigné l’URL de la page de retour dans le paramètre return_url. En savoir plus sur les autres options de personnalisation du 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 dans l’URL. Traitez le résultat en fonction de l’état de la session comme suit :

  • complete : le paiement a abouti. Utilisez les informations de la session Checkout pour afficher une page de confirmation.
  • open : le paiement a échoué ou a été annulé. Montez à nouveau Checkout pour que votre client puisse effectuer une nouvelle tentative.
Ruby
Python
PHP
Java
Node
Go
.NET
No results
get '/session-status' do
  session = Stripe::Checkout::Session.retrieve(params[:session_id])

  {status: session.status, customer_email:  session.customer_details.email}.to_json
end
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 avec redirection

Lors du paiement, certains moyens de paiement redirigent le client vers une page intermédiaire, comme la page d’autorisation de sa banque. Une fois qu’il a renseigné cette page, Stripe le redirige vers votre page de retour.

En savoir plus sur les moyens 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 effectue un paiement par session Checkout. Utilisez l’outil de webhook Dashboard ou suivez le guide consacré aux webhooks pour recevoir et gérer ces événements. Ceux-ci peuvent vous conduire à :

  • Envoyez un e-mail de confirmation de commande à votre client.
  • Enregistrez la vente dans une base de données.
  • Démarrez un flux de travail 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. 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.

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

Gérez les événements suivants lors de la collecte de paiements avec Checkout :

ÉvénementDescriptionAction
checkout.session.completedEnvoyé lorsqu’un client termine une session Checkout.Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_succeededEnvoyé lorsqu’un paiement effectué avec un moyen de paiement différé (par exemple, un prélèvement automatique ACH) aboutit.Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_failedEnvoyé lorsqu’un paiement effectué avec un moyen de paiement différé (par exemple, un prélèvement automatique ACH) échoue.Informez le client de l’échec et redirigez-le vers la session pour tenter à nouveau de payer.

Tester votre intégration

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

  1. Créez une session Checkout intégrée et montez Checkout sur votre page.
  2. Renseignez les informations d’un moyen de paiement 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.
  3. Cliquez sur Payer. Vous êtes redirigé vers votre URL return_url.
  4. Accédez au Dashboard et recherchez le paiement sur la page Transactions. Si votre paiement a abouti, il apparaîtra dans cette liste.
  5. Cliquez sur votre paiement afin d’afficher plus d’informations, par exemple un récapitulatif Checkout contenant les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter votre commande.

Découvrez comment tester votre intégration.

Numéro de carteScénarioMéthode de test
Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
Le paiement par carte bancaire requiert une authentification.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le 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 bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19 chiffres.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.

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

Voir aussi

Cette page vous a-t-elle été utile ?
OuiNon
Code quickstart
Guides connexes
Composants Apparence API
Autres scénarios de paiement
Fonctionnement des cartes bancaires
Produits utilisés
Payments
Elements
Checkout