Comment ajouter Stripe Checkout à une application Next.js
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 demandes de votre application à l’API Stripe.
Suivez ces étapes pour configurer un compte Stripe :
- Allez sur le 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 » vers le fichier. env dans le 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.
npm install stripe
Importez la bibliothèque Stripe dans votre page de composant de paiement.
import Stripe from 'stripe';
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.
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
Dans la fonction de gestionnaire, récupérez les éléments à extraire à partir des paramètres du corps.
export default async function handler(req, res) {
const { item } = req.body;
};
Créez un objet de session de paiement à la fonction de gestionnaire et transmettez les éléments.
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
item,
],
mode: 'payment',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
Voici ce que signifient les nœuds que vous transmettez à l’objet de session :
- payment_method_types : types de méthodes de paiement acceptés par la session de paiement. Parcourez la liste des modes de paiement disponibles dans la documentation de 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
- cancel_url : L’URL Stripe redirigera les utilisateurs s’ils annulent le paiement.
Au total, le fichier checkout-session.js devrait ressembler à ceci :
export default async function handler(req, res) {
if (req.method === 'POST') {
const { cart } = req.body;
try {
const session = await stripe.checkout.sessions.create({
line_items: [
cart
],
mode: 'payment',
success_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} catch (err) {
res.status(err.statusCode || 500).json(err.message);
}
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Method Not Allowed');
}
}
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.
Consultez cet article sur la création de routes d’API dans Next.js pour une explication plus approfondie des routes d’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 install @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.
import { loadStripe } from '@stripe/stripe-js';
const stripePromise = loadStripe(
process.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.
export default function Checkout({cart}) {
const handleCheckout = async () => {
try {
const stripe = await stripePromise;
const checkoutSession = await axios.post("/api/checkout-session", {
cart,
});
const result = await stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
if (result.error) {
alert(result.error.message);
}
} catch (error) {
console.log(error);
}
};
return (
<div>
</div>
);
}
Cette fonction utilise Axios pour appeler l’API que vous avez créée 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.
<button onClick={handleCheckout}>
Checkout
</button>
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.
export default function Success() {
return <div>Checkout out successfully</div>;
}
Dans pages/cancel.js, ajoutez le composant d’annulation.
export default function Cancel() {
return <div>An error occurred during checkout</div>;
}
Maintenant, Stripe redirigera vers l’une de ces pages en fonction du statut de paiement.
Si vous utilisez Next.js 13, consultez ce didacticiel sur le fonctionnement du dossier de l’application 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.
Laisser un commentaire