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

Collecter les informations de paiement avant de créer un Intent

Développez une intégration dans laquelle vous pouvez afficher l'Element Payment avant de créer un objet PaymentIntent ou SetupIntent.

Les abonnements sont un modèle tarifaire selon lequel les utilisateurs effectuent des paiements récurrents pour accéder à un produit. Dans ce guide d’intégration, découvrez comment créer un tunnel de paiement personnalisé vous permettant d’afficher le Payment Element, de créer un abonnement et de confirmer le paiement depuis le navigateur du client.

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 :

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'

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.

Pour Subscriptions, configurez vos paramètres de facturation et vos moyens de paiement pris en charge. Afin d’éviter les erreurs, vos paramètres de facturation doivent correspondre à ceux du Payment Element.

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.

Remarque

Le amount transmis au Payment Element doit refléter le montant qui sera débité immédiatement au client. Il peut s’agir du premier versement de l’abonnement ou de la valeur 0 si l’abonnement comporte une période d’essai.

checkout.js
const options = {
  mode: 'subscription',
  amount: 1099,
  currency: 'usd',
  // 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.

Créer le modèle tarifaire
CLI Stripe ou Dashboard

Créez vos produits et leurs tarifs dans le Dashboard ou via l’interface de ligne de commande Stripe.

Cet exemple utilise un service à tarif fixe avec deux options de niveau de service différentes : Basic et Premium. Pour chaque option de niveau de service, vous devez créer un produit et un tarif récurrent. (Si vous souhaitez ajouter un paiement ponctuel, par exemple des frais d’installation, créez un troisième produit avec un tarif unique. Par souci de simplicité, cet exemple n’inclut pas de paiement ponctuels.)

Dans cet exemple, chaque produit est facturé mensuellement. Le tarif du produit de base est de 5 USD. Celui du produit premium est de 15 USD.

Accédez à la page Ajouter un produit et créez deux produits. Ajoutez un tarif pour chaque produit, avec une période de facturation mensuelle récurrente :

  • Produit Premium : service Premium avec fonctionnalités supplémentaires

    • Prix : Appuyez sur Payer 15 USD.

  • Produit de base : service de base avec fonctionnalités minimales

    • Prix : Forfaitaire | 5 USD

Après avoir créé vos tarifs, enregistrez les ID de tarif de manière à pouvoir les utiliser dans d’autres étapes. Les ID de tarif se présentent sous la forme suivante : price_G0FvDp6vZvdwRZ.

Lorsque vous le souhaitez, cliquez sur le bouton Copier en mode production en haut à droite de la page pour dupliquer votre produit de l’environnement de test en mode production.

Créer l'objet Customer
Client et serveur

Stripe a besoin d’un client pour chaque abonnement. Dans le front-end de votre application, collectez les informations client nécessaires et transmettez-les au back-end.

Si vous avez besoin de recueillir des informations d’adresse, l’Address Element vous permet de recueillir une adresse de livraison ou de facturation pour vos clients. Pour en savoir plus, consultez la page Address Element.

register.html
<form id="signup-form">
  <label>
    Email
    <input id="email" type="text" placeholder="Email address" value="test@example.com" required />
  </label>

  <button type="submit">
    Register
  </button>
</form>
register.js
const emailInput = document.querySelector('#email');

fetch('/create-customer', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: emailInput.value,
  }),
}).then(r => r.json());

Sur le serveur, créez l’objet Customer Stripe.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}} \
  -d name={{CUSTOMER_NAME}} \
  -d "shipping[address][city]"=Brothers \
  -d "shipping[address][country]"=US \
  -d "shipping[address][line1]"="27 Fredrick Ave" \
  -d "shipping[address][postal_code]"=97712 \
  -d "shipping[address][state]"=CA \
  -d "shipping[name]"={{CUSTOMER_NAME}} \
  -d "address[city]"=Brothers \
  -d "address[country]"=US \
  -d "address[line1]"="27 Fredrick Ave" \
  -d "address[postal_code]"=97712 \
  -d "address[state]"=CA

Créer l'abonnement
Côté serveur

Lorsque le client envoie votre formulaire de paiement, utilisez un abonnement pour faciliter le processus de confirmation et de paiement. Pour créer un abonnement, vous devez créer des objets Customer et Price.

Remarque

Si vous utilisez un tarif multidevise, utilisez le paramètre currency pour indiquer à l’abonnement quelle devise utiliser. (Si vous omettez le paramètre currency, l’abonnement utilise la devise par défaut associée au tarif.)

Un abonnement comprend une clé secrète du client. Renvoyez cette valeur côté client. Stripe.js l’utilisera pour finaliser le processus de paiement en toute sécurité. Dans le cas des abonnements ne générant pas immédiatement de premier paiement (par exemple, les abonnements comprenant une période d’essai gratuite), utilisez la clé secrète du client de pending_setup_intent.

server.rb
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# 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-subscription' do
  content_type 'application/json'
  data = JSON.parse(request.body.read)
  customer_id = cookies[:customer]
  price_id = data['priceId']

  subscription = Stripe::Subscription.create(
    customer: customer_id,
    items: [{
      price: price_id,
    }],
    payment_behavior: 'default_incomplete',
    payment_settings: {save_default_payment_method: 'on_subscription'},
    expand: ['latest_invoice.confirmation_secret', 'pending_setup_intent']
  )

  if subscription.pending_setup_intent != null
    { type: 'setup', clientSecret: subscription.pending_setup_intent.client_secret }.to_json
  else
    { type: 'payment', clientSecret: subscription.latest_invoice.confirmation_secret.client_secret }.to_json
  end
end

Confirmer l'abonnement
Côté client

Utilisez stripe.confirmPayment ou stripe.confirmSetup pour confirmer l’abonnement à l’aide des informations du composant Payment Element. Indiquez la page vers laquelle Stripe doit rediriger le client après la confirmation en fournissant une return_url à la fonction de confirmation. Selon le moyen de paiement choisi, le client peut d’abord être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre return_url. Vous pouvez également définir redirect sur if_required pour ne rediriger que les clients qui paient via des moyens de paiement exigeant une redirection.

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 subscription
  const res = await fetch('/create-subscription', {
    method: "POST",
  });
  const {type, clientSecret} = await res.json();
  const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

  // Confirm the Intent using the details collected by the Payment Element
  const {error} = await confirmIntent({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when confirming the Intent.
    // Show the error to your customer (for example, "payment details incomplete").
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Gérer l'abonnement

Pour finaliser l’intégration, vous pouvez :

  • écouter les webhooks
  • fournir l’accès à votre service
  • permettre aux clients d’annuler leur abonnement

Pour en savoir plus, consultez Créer une intégration pour les abonnements.

Voir aussi

Cette page vous a-t-elle été utile ?
OuiNon