Migrer vers l'Express Checkout Element
Migrer votre intégration existante avec le Payment Request Button Element vers l'Express Checkout Element.
Le Payment Request Button Element vous permet d’accepter les paiements par carte uniquement via Apple Pay, Google Pay ou Link. Lorsque vous migrez vers l’Express Checkout Element, vous pouvez accepter les paiements par carte ou par portefeuille via un ou plusieurs boutons de paiement, y compris PayPal. Consultez notre guide de comparaison pour en savoir plus.
Si votre intégration existante utilise | Procédez comme suit |
---|---|
l’API Payment Intents pour créer et suivre les paiements ou enregistrer les informations de carte bancaire lors du paiement | Suivez les étapes de ce guide pour utiliser le composant Express Checkout Element. |
API Charges avec tokens | Migrez vers l’API Payment Intents avant de poursuivre. |
Activer des moyens de paiement![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Activez les moyens de paiement que vous souhaitez prendre en charge dans vos paramètres des moyens de paiement. Vous devez activer au moins un moyen de paiement.
Par défaut, Stripe active les cartes bancaires et autres moyens de paiement courants. Vous pouvez toutefois activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page des options d’intégration des moyens de paiement pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre page tarifaire pour prendre connaissance des frais que nous appliquons.
Mettre à jour l'instance d'ElementsCôté client![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Ensuite, mettez à jour votre code côté client pour transmettre le mode (paiement), le montant et la devise. Ces valeurs déterminent les moyens de paiement à présenter à vos clients.
Par exemple, si vous transmettez la devise eur
dans le PaymentIntent
et que vous avez activé OXXO dans le Dashboard, votre client ne verra pas OXXO, car OXXO ne prend pas en charge les paiements libellés en eur
.
Pour déterminer la liste des moyens de paiement pris en charge, Stripe prend en compte la devise, les restrictions liées aux moyens de paiement ainsi que d’autres paramètres. Nous priorisons les moyens de paiement susceptibles d’accroître le taux de conversion et qui sont les plus pertinents en fonction de la devise et de la localisation du client.
Mettre à jour l'appel de création de votre PaymentIntentCôté serveur![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Le PaymentIntent
inclut les moyens de paiement présentés aux clients lors du paiement. Vous pouvez gérer les moyens de paiement depuis le Dashboard. Stripe gère l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement.
Si votre intégration existante prend en charge plusieurs moyens de paiement ou si vous souhaitez accepter d’autres moyens de paiement que la carte bancaire, vous pouvez activer d’autres moyens de paiement dans le Dashboard.
Ajouter l'Express Checkout ElementCôté client![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Remplacez le Payment Request Button Element par l’Express Checkout Element. Les exemples ci-dessous montrent comment remplacer PaymentRequestButtonElement
par ExpressCheckoutElement
.
Vous n’avez plus besoin de créer un objet paymentRequest
. À la place, transmettez une seule fois les propriétés via l’événement click
.
Mettre à jour la méthode de confirmation du paiementCôté client![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Écoutez l’événement confirm pour gérer la confirmation. Pour collecter les informations de paiement et les envoyer à Stripe, utilisez stripe.confirmPayment au lieu des méthodes de confirmation individuelles comme stripe.
.
Plutôt que d’utiliser un ID de PaymentMethod, stripe.
utilise l’instance Elements de l’Express Checkout Element et la clé secrète du client du PaymentIntent
créé.
Lorsqu’il est appelé, le paramètre stripe.
tente d’effectuer toutes les actions requises, comme authentifier vos clients en affichant une boîte de dialogue 3DS ou en les redirigeant vers une page d’autorisation bancaire. Une fois la confirmation effectuée, les utilisateurs sont redirigés vers la return_url que vous avez configurée, c’est-à-dire une page de votre site Web indiquant l’état du paiement.
Si vous souhaitez que le tunnel de paiement par carte bancaire redirige vos clients uniquement pour les moyens de paiement qui l’exigent, vous pouvez définir la redirection sur if_
. Cela ne s’applique pas à l’Express Checkout Element.
L’exemple ci-dessous remplace stripe.
par stripe.
.
Gérer les événements post-paiementCôté serveur![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.
Plutôt que d’attendre un rappel de votre client, écoutez ces événements. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Certains clients malintentionnés peuvent d’autre part tenter de manipuler la réponse. 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 et même intégration.
En plus de l’événement payment_
, nous vous recommandons de gérer ces autres événements lorsque vous encaissez des paiements à l’aide de l’Element Payment :
Événement | Description | Action |
---|---|---|
payment_intent.succeeded | Envoyé lorsqu’un client effectue un paiement avec succès. | Envoyez au client une confirmation de commande et traitez sa commande. |
payment_intent.processing | Envoyé lorsqu’un client initie un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client initie un prélèvement bancaire. Il est suivi par un événement payment_ ou payment_ . | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, vous pourrez traiter la commande sans attendre que le paiement soit effectué. |
payment_intent.payment_failed | Envoyé lorsqu’un client effectue une tentative de paiement qui se solde par un échec. | Si un paiement passe de l’état processing à payment_ , proposez au client de retenter le paiement. |