Stripe est une plate-forme de traitement des paiements qui vous permet d'ajouter une page de paiement prédéfinie à un site Web et d'accepter et de gérer les paiements en ligne. Il est très populaire en raison de sa facilité d'utilisation, de sa documentation complète, de la prise en charge des paiements locaux, des options de personnalisation et de marque, des abonnements, de la facturation et de la prévention de la fraude.
En utilisant Stripe, vous pouvez accepter des paiements provenant de diverses sources, notamment les cartes de crédit et de débit, Apple Pay et Google Pay.
Ajout de Stripe Checkout à une application Next.js
Vous pouvez intégrer Stripe Checkout à des applications créées avec différentes technologies, notamment Next.js.
Ce didacticiel suppose que vous avez configuré un site de commerce électronique Next.js et fournit uniquement un guide sur la façon d'ajouter le paiement Stripe au site.
Configuration d'un compte Stripe et récupération des clés API
Pour utiliser Stripe Checkout, vous devez créer un compte Stripe et obtenir les clés API. Les clés API se composent d'une clé publiable et d'une clé secrète, que vous utiliserez pour authentifier les requêtes de votre application à l'API Stripe.
Suivez ces étapes pour configurer un compte Stripe :
- Allez à la Site Web de Stripe et cliquez sur le bouton "S'inscrire".
- Entrez votre e-mail, votre nom complet, votre pays et votre mot de passe, puis cliquez sur le bouton "Créer un compte".
- Vérifiez votre adresse e-mail en suivant les instructions de l'e-mail que Stripe vous enverra.
- Sur le tableau de bord Stripe, cliquez sur "Activer les paiements" et répondez aux questions pour terminer le processus de configuration du compte. Ces questions peuvent porter sur le nom, l'adresse et les informations bancaires de l'entreprise. À des fins de développement, utilisez le mode test.
- Copiez les clés API de l'onglet "Développeurs" dans le fichier .env du dossier de votre application.
Vous pourrez désormais accéder au compte Stripe à l'aide des clés API.
Installation du paquet Stripe npm
Exécutez cette commande pour installer le package Stripe npm.
bande d'installation npm
Importez la bibliothèque Stripe dans votre page de composant de paiement.
importer Bande depuis'Bande';
Dans le dossier API, créez un nouveau fichier appelé fichier checkout-session.js. Initialisez l'objet Stripe avec les clés API que vous avez récupérées depuis votre tableau de bord Stripe.
constante rayure = exiger('Bande')(process.env. STRIPE_SECRET_KEY );
Dans la fonction de gestionnaire, récupérez les éléments à extraire à partir des paramètres du corps.
exporterdéfautasynchronefonctiongestionnaire(demande, résolution) {
constante { élément } = req.body ;
};
Créez un objet de session de paiement à la fonction de gestionnaire et transmettez les éléments.
constante séance = attendre stripe.checkout.sessions.create({
types_de_méthode_de_paiement: ['carte'],
éléments_de_ligne: [
article,
],
mode: 'paiement',
success_url: `${req.headers.origin}/?success=true`,
annuler_url: `${req.headers.origin}/?canceled=true`,
});
Voici ce que signifient les nœuds que vous transmettez à l'objet de session :
- types_de_méthode_de_paiement: Les types de méthode de paiement que la session de paiement accepte. Parcourez la liste des méthodes de paiement disponibles dans le Documentation Stripe.
- line_items: une liste d'articles que l'utilisateur achète.
- mode: Le mode de la session de paiement. Si les articles de paiement incluent au moins un article récurrent, passez « abonnement ».
- success_url: L'URL Stripe redirigera les utilisateurs si le paiement est réussi
- annuler_url: L'URL Stripe redirigera les utilisateurs s'ils annulent le paiement.
Au total, le fichier checkout-session.js devrait ressembler à ceci :
exporterdéfautasynchronefonctiongestionnaire(demande, résolution) {
si (méthode requise 'POSTE') {
constante { panier } = req.body ;essayer {
constante séance = attendre stripe.checkout.sessions.create({
éléments_de_ligne: [
Chariot
],
mode: 'paiement',
success_url: `${req.headers.origin}/success`,
annuler_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} attraper (erre) {
res.status (err.statusCode || 500).json (erreur.message);
}
} autre {
res.setHeader('Permettre', 'POSTE');
res.statut(405).fin('Méthode Non Autorisée');
}
}
Cette fonction utilise maintenant le try/catch pour rediriger les utilisateurs lorsqu'une erreur se produit lors du paiement. Maintenant que vous avez créé la route API qui traitera le paiement, l'étape suivante consiste à créer un composant de paiement pour gérer le processus de paiement.
Découvrez ce post sur création de routes d'API dans Next.js pour une explication plus approfondie des itinéraires de l'API Next.js.
Création d'un composant de paiement
Pour traiter le paiement, vous devez installer la bibliothèque @stripe/stripe-js à l'aide de NPM.
npm installer @stripe/stripe-js
La bibliothèque @stripe/stripe-js est un utilitaire de chargement qui vous aidera à charger l'instance Stripe.js.
Une fois l'installation terminée, créez un nouveau fichier dans votre répertoire /components nommé /components/checkout.js. Appelez ensuite la fonctionloadstripe de la bibliothèque @stripe/stripe-js, en passant la clé publiable comme argument.
importer { loadStripe } depuis'@stripe/stripe-js';
constante stripePromise = loadStripe(
processus.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() renvoie une promesse qui se résout avec un objet Stripe nouvellement créé une fois que Stripe.js a été chargé.
Ensuite, ajoutez une fonction pour créer une session de paiement dans le composant.
exporterdéfautfonctionVérifier({Chariot}) {
constante handleCheckout = asynchrone () => {
essayer {
constante rayure = attendre stripePromise ;constante checkoutSession = attendre axios.post("/api/checkout-session", {
Chariot,
});constante résultat = attendre stripe.redirectToCheckout({
identifiant de session: checkoutSession.data.id,
});
si (result.error) {
alerte (result.error.message);
}
} attraper (erreur) {
console.log (erreur);
}
};
retour (
</div>
);
}
Cette fonction utilise Axios pour appeler l'API que vous avez créé dans le dossier /api pour récupérer la session de paiement.
Ajoutez un bouton de paiement dans l'instruction de retour qui déclenchera la fonction handleCheckout lorsque vous cliquerez dessus.
Vous pouvez appeler le composant de paiement sur la page du panier.
Gestion des redirections depuis Stripe
Dans la route de l'API de paiement, vous avez défini une URL de réussite et une URL d'annulation qui doivent rediriger un utilisateur lorsque le processus réussit ou échoue. L'URL d'annulation correspond à la route /cancel, tandis que l'URL de réussite correspond à la route /success. Ajoutez deux composants dans le dossier /pages nommés success et cancel pour gérer ces URL.
Dans pages/success.js, ajoutez le composant success.
exporterdéfautfonctionSuccès() {
retour<div>Commander avec succèsdiv>;
}
Dans pages/cancel.js, ajoutez le composant d'annulation.
exporterdéfautfonctionAnnuler() {
retour<div>Une erreur s'est produite lors du paiementdiv>;
}Maintenant, Stripe redirigera vers l'une de ces pages en fonction du statut de paiement.
Si vous utilisez Next.js 13, consultez ce tutoriel sur comment le dossier app fonctionne dans Next.js 13 pour passer du dossier /pages.
Options de personnalisation supplémentaires pour la page de paiement
Depuis le tableau de bord Stripe, vous pouvez personnaliser la page de paiement pour qu'elle corresponde à l'apparence de votre marque. Vous pouvez ajouter un logo, une icône, une couleur de marque, une couleur d'accentuation et même utiliser votre propre domaine personnalisé. De plus, lors de la création de la session de paiement, vous pouvez ajouter les méthodes de paiement que vous préférez et également spécifier la langue que Stripe doit afficher sur la page de paiement. Toutes ces options vous permettent de personnaliser le processus de paiement en fonction de votre application.
Pourquoi utiliser Stripe pour la page de paiement ?
Bien que vous puissiez créer votre propre service de traitement des paiements, l'utilisation d'une plateforme de paiement comme Stripe est généralement une meilleure option. Stripe Checkout vous aide à réduire le temps de développement, vous permettant de commencer à accepter des paiements en peu de temps.
De plus, vous bénéficiez de fonctionnalités supplémentaires telles que la conformité PCI, la récupération du panier, les capacités de remise et la possibilité de collecter des informations d'expédition et d'envoyer des factures après paiement.