Intégration PayPal

1. Introduction

Dans ce tutoriel, nous allons intégrer PayPal Checkout dans une application Next.js/React. PayPal fournit un SDK JavaScript qui permet d’ajouter un bouton de paiement sécurisé et de gérer les transactions en quelques lignes de code.

2. Configuration et installation

Pour tester, tu as besoin d’un compte PayPal Developer sur developer.paypal.com. Tu pourras y créer une application Sandbox et obtenir un client_id.

Installe ensuite le SDK PayPal React :

npm install @paypal/react-paypal-js

3. Créer un bouton PayPal

Crée un composant PayPalButton.js :

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function PayPalButton() {
  return (
    <PayPalScriptProvider options={{ "client-id": "YOUR_CLIENT_ID" }}>
      <PayPalButtons
        style={{ layout: "vertical" }}
        createOrder={(data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                amount: { value: "10.00" } // Montant du paiement
              },
            ],
          });
        }}
        onApprove={(data, actions) => {
          return actions.order.capture().then((details) => {
            alert(`Transaction réussie par ${details.payer.name.given_name}`);
          });
        }}
      />
    </PayPalScriptProvider>
  );
}

4. Utiliser le bouton dans ta page

Tu peux maintenant importer ton composant et afficher le bouton de paiement :

import PayPalButton from "@/components/PayPalButton";

export default function CheckoutPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen text-white">
      <h1 className="text-3xl mb-6">Paiement avec PayPal</h1>
      <PayPalButton />
    </div>
  );
}

Conclusion

Tu as maintenant un bouton PayPal entièrement fonctionnel dans ton app React/Next.js. Pour la mise en production, pense à utiliser ton client_id Live et non celui de Sandbox.

← Retour au blog← Retour à la playlist