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

Accepter des paiements avec Billie

Découvrez comment configurer votre intégration avec Billie.

Postes unifiés

Afin d’optimiser les taux d’approbation lors de l’intégration avec Billie, incluez des données line_items pour représenter le contenu du panier d’un client. Pour bénéficier d’un accès anticipé, consultez la page Postes de paiement.

Utilisez le Payment Element pour intégrer un formulaire de paiement Stripe personnalisé sur votre site Web ou application et proposer des moyens de paiement à vos clients. Pour les configurations et personnalisations avancées, consultez le guide d’intégration Accepter un Paiement.

Déterminer la compatibilité

Pour prendre en charge les paiements Billie, une session Checkout doit remplir toutes les conditions suivantes :

  • Les tarifs de tous les postes doivent être exprimés dans la même devise.
  • Si vous avez des postes de facture dans différentes devises, créez une session Checkout par devise.

Configurer le serveur
Côté serveur

Utilisez les bibliothèques officielles de Stripe pour accéder à l’API depuis votre application.

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
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

Ajoutez à votre serveur un endpoint qui crée un objet Checkout Session et renvoie la clé secrète du client à votre front-end. Une session Checkout représente la session d’un client qui paie des achats ponctuels ou des abonnements. Les sessions Checkout expirent 24 heures après leur création.

Nous recommandons d’utiliser des méthodes de paiement dynamiques pour afficher automatiquement les moyens de paiement les plus pertinents à chaque client, afin d’optimiser le taux de conversion. Vous pouvez également lister manuellement les méthodes de paiement, ce qui désactive les options dynamiques.

server.ts
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'eur',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Configurer le front-end
Côté client

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.

Assurez-vous d’être sur la dernière version de Stripe.js en incluant la balise de script suivante <script src=“https://js.stripe.com/clover/stripe.js”></script>. En savoir plus surStripe.js versioning.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

Remarque

Stripe propose un paquet npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Consultez le projet sur GitHub. La version 7.0.0 ou une version ultérieure est requise.

Initialiser stripe.js

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'
,
);

Initialiser Checkout
Côté client

Créez soit une promesse clientSecret qui se résout avec la clé secrète du client, soit définissez-le directement comme clé secrète. Appelez initCheckout, en passant clientSecret. initCheckout renvoie une promesse qui se résout en une instance de Checkout.

L’objet paiement constitue la base de votre page de paiement et contient les données de la Session Checkout ainsi que les méthodes permettant de mettre la Session à jour.

L’objet renvoyé par actions.getSession() contient vos informations tarifaires. Nous vous recommandons de lire et d’afficher le total et les lineItems de la session dans votre interface utilisateur.

Cela vous permet d’activer de nouvelles fonctionnalités avec un minimum de modifications du code. Par exemple, l’ajout de prix manuels des devises ne nécessite aucune modification de l’interface utilisateur si vous affichez le total.

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
index.html
<div id="checkout-container"></div>

Collecter les adresses e-mail des clients
Côté client

Créez un champ de saisie de l’adresse pour collecter l’adresse e-mail de votre client. Appelez updateEmail lorsque votre client finalise la saisie pour valider et enregistrer l’adresse e-mail.

En fonction de la conception de votre formulaire de paiement, vous pouvez appeler updateEmail de l’une des manières suivantes :

  • Directement avant l’envoi du paiement. Vous pouvez également appeler updateEmail pour valider plus tôt, par exemple lorsque le focus est retiré de la saisie.
  • Avant de passer à l’étape suivante, par exemple en cliquant sur un bouton Enregistrer, si votre formulaire comprend plusieurs étapes.
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

Collecter les informations de paiement
Côté client

Collectez les informations de paiement du client avec le Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Tout d’abord, créez un élément DOM de conteneur pour monter le composant Payment Element. Créez ensuite une instance du Payment Element à l’aide de checkout.createPaymentElement et montez-la en appelant element.mount et en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur.

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Consultez la documentation Stripe.js pour connaître les options prises en charge.

Vous pouvez personnaliser l’apparence de tous les Elements en transmettant elementsOptions.appearance lors de l’initialisation de Checkout sur le front-end.

Envoyer le paiement
Côté client

Affichez un bouton Payer qui appelle confirm depuis l’instance Checkout pour soumettre le paiement.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Tester votre intégration

Pour tester votre intégration, choisissez le moyen de paiement et appuyez sur Payer. Dans un environnement de test, cela vous redirige vers une page de paiement de test, dans laquelle vous pouvez autoriser ou refuser le paiement.

En mode production, le fait d’appuyer sur Payer vous redirige vers le site Web de Billie. Vous n’avez pas la possibilité d’autoriser ou de refuser le paiement avec Billie.