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