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

Copier la page

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é sur votre site à l’aide de Stripe Checkout. Comparez cette intégration aux autres types d’intégration de Stripe.

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

Effort d'intégration

Peu de codage

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 l’image de marque dans le Dashboard Stripe pour faire correspondre Checkout à la conception 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 à partir de votre 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 une session Checkout
Côté serveur

Sur votre serveur, créez une session Checkout et définissez le paramètre ui_mode to embedded. Vous pouvez configurer la session Checkout pour y inclure des postes de facture et d’autres options telles que la devise.

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

Pour rediriger les clients vers une page personnalisée que vous hébergez sur votre site Web, précisez l’adresse URL de cette page dans le paramètre return_url. Incluez 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 les autres options pour personnaliser le comportement de redirection.

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

# 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 lors du montage.

index.html
<head>
  <script src="https://js.stripe.com/v3/"></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 asynchrone fetchClientSecret qui envoie une requête à votre serveur pour créer la session Checkout et récupérer la clé secrète du client. Transmettez cette fonction dans 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 est affiché dans une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS.

Erreur fréquente

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

Personnaliser l’apparence

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

Par défaut, Checkout est rendu sans rembourrage ou marge externe. Nous vous recommandons d’utiliser un élément conteneur tel qu’un div pour appliquer la marge souhaitée (par exemple, 16 pixels de 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 spécifié l’URL de la page de retour dans le paramètre return_url. En savoir plus sur les autres options pour personnaliser le 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 qui figure dans l’URL. Gérez le résultat en fonction de l’état de la session comme suit :

  • complete : le paiement a été effectué. Utilisez les informations de la session Checkout pour afficher une page de confirmation de paiement.
  • open : le paiement a échoué ou a été annulé. Chargez Checkout à nouveau afin que votre client puisse réessayer.
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 basés sur la redirection

Lors du paiement, certains moyens de paiement redirigent le client vers une page intermédiaire, telle qu’une page d’autorisation bancaire. Lorsqu’il a terminé de remplir cette page, Stripe le redirige vers votre page de retour.

En savoir plus sur les modes 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 finalise le paiement de la session Checkout. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks pour recevoir et gérer ces événements, qui peuvent vous amener à :

  • Envoyer un courriel de confirmation de commande à votre client.
  • Enregistrer la vente dans une base de données.
  • Démarrer un processus 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. Si vous configurez votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de modes de paiement avec une seule intégration.

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

Gérez les événements suivants lors de l’encaissement de paiements avec Checkout :

ÉvénementDescriptionAction
checkout.session.completedEnvoyé lorsqu’un client finalise avec succès la session Checkout.Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_succeededEnvoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) aboutit.Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_failedEnvoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) échoue.Informez le client de l’échec et redirigez-le vers la session pour qu’il effectue une nouvelle tentative de paiement.

Testez votre intégration

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

  1. Créez une session de paiement intégrée et montez Checkout sur votre page.
  2. Remplissez le formulaire de paiement et indiquez-y un moyen de paiement qui provient 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 alors redirigé vers votre return_url.
  4. Accédez au Dashboard et cherchez 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 un résumé Checkout qui comprend 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.

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