Guide de migration de Checkout
L’ancienne version de Checkout présentait aux clients une boîte de dialogue contextuelle qui collectait les informations de carte bancaire et renvoyait un token ou une source à votre site Web. En revanche, la version actuelle de Checkout est une page de paiement intelligente hébergée par Stripe qui crée des paiements ou abonnements. Elle est compatible avec Apple Pay, Dynamic 3D Secure et de nombreuses autres fonctionnalités.
La nouvelle version de Checkout offre davantage de flexibilité avec la prise en charge de postes dynamiques, Connect, la réutilisation d’objets Customer existants et des fonctionnalités d’abonnement avancées. Vous pouvez également utiliser l’intégration client si vous voulez vous lancer plus rapidement ou si votre catalogue de produits est relativement simple.
Pour effectuer la migration de l’ancienne à la nouvelle version, suivez le guide le plus proche de votre modèle d’entreprise. Chaque guide recommande un chemin d’intégration avec des exemples de code.
Catalogue de produits et tarifications dynamiques
Si vous avez un catalogue de produits particulièrement fourni ou si vous devez prendre en charge des postes créés de manière dynamique (telles que des dons ou des taxes).
Si vous êtes un fournisseur SaaS facturant ses utilisateurs et devant prendre en charge des fonctionnalités avancées.
Plateformes et places de marché Connect
Si vous exploitez une place de marché mettant en relation des prestataires de services et des clients.
Enregistrement de moyens de paiement pour utilisation ultérieure
Si vous êtes une entreprise qui ne facture sa clientèle qu’une fois les services rendus.
Catalogue de produits simple avec tarification fixe
Si vous vendez certains produits à des prix pré-déterminés.
Si vous êtes un fournisseur SaaS avec un plan d’abonnement mensuel.
En suivant le guide de migration correspondant, vous pouvez également vous à la table de conversion pour une mise en correspondance des paramètres spécifiques et des options de configuration entre les deux versions de Checkout.
Catalogue de produits et tarifications dynamiques
Si vous vendez des produits pour lesquels le montant ou les postes sont déterminés de manière dynamique (par exemple dans le cas d’un catalogue de produits particulièrement fourni ou de dons), consultez la section Accepter des paiements ponctuels.
Vous avez peut-être utilisé l’ancienne version de Checkout pour créer un token ou une source côté client, que vous avez ensuite transmis à votre serveur pour créer un paiement. Avec la version actuelle de l’intégration Checkout côté serveur, ce flux est inversé. Vous créez d’abord une session sur votre serveur, transmettez son identifiant à votre client, redirigez votre client vers Checkout et votre client est ensuite de nouveau redirigé vers votre application en cas de succès.
Avant
Avec l’ancienne version de Checkout, vous affichiez le montant et la description dynamiques et collectiez les informations de carte bancaire auprès de votre client.
<form action="/purchase" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Custom t-shirt" data-description="Your custom designed t-shirt" data-amount="{{ORDER_AMOUNT}}" data-currency="usd"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
Ensuite, vous transmettiez la source ou le token généré à votre serveur pour le paiement.
Après
Avec la version actuelle de Checkout, vous devez commencer par créer une session Checkout sur votre serveur.
Note
Si vous utilisez l’une de nos bibliothèques Client, vous devez la mettre à niveau vers sa dernière version pour pouvoir utiliser l’API Checkout Sessions.
Ensuite, transmettez l’identifiant de la session à votre client et redirigez votre client vers Checkout pour effectuer le paiement.
const stripe = Stripe(
); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
Le client est redirigé vers le success_url
une fois qu’il aura effectué le paiement.
Si vous devez traiter la commande de biens achetés après le paiement, consultez le guide Traitement des achats dans Checkout.
Abonnements dynamiques
Si vous fournissez des services par abonnement déterminés de manière dynamique ou qui nécessitant la prise en charge d’autres fonctionnalités avancées, consultez la page consacrée à la configuration d’un abonnement.
Vous avez peut-être utilisé l’ancienne version de Checkout pour créer un token ou une source côté client, que vous avez ensuite transmis à votre serveur pour créer un client ou un abonnement. Avec la version actuelle de l’intégration serveur de Checkout, ce flux est inversé. Vous créez d’abord une session sur votre serveur, transmettez son identifiant à votre client, redirigez votre client vers Checkout et votre client est ensuite de nouveau redirigé vers votre application en cas de succès.
Avant
Avec l’ancienne version de Checkout, vous affichiez les informations sur l’abonnement et collectiez les informations de carte bancaire auprès de votre client.
<form action="/subscribe" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Gold Tier" data-description="Monthly subscription with 30 days trial" data-amount="2000" data-label="Subscribe"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
Ensuite, vous transmettiez la source ou le token généré à votre serveur pour créer un client ou un abonnement.
Après
Avec la version actuelle de Checkout, vous devez commencer par créer une session Checkout sur votre serveur.
Note
Si vous utilisez l’une de nos bibliothèques Client, vous devez la mettre à niveau vers sa dernière version pour pouvoir utiliser l’API Checkout Sessions.
Ensuite, transmettez l’identifiant de la session à votre client et redirigez votre client vers Checkout pour effectuer le paiement.
const stripe = Stripe(
); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
Le client est redirigé vers success_url
une fois que le client et l’abonnement ont été créés.
Si vous devez traiter la commande de services achetés après le paiement, consultez traitement des achats dans Checkout.
Vous pouvez également mettre à jour vos informations d’abonnement dans Checkout.
Plateformes et places de marché Connect
Si vous exploitez une plateforme ou une place de marché Connect et créez des paiements impliquant des comptes connectés, il est préférable que vous utilisiez la version actuelle de l’intégration serveur de Checkout. Suivez les instructions dans le guide Connect pour migrer votre intégration.
L’exemple suivant illustre l’utilisation de l’API Checkout Sessions pour traiter un paiement direct. Suivez le guide Connect pour des informations détaillées sur la manière de créer des paiements indirects.
Avant
Avec l’ancienne version de Checkout, vous collectiez les informations de carte bancaire auprès de votre client côté client.
<form action="/purchase" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Food Marketplace" data-description="10 cucumbers from Roger's Farm" data-amount="2000"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
Ensuite, vous transmettiez la source ou le token généré à votre serveur pour créer le paiement au nom du compte connecté.
Après
Avec la version actuelle de Checkout, vous devez commencer par créer une session Checkout sur votre serveur au nom du compte connecté.
Note
Si vous utilisez l’une de nos bibliothèques côté Client, vous devez la mettre à jour à sa dernière version pour pouvoir utiliser l’API Checkout Sessions.
Ensuite, transmettez l’identifiant de la session à votre client et redirigez votre client vers Checkout pour effectuer le paiement. Veillez à fournir l’identifiant du compte connecté lors de l’initialisation de Stripe.js.
// Initialize Stripe.js with the same connected account ID used when creating // the Checkout Session. const stripe = Stripe(
, { stripeAccount:'pk_test_TYooMQauvdEDq54NiTphI7jx'}); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'{{CONNECTED_ACCOUNT_ID}}'
Le client est redirigé vers le success_url
une fois qu’il aura effectué le paiement.
Si vous devez traiter la commande de biens ou de services achetés après le paiement, consultez traitement des achats dans Checkout.
Enregistrement de moyens de paiement pour utilisation ultérieure
Si vous fournissez des services pour lesquels vos clients ne sont pas facturés immédiatement, consultez le guide Configurer des paiements ultérieurs.
Vous avez peut-être utilisé l’ancienne version de Checkout pour créer un token ou une source côté client, que vous avez ensuite transmis à votre serveur afin de l’enregistrer pour une utilisation ultérieure. Avec la version actuelle de l’intégration Checkout côté serveur, ce flux est inversé. Vous créez d’abord une session sur votre serveur, transmettez son identifiant à votre client, redirigez votre client vers Checkout et votre client est ensuite de nouveau redirigé vers votre application en cas de succès.
Avant
Avec l’ancienne version de Checkout, vous affichiez les informations sur le paiement et collectiez les informations de carte bancaire auprès de votre client.
<form action="/subscribe" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Cleaning Service" data-description="Charged after your home is spotless" data-amount="2000"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
Ensuite, vous transmettiez le token ou la source qui en résultait à votre serveur pour à terme créer un paiement.
Après
Avec la version actuelle de Checkout, vous créez d’abord une session Checkout sur votre serveur à l’aide du mode de configuration.
Note
Si vous utilisez l’une de nos bibliothèques côté Client, vous devez la mettre à jour à sa dernière version pour pouvoir utiliser l’API Checkout Sessions.
Ensuite, transmettez l’identifiant de la session à votre client et redirigez votre client vers Checkout pour recueillir les informations sur le moyen de paiement.
const stripe = Stripe(
); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
Le client est redirigé vers success_url
une fois qu’il a terminé le tunnel de paiement.
À ce stade, vous pouvez récupérer le Setup Intent du tunnel de paiement et l’utiliser pour préparer votre transaction.
Catalogue de produits simple avec tarification fixe
Si vous vendez des produits dont les prix sont fixes (tels que des t-shirts ou des livres numériques), consultez le guide sur les paiements ponctuels pour savoir comment générer un extrait de code à ajouter à votre site Web.
Vous avez peut-être utilisé l’ancienne version de Checkout pour créer un token ou une source côté client, que vous avez ensuite transmis à votre serveur pour créer un paiement. La version actuelle de Checkout crée automatiquement le paiement pour vous et aucune intégration serveur n’est requise.
Code côté client
Code côté serveur
Le tableau de conversion ci-dessous établit la correspondance des options de configuration entre les deux versions de Checkout. Pour consulter la liste complète des options de configuration de la version actuelle, reportez-vous à la section redirectToCheckout
.
Abonnements simples
Si vous proposez un service d’abonnement simple (un accès mensuel à un logiciel par exemple), consultez le guide consacré aux abonnements pour apprendre à créer un plan dans le Dashboard et à générer un extrait de code à ajouter à votre site Web.
Vous avez peut-être utilisé l’ancienne version de Checkout pour créer un token ou une source côté client, que vous avez ensuite transmis à votre serveur pour créer un client ou un abonnement. La version actuelle de Checkout crée automatiquement le paiement pour vous et aucune intégration serveur n’est requise.
Code côté client
Code côté serveur
Le tableau de conversion ci-dessous établit la correspondance des options de configuration entre les deux versions de Checkout. Pour consulter la liste complète des options de configuration de la version actuelle, reportez-vous à la section redirectToCheckout
.
Conversion des paramètres
La version actuelle de Checkout prend en charge la plupart des fonctionnalités de l’ancienne version de Checkout. Mais les deux versions ne partagent pas la même API. Le tableau ci-dessous établit la correspondance des paramètres et des options de configuration entre l’ancienne et la nouvelle version.
Pour consulter la liste complète des options de configuration de la version actuelle de Checkout, reportez-vous à la documentation Stripe.js et à la documentation de l’API pour Checkout Sessions.
Ancienne version | Version actuelle | Conseils pour l’intégration |
---|---|---|
allowRememberMe |
| La version actuelle de Checkout ne prend pas en charge la fonction « Se souvenir de moi ». Pour réutiliser des clients existants, nous vous recommandons de définir le paramètre customer lors de la création d’une session Checkout. |
amount |
| Le montant total est la somme des postes que vous passez dans Checkout. |
billingAddress |
| Checkout recueille automatiquement l’adresse de facturation lorsqu’elle est requise à des fins de prévention de la fraude ou de réglementation. Configurez ce paramètre sur required pour recueillir systématiquement l’adresse de facturation. |
billingAddress |
| Checkout recueille automatiquement l’adresse de facturation lorsqu’elle est requise à des fins de prévention de la fraude ou de réglementation. Configurez ce paramètre sur required pour recueillir systématiquement l’adresse de facturation. |
closed |
| Lorsqu’un client veut fermer Checkout, il doit soit fermer l’onglet du navigateur, soit déplacer son curseur sur cancelUrl . |
currency |
| |
description |
| Si vous indiquez un prix, Checkout génère automatiquement une description pour la fréquence des paiements. Si vous définissez le paramètre Session.line_items , Checkout affiche le nom de chaque poste dans le paramètrename . |
email |
| Si vous connaissez déjà l’adresse e-mail de votre client, précisez-la ici pour ne pas avoir à la saisir de nouveau. |
image |
| Checkout utilise des images spécifiques pour la marque de votre entreprise et pour les produits que vous vendez. Checkout affiche votre logo d’entreprise par défaut et revient à l’icône de votre entreprise à côté du nom de votre entreprise. |
key |
| |
locale |
| Vous pouvez préciser un lieu pris en charge lorsque vous créez une session Checkout. |
name |
| Si vous indiquez un prix, Checkout affiche le nom du produit associé à ce prix. Si vous définissez le paramètre Session.line_items , Checkout affiche le paramètre name de chaque poste. |
panelLabel |
| Checkout personnalise automatiquement le texte du bouton en fonction des articles que vous vendez. Pour les paiements ponctuels, utilisez submit_type pour personnaliser le texte du bouton. |
shippingAddress |
| Pour collecter des informations sur l’adresse de livraison, transmettez un tableau allowed_countries de pays autorisés vers lesquels vous souhaitez effectuer des livraisons. |
token ou source |
| Il n’y a plus de callback en JavaScript lorsque le paiement est terminé. Comme votre client paie sur une page différente, définissez la successUrl pour rediriger votre client après qu’il a effectué le paiement. |
zipCode |
| Checkout recueille automatiquement le code postal lorsqu’il est requis à des fins de prévention de la fraude ou de réglementation. |