En este tutorial aprenderas a crear una aplicacion de Nextjs que te permita aceptar pagos a traves de Paypal, para esto usaremos el modulo de Paypal para crear el boton de frontend en React y tambien utilizaremos su modulo de backend de Nodejs para crear una API que procese los pagos en el backend.

Creación del proyecto

Primero vamos a crear un proyecto de Nextjs, usando el siguiente comando0

npx create-next-app nextjs-paypal-tutorial

con las siguientes configuraciones:

✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

cd nextj-paypal-tutorial
code .

npm run dev

Añadiendo Boton de Paypal

Para añadir Paypal, vamos a usar el Paquete de npm llamado @paypal/react-paypal-js

npm install @paypal/react-paypal-js

Luego añade el siguiente codigo en la el componente principal.

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

function HomePage() {
  return (
    <div className="h-screen bg-slate-900 flex items-center justify-center">
      <PayPalScriptProvider options={{ clientId: "test" }}>
        <PayPalButtons style={{ layout: "horizontal" }} />
      </PayPalScriptProvider>
    </div>
  );
}

export default HomePage;

Luego ve en el Portal de desarrolladores de Paypal https://developer.paypal.com/home

Crea una aplicacion y alli obtendras un Client ID de la aplicacion luego pegalo en el clientId del componnte de paypal

    <div className="h-screen bg-slate-900 flex items-center justify-center">
      <PayPalScriptProvider
        options={{
          clientId:
            "AXXL9Zy4gU8R2iMkav-iShoIl1BuLRrqgeyWPj5dAAyTZE5OlgiGzXj0nvxb84nfmw8HTFP_pV6KYkgF",
        }}
      >
        <PayPalButtons style={{ layout: "vertical", color: "silver" }} />
      </PayPalScriptProvider>
    </div>

Tambien puedes añadir propidades como el Layout para el posicionamiento del boton y el color para los colores del boton

Luego vamos a añadir los eventos del boton:

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

function HomePage() {
  return (
    <div className="h-screen bg-slate-900 flex items-center justify-center">
      <PayPalScriptProvider
        options={{
          clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID,
        }}
      >
        <PayPalButtons
          style={{ layout: "vertical", color: "silver" }}
          createOrder={async (data, actions) => {
            const res = await fetch("/api/checkout", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
            });
            const order = await res.json();
            console.log(order);
          }}
          onCancel={(data) => {
            console.log("Cancelled:", data);
          }}
          onApprove={(data, actions) => {
            console.log("Approved:", data);
            return actions.order.capture();
          }}
        />
      </PayPalScriptProvider>
    </div>
  );
}

export default HomePage;

Vamos a crear una API:

https://www.npmjs.com/package/@paypal/checkout-server-sdk

Más recursos