Créer une page de paiement
Intégrez Apple Pay et Google Pay en rédigeant du code supplémentaire.
Personnalisez l’ensemble des composants avec CSS.
Note
Consultez votre profil de plateforme pour déterminer si vous devez opter pour des paiements directs ou des paiements indirects.
Paiements indirects
Dans cet exemple, la plateforme est une place de marché dédiée à la location immobilière, qui doit créer des paiements pour les propriétaires qui louent leurs biens. Vous pouvez également utiliser les paiements indirects dans d’autres applications.
Étape 1 : Créer un PaymentIntent Server-side
curl https://api.stripe.com/v1/payment_intents \ -u "
:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=truesk_test_4eC39HqLyjWDarjtT1zdp7dc
Dans la dernière version de l’API, la spécification du paramètre automatic_payment_methods
est facultative, car Stripe active sa fonctionnalité par défaut.
Stripe utilise un objet PaymentIntent pour représenter votre intention d’encaisser le paiement d’un client, qui suit les tentatives de débit et les changements d’état de paiement tout au long du processus.
Créez un PaymentIntent
sur votre serveur avec un montant et une devise. Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cette précaution empêchera les clients malintentionnés de fixer leurs propres tarifs.
curl https://api.stripe.com/v1/payment_intents \ -u
: \ -d amount=1000 \ -d currency="usd" \ -d "automatic_payment_methods[enabled]"=true \ -d application_fee_amount="123" \ -d "transfer_data[destination]"=sk_test_4eC39HqLyjWDarjtT1zdp7dc{{CONNECTED_STRIPE_ACCOUNT_ID}}
Dans notre exemple d’outil de création d’un service de location de logement, nous souhaitons créer une entreprise qui permet aux clients de payer la location sur notre plateforme et nous permet de payer le propriétaire de la location. Pour créer cette entreprise :
- Indiquez si la location est un paiement indirect au moyen de
transfer_data[destination]
. - Indiquez la part du montant de la location qui revient à la plateforme au moyen de
application_fee_amount
.
Lors du paiement d’une location, Stripe transfère la totalité du montant vers le solde en attente du compte connecté (transfer_data[destination]
). Par la suite, Stripe transfère le montant des frais (application_fee_amount
) sur le compte de la plateforme, ce qui correspond au revenu issu de la location. Ensuite, Stripe déduit ses frais du montant des frais de la plateforme. Voici une illustration de ce flux de fonds :
Note
Ce PaymentIntent génère un paiement indirect. Si vous souhaitez choisir le moment des transferts ou transférer un paiement à plusieurs parties, utilisez plutôt les paiements et transferts distincts.
Récupérer la clé secrète du client
Le PaymentIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.
Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction fetch
du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client :
get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end
Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :
(async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })();
Étape 2 : Collecter les informations de carte bancaire Client-side
Vous pouvez maintenant collecter les informations de carte bancaire côté client avec Stripe Elements. Elements est un ensemble de composants d’interface utilisateur conçu pour recueillir et valider le numéro de carte, le code postal et la date d’expiration.
Un composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement doit aussi commencer par https:// au lieu de http://.
Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le quand vous souhaitez commencer à accepter des paiements réels.
Configurer Stripe Elements
Stripe Elements est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js en l’ajoutant entre les balises head
de 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.
<head> <title>Checkout</title> <script src="https://js.stripe.com/v3/"></script> </head>
Créez une instance d’Elements avec le code JavaScript suivant sur votre page de paiement :
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys var stripe = Stripe(
); var elements = stripe.elements();'pk_test_TYooMQauvdEDq54NiTphI7jx'
Ajouter Elements à votre page de paiement
Vous devez inclure un emplacement dédié à Elements dans votre formulaire de paiement. Créez des nœuds DOM (conteneurs) vides dotés d’ID uniques dans votre formulaire de paiement, puis transmettez ces ID à Elements.
<form id="payment-form"> <div id="card-element"> <!-- Elements will create input elements here --> </div> <!-- We'll put the error messages in this element --> <div id="card-errors" role="alert"></div> <button id="submit">Pay</button> </form>
Lorsque le formulaire ci-dessus est chargé, créez une instance d’un élément et montez-la sur le conteneur Element :
// Set up Stripe.js and Elements to use in checkout form var elements = stripe.elements(); var style = { base: { color: "#32325d", } }; var card = elements.create("card", { style: style }); card.mount("#card-element");
Le composant Element card
simplifie le formulaire et réduit le nombre de champs requis en insérant un champ de saisie flexible et unique qui collecte tous les détails de carte et de facturation nécessaires de manière sécurisée. Vous pouvez également combiner des éléments cardNumber
, cardExpiry
et cardCvc
pour un formulaire flexible et multi-saisie de carte bancaire.
Note
Recueillez toujours un numéro de code postal afin d’améliorer vos taux d’acceptation des cartes bancaires et de réduire la fraude.
Le Composant Card Element à une ligne recueille automatiquement le code postal du client et l’envoie à Stripe. Si vous créez votre formulaire de paiement avec des Elements fractionnés (Numéro de carte, Expiration, CVC, ajoutez un champ de saisie distinct pour le code postal du client.
Pour une liste complète des types Element pris en charge, reportez-vous à notre documentation de référence sur Stripe.js.
Elements valide les informations dès leur saisie par l’utilisateur. Pour aider vos clients à repérer d’éventuelles erreurs, écoutez les événements change
de la propriété Elements card
et affichez les erreurs :
card.on('change', ({error}) => { let displayError = document.getElementById('card-errors'); if (error) { displayError.textContent = error.message; } else { displayError.textContent = ''; } });
La validation du code postal dépend du pays de facturation de votre client. Pour tester d’autres formats de code postal, vous pouvez utiliser nos cartes de test internationales.
Étape 3 : Envoyer le paiement à Stripe Client-side
Au lieu de transmettre au client l’objet PaymentIntent tout entier, utilisez la clé secrète du client évoquée à l’Step 1. Cette clé est différente de la clé secrète que vous utilisez pour envoyer des requêtes aux API Stripe.
La clé secrète du client doit être utilisée avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.
Pour finaliser le paiement lorsque l’utilisateur clique, récupérez la clé secrète du client dans le PaymentIntent créé à l’Step 1, puis appelez stripe.confirmCardPayment en spécifiant cette clé.
Transmettez les autres informations de facturation, telles que le nom et l’adresse du titulaire de la carte, à l’algorithme de hachage billing_details
. L’élément card
envoie automatiquement les informations de code postal. Cependant, pour combiner les éléments cardNumber
, cardCvc
et cardExpiry
, vous devez transmettre le code postal à billing_details[address][postal_code]
.
var form = document.getElementById('payment-form'); form.addEventListener('submit', function(ev) { ev.preventDefault(); stripe.confirmCardPayment(clientSecret, { payment_method: { card: card, billing_details: { name: 'Jenny Rosen' } } }).then(function(result) { if (result.error) { // Show error to your customer (for example, insufficient funds) console.log(result.error.message); } else { // The payment has been processed! if (result.paymentIntent.status === 'succeeded') { // Show a success message to your customer // There's a risk of the customer closing the window before callback // execution. Set up a webhook or plugin to listen for the // payment_intent.succeeded event that handles any business critical // post-payment actions. } } }); });
Note
L’exécution de la méthode stripe.confirmCardPayment
peut prendre plusieurs secondes. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente.
Si le client doit authentifier la carte, Stripe.js le guide tout au long du processus en présentant une fenêtre modale. Vous pouvez visualiser cette expérience en utilisant le numéro de carte de test avec un CVC, une date d’expiration postérieure à la date du jour et un code postal dans la démo en haut de la page.
Une fois le paiement finalisé, la propriété status
du PaymentIntent renvoyé indique que la transaction a réussi. Vous pouvez vérifier l’état d’un PaymentIntent dans le Dashboard ou en étudiant la propriété de l’état sur l’objet. Si le paiement échoue, étudiez la valeur error
renvoyée pour déterminer la cause de cet échec.
Étape 4 : Traiter la commande Server-side
Une fois le paiement effectué, vous devrez procéder à la réalisation de toute commande nécessaire de votre côté. Par exemple, une société de location immobilière mettra en relation le propriétaire du logement avec le locataire une fois le paiement finalisé.
Configurez un endpoint de webhook (pour les événements provenant de votre compte) dans votre Dashboard.
Ensuite, créez un endpoint HTTP sur votre serveur pour surveiller les paiements, afin de permettre à vos vendeurs ou prestataires de services de traiter les commandes. Veillez à remplacer la clé secrète du endpoint (whsec_...
) de cet exemple par votre propre clé.
# Using Sinatra. require 'sinatra' require 'stripe' set :port, 4242 # 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 =
# If you are testing your webhook locally with the Stripe CLI you # can find the endpoint's secret by running `stripe listen` # Otherwise, find your endpoint's secret in your webhook settings in # the Developer Dashboard endpoint_secret = 'whsec_...' post '/webhook' do payload = request.body.read sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil # Verify webhook signature and extract the event. # See https://stripe.com/docs/webhooks#verify-events for more information. begin event = Stripe::Webhook.construct_event( payload, sig_header, endpoint_secret ) rescue JSON::ParserError => e # Invalid payload. status 400 return rescue Stripe::SignatureVerificationError => e # Invalid Signature. status 400 return end if event['type'] == 'payment_intent.succeeded' payment_intent = event['data']['object'] handle_successful_payment_intent(payment_intent) end status 200 end def handle_successful_payment_intent(payment_intent) # Fulfill the purchase puts payment_intent.to_s end'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
Pour en savoir plus, consultez notre guide de traitement des paiements.
Test des webhooks en local
Utilisez l’interface de ligne de commande de Stripe pour tester les webhooks localement.
Tout d’abord, installez la CLI Stripe sur votre ordinateur si vous ne l’avez pas encore fait.
Ensuite, pour vous connecter, exécutez la commande
stripe login
dans la ligne de commande, puis suivez les instructions.Enfin, pour autoriser votre hôte local à recevoir un événement simulé sur votre compte connecté, exécutez la commande
stripe listen --forward-to localhost:{PORT}/webhook
dans une fenêtre de terminal, puis exécutez la commandestripe trigger --stripe-account={{CONNECTED_STRIPE_ACCOUNT_ID}} payment_intent.succeeded
(ou déclenchez tout autre événement pris en charge) dans une autre fenêtre.
Étape 5 : Litiges
Votre plateforme étant l’entité de règlement pour les paiements, elle est à ce titre responsable des litiges. Assurez-vous de prendre connaissance des bonnes pratiques en matière de résolution de litiges.
Activer des moyens de paiement
Stripe enables certain payment methods for your connected accounts by default. You can change these defaults at any time in your Stripe Dashboard.
Avant que le formulaire de paiement ne s’affiche, Stripe évalue la devise, les restrictions en matière de moyens de paiement ainsi que d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Ceux qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont automatiquement priorisés. Ceux de moindre priorité ne sont accessibles que via un menu déroulant.