Introduccion a pagos con Stripe - Implementacion de pagos en linea

Lo que aprenderas en este tutorial

✓ Configuracion de cuenta Stripe
✓ Checkout Session
✓ Procesamiento de Webhooks
✓ Suscripciones
✓ Metodos de prueba

Step 1: Configuracion

npm install stripe @stripe/stripe-js

// lib/stripe.ts
import Stripe from 'stripe';

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-12-18.acacia',
});

Step 2: Crear Checkout Session

// app/api/checkout/route.ts
import { stripe } from '@/lib/stripe';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const { priceId } = await request.json();

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
  });

  return NextResponse.json({ url: session.url });
}

Step 3: Lado del cliente

'use client';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);

export function CheckoutButton({ priceId }: { priceId: string }) {
  const handleClick = async () => {
    const res = await fetch('/api/checkout', {
      method: 'POST',
      body: JSON.stringify({ priceId }),
    });
    const { url } = await res.json();
    window.location.href = url;
  };

  return <button onClick={handleClick}>Comprar</button>;
}

Step 4: Procesamiento de Webhooks

// app/api/webhook/route.ts
import { stripe } from '@/lib/stripe';
import { headers } from 'next/headers';

export async function POST(request: Request) {
  const body = await request.text();
  const sig = headers().get('stripe-signature')!;

  let event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return new Response('Webhook Error', { status: 400 });
  }

  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      // Procesamiento del pedido
      await handleSuccessfulPayment(session);
      break;
    case 'payment_intent.payment_failed':
      // Procesamiento de fallo
      break;
  }

  return new Response('OK');
}

Step 5: Suscripciones

// Checkout para suscripcion
const session = await stripe.checkout.sessions.create({
  mode: 'subscription',
  line_items: [
    {
      price: 'price_xxxxx', // ID de precio recurrente
      quantity: 1,
    },
  ],
  success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
  cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
});

// Cancelar suscripcion
await stripe.subscriptions.cancel(subscriptionId);

Step 6: Customer Portal

// Crear sesion del portal de clientes
const session = await stripe.billingPortal.sessions.create({
  customer: customerId,
  return_url: `${process.env.NEXT_PUBLIC_URL}/account`,
});

// Redirigir a session.url

Step 7: Pruebas

# Instalar Stripe CLI
brew install stripe/stripe-cli/stripe

# Iniciar sesion
stripe login

# Reenvio de Webhooks
stripe listen --forward-to localhost:3000/api/webhook

Tarjetas de prueba:

• Exito: 4242 4242 4242 4242
• Fallo: 4000 0000 0000 0002
• Requiere autenticacion: 4000 0025 0000 3155

Resumen

Puedes implementar funcionalidad de pago segura con Stripe. Comienza facilmente con Checkout Session y automatiza el procesamiento de pedidos con Webhooks.