📦 Integración con APIs externas (Stripe, Firebase, etc.)

📦 Integración con APIs externas (Stripe, Firebase, etc.)

Aprende cómo conectar tu aplicación Next.js con APIs externas como Stripe, Firebase y otros servicios, gestionando datos de forma segura y eficiente tanto en el cliente como en el servidor.

---

🌍 ¿Por qué integrar APIs externas?

Las APIs externas permiten que tu aplicación Next.js se comunique con servicios de terceros (pagos, bases de datos en la nube, autenticación, analítica, etc.). Esta integración amplía las capacidades de tu app sin necesidad de desarrollar todo desde cero.

Algunos ejemplos comunes incluyen:

• 💳 Stripe para pagos en línea
• 🔥 Firebase para autenticación y base de datos en tiempo real
• 🌐 GitHub API o OpenWeather para obtener datos externos

---

💳 Integración con Stripe (pagos)

Stripe es una de las plataformas más usadas para procesar pagos online. Con Next.js puedes crear endpoints seguros en el servidor y formularios en el cliente para gestionar los pagos.

📄 Instalación

npm install stripe

📄 pages/api/checkout.js

import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: [
          {
            price_data: {
              currency: 'usd',
              product_data: { name: 'Curso Next.js' },
              unit_amount: 1999,
            },
            quantity: 1,
          },
        ],
        mode: 'payment',
        success_url: 'http://localhost:3000/success',
        cancel_url: 'http://localhost:3000/cancel',
      });
      res.status(200).json({ id: session.id });
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}
      

📄 app/checkout/page.js

'use client';
import { useState } from 'react';

export default function CheckoutPage() {
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);
    const res = await fetch('/api/checkout', { method: 'POST' });
    const data = await res.json();
    window.location.href = `https://checkout.stripe.com/pay/${data.id}`;
  };

  return (
    <div className="text-center p-4">
      <h3 className="mb-3">Comprar curso Next.js</h3>
      <button onClick={handleCheckout} disabled={loading}
        className="btn btn-primary">
        {loading ? 'Procesando...' : 'Pagar con Stripe'}
      </button>
    </div>
  );
}
      

💡 Consejo: Nunca coloques tu clave privada de Stripe en el cliente. Guárdala en .env.local y accede a ella desde el servidor.

---

🔥 Integración con Firebase

Firebase ofrece múltiples servicios como autenticación, base de datos en tiempo real y almacenamiento. Para integrarlo en tu aplicación Next.js:

📄 Instalación

npm install firebase

📄 lib/firebase.js

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
      

📄 app/usuarios/page.js

'use client';
import { useEffect, useState } from 'react';
import { collection, getDocs } from 'firebase/firestore';
import { db } from '../../lib/firebase';

export default function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    const obtenerDatos = async () => {
      const querySnapshot = await getDocs(collection(db, 'usuarios'));
      setUsuarios(querySnapshot.docs.map(doc => doc.data()));
    };
    obtenerDatos();
  }, []);

  return (
    <div className="p-4">
      <h3 className="text-center mb-3">👥 Lista de Usuarios</h3>
      {usuarios.map((u, i) => (
        <div key={i} className="border p-2 rounded mb-2">
          <strong>{u.nombre}</strong> - {u.email}
        </div>
      ))}
    </div>
  );
}
      

✅ Con este setup puedes leer, escribir y autenticar usuarios fácilmente desde Firebase.

---

🧩 Conclusión

• Next.js permite integrar servicios externos de forma segura mediante API Routes.
• Usa variables de entorno (.env.local) para almacenar claves privadas.
• Stripe y Firebase son ejemplos populares para pagos y backend sin servidor.

💡 Consejo: Mantén la lógica sensible (claves, endpoints, tokens) siempre en el lado del servidor o protegida con variables de entorno.

← Volver al índice