Tu primer webhook de Stripe llega 847 milisegundos después de que el cargo se procesa exitosamente. Tu base de datos aún muestra 'pendiente'. El cliente recarga la página, vuelve a hacer clic en 'Pagar' y ahora tiene un doble cargo. He depurado esta condición de carrera a las 2 AM en tres tiendas en producción. La API de Stripe ha evolucionado — Checkout Sessions ahora soportan Link de un clic, Payment Intents manejan Apple Pay y Google Pay de forma nativa, y la verificación de firma webhook falla silenciosamente si tu función serverless reescribe el cuerpo crudo. Esta guía cubre los ocho patrones de integración que se mantienen en producción: Checkout Sessions, Payment Intents, idempotencia de webhooks, hooks de ciclo de vida de suscripción, configuración de pagos con billetera, y las tres decisiones arquitectónicas que previenen la pesadilla de 847ms. Comenzamos con el manejador de webhook, porque es donde la mayoría de integraciones fallan primero.

A mediados de 2026, la API de Stripe está en la versión 2025-12-18.acacia, Next.js 15.x es estable con el App Router como predeterminado, y los paquetes @stripe/stripe-js y @stripe/react-stripe-js han madurado considerablemente. Si estás construyendo sobre versiones más antiguas, la mayoría de esto sigue siendo aplicable, pero algunos patrones de server action diferirán.

Tabla de Contenidos

Stripe + Next.js Comercio Headless: La Guía de Integración 2026

Por qué Stripe + Next.js para Comercio Headless

Stripe procesa más de $1 billón en volumen de pago anualmente. Next.js potencia una parte creciente de vitrinas de ecommerce — Vercel reporta que más del 40% de nuevos proyectos Next.js en 2026 tienen alguna forma de funcionalidad de comercio. La combinación tiene sentido por algunas razones concretas:

  • Server Components y Server Actions te permiten llamar al SDK de Stripe del lado del servidor sin construir una capa de API separada.
  • Despliegue en Edge y serverless en Vercel, Netlify o AWS significa que tus endpoints de pago se escalan automáticamente.
  • React Server Components mantienen tu clave secreta de Stripe en el servidor donde debe estar, sin trucos adicionales.
  • El App Router te da layouts, estados de carga y error boundaries que se asignan bien a flujos de checkout.

Si estás evaluando arquitecturas de comercio headless, hemos construido docenas de estas en Social Animal — consulta nuestras capacidades de desarrollo Next.js y desarrollo de CMS headless para más contexto sobre cómo encajan estas piezas.

Descripción General de Arquitectura

Antes de escribir cualquier código, obtengamos la arquitectura correcta. Aquí está cómo las piezas se conectan en una configuración de comercio headless típica:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│   Next.js App   │────▶│  Stripe API      │────▶│  Webhooks   │
│  (App Router)   │◀────│  (Server-side)   │     │  Endpoint   │
└─────────────────┘     └──────────────────┘     └──────┬──────┘
        │                                                │
        │                                                ▼
        ▼                                        ┌─────────────┐
┌─────────────────┐                              │  Database /  │
│  Headless CMS   │                              │  Order Mgmt  │
│  (Products)     │                              └─────────────┘
└─────────────────┘

La decisión crítica es si usar Checkout Sessions (alojadas o incrustadas por Stripe) o Payment Intents (interfaz completamente personalizada). Aquí está cuándo usar cada una:

Característica Checkout Sessions Payment Intents
Velocidad de desarrollo Rápido — días Más lento — semanas
Personalización de UI Limitada (tema Stripe) Control total
Alcance de cumplimiento PCI SAQ A (más simple) SAQ A-EP
Soporte de método de pago Automático (40+ métodos) Manual por método
Soporte de suscripción Incorporado Requiere código adicional
Apple Pay / Google Pay Automático Manual vía Payment Request API
Optimización de conversión Optimizado por Stripe Tú eres responsable
Impacto de precios Mismas tarifas de Stripe Mismas tarifas de Stripe

Mi recomendación honesta: comienza con Checkout Sessions a menos que tengas una razón específica para no hacerlo. Siempre puedes migrar a Payment Intents después, y el checkout incrustado de Stripe ha mejorado notablemente en 2026.

Configurar Stripe en un Proyecto Next.js 15

Configuremos la base. Asumo que tienes un proyecto Next.js 15 con el App Router.

npm install stripe @stripe/stripe-js @stripe/react-stripe-js

Crea tus variables de entorno:

# .env.local
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

Configura una instancia de Stripe del lado del servidor. Siempre la pongo en un archivo lib/stripe.ts:

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

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

Y un cargador del lado del cliente:

// lib/stripe-client.ts
import { loadStripe } from '@stripe/stripe-js';

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

Una cosa que confunde a la gente: nunca importes lib/stripe.ts en un componente cliente. El paquete npm stripe incluye tu clave secreta y solo debe ejecutarse del lado del servidor. Next.js 15 lanzará un error de compilación si accidentalmente lo importas en un archivo 'use client', lo que es en realidad un buen guardrail.

Stripe + Next.js Comercio Headless: La Guía de Integración 2026 - arquitectura

Checkout Sessions: La Ruta Rápida

Checkout Sessions es la forma más rápida de aceptar pagos. Stripe aloja el formulario de pago (o lo incrustas), maneja cumplimiento PCI, y automáticamente soporta docenas de métodos de pago incluyendo Apple Pay, Google Pay y Link.

Crear una Checkout Session con Server Actions

// app/actions/checkout.ts
'use server';

import { stripe } from '@/lib/stripe';
import { redirect } from 'next/navigation';

export async function createCheckoutSession(formData: FormData) {
  const priceId = formData.get('priceId') as string;
  const quantity = Number(formData.get('quantity')) || 1;

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    line_items: [
      {
        price: priceId,
        quantity,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/checkout/canceled`,
    automatic_tax: { enabled: true },
    // Enable all relevant payment methods
    payment_method_types: undefined, // Let Stripe auto-detect
  });

  redirect(session.url!);
}

Checkout Incrustado (Enfoque Recomendado 2026)

El checkout incrustado de Stripe mantiene a los usuarios en tu dominio. Esto tiene mejores tasas de conversión — los datos propios de Stripe de años recientes muestran una mejora de 10-15% sobre el checkout basado en redirección para clientes recurrentes.

// app/checkout/embedded/page.tsx
'use client';

import { useCallback } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout,
} from '@stripe/react-stripe-js';

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

export default function CheckoutPage() {
  const fetchClientSecret = useCallback(async () => {
    const res = await fetch('/api/checkout/embedded', {
      method: 'POST',
      body: JSON.stringify({ priceId: 'price_xxx', quantity: 1 }),
    });
    const { clientSecret } = await res.json();
    return clientSecret;
  }, []);

  return (
    <div className="max-w-lg mx-auto py-12">
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={{ fetchClientSecret }}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  );
}

Y la ruta de API:

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

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

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    line_items: [{ price: priceId, quantity }],
    ui_mode: 'embedded',
    return_url: `${process.env.NEXT_PUBLIC_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
  });

  return NextResponse.json({ clientSecret: session.client_secret });
}

Payment Intents: Modo Control Total

Cuando necesitas una interfaz de checkout completamente personalizada — tal vez estés construyendo un checkout de una página, o tu equipo de diseño tiene requisitos específicos — Payment Intents te dan control total.

El compromiso es real: escribirás más código, manejarás más casos extremos, y asumirás una carga de cumplimiento PCI ligeramente más alta. Pero para algunos productos, vale la pena.

Lado del Servidor: Crear Payment Intents

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

export async function POST(req: Request) {
  const { amount, currency = 'usd', metadata } = await req.json();

  const paymentIntent = await stripe.paymentIntents.create({
    amount, // en centavos
    currency,
    metadata,
    automatic_payment_methods: {
      enabled: true, // Esto habilita Apple Pay, Google Pay, Link, etc.
    },
  });

  return NextResponse.json({
    clientSecret: paymentIntent.client_secret,
  });
}

Lado del Cliente: El Formulario de Pago

// components/PaymentForm.tsx
'use client';

import { useState } from 'react';
import {
  PaymentElement,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

export function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
  const [processing, setProcessing] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!stripe || !elements) return;

    setProcessing(true);
    setError(null);

    const { error: submitError } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/checkout/success`,
      },
    });

    if (submitError) {
      setError(submitError.message ?? 'Payment failed');
      setProcessing(false);
    }
    // Si no hay error, Stripe redirige automáticamente
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement
        options={{
          layout: 'accordion',
          wallets: {
            applePay: 'auto',
            googlePay: 'auto',
          },
        }}
      />
      {error && <p className="text-red-500 mt-2">{error}</p>}
      <button
        type="submit"
        disabled={!stripe || processing}
        className="mt-4 w-full bg-black text-white py-3 rounded-lg disabled:opacity-50"
      >
        {processing ? 'Procesando...' : 'Pagar ahora'}
      </button>
    </form>
  );
}

Nota el automatic_payment_methods: { enabled: true } en el lado del servidor. Esta es la forma de 2026 de manejar el soporte de método de pago. Stripe mostrará automáticamente los métodos de pago correctos basados en el dispositivo del cliente, ubicación y la moneda. No más listar manualmente payment_method_types.

Manejo de Webhooks Que Realmente Funciona

Los webhooks es donde la mayoría de integraciones de Stripe fallan. He visto sistemas de producción perder órdenes porque alguien olvidó verificar la firma del webhook, o porque el manejador lanzó un error antes de enviar un 200.

Aquí está mi manejador de webhook probado en batalla:

// app/api/webhooks/stripe/route.ts
import { stripe } from '@/lib/stripe';
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';
import type Stripe from 'stripe';

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

  if (!signature) {
    return NextResponse.json({ error: 'Missing signature' }, { status: 400 });
  }

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    console.error('Webhook signature verification failed:', err);
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
  }

  try {
    switch (event.type) {
      case 'checkout.session.completed': {
        const session = event.data.object as Stripe.Checkout.Session;
        await handleCheckoutComplete(session);
        break;
      }
      case 'payment_intent.succeeded': {
        const paymentIntent = event.data.object as Stripe.PaymentIntent;
        await handlePaymentSuccess(paymentIntent);
        break;
      }
      case 'payment_intent.payment_failed': {
        const paymentIntent = event.data.object as Stripe.PaymentIntent;
        await handlePaymentFailure(paymentIntent);
        break;
      }
      case 'customer.subscription.created':
      case 'customer.subscription.updated':
      case 'customer.subscription.deleted': {
        const subscription = event.data.object as Stripe.Subscription;
        await handleSubscriptionChange(subscription);
        break;
      }
      case 'invoice.payment_failed': {
        const invoice = event.data.object as Stripe.Invoice;
        await handleInvoiceFailure(invoice);
        break;
      }
      default:
        console.log(`Unhandled event type: ${event.type}`);
    }
  } catch (err) {
    console.error(`Error processing ${event.type}:`, err);
    // Aún así devuelve 200 para prevenir que Stripe reintente
    // Registra el error para investigación manual
  }

  return NextResponse.json({ received: true });
}

Gotchas de Webhook Que He Aprendido de la Manera Difícil

  1. Siempre devuelve 200, incluso si tu procesamiento falla. De lo contrario, Stripe reintenta, y podrías procesar el mismo evento múltiples veces. Registra el error y aborda después de forma asincrónica.

  2. Haz que los manejadores sean idempotentes. Stripe puede y enviará el mismo evento más de una vez. Usa el ID del evento o metadatos del objeto para verificar si ya lo has procesado.

  3. Usa req.text() no req.json() para verificación de firma. La firma se calcula sobre la cadena del cuerpo crudo. Si la parseas primero, la verificación siempre fallará.

  4. Configura la CLI de Stripe para pruebas locales. Es no negociable.

stripe listen --forward-to localhost:3000/api/webhooks/stripe
  1. En Vercel, las rutas de webhook necesitan configuración específica. Asegúrate de que tu ruta no esté detrás de ningún middleware que modifique el cuerpo de la solicitud. En Next.js 15, las rutas de API en el App Router manejan esto correctamente por defecto, pero verifica dos veces si tienes middleware personalizado.

Suscripciones y Facturación Recurrente

Las suscripciones agregan una capa de complejidad. No solo estás manejando un pago único — estás gestionando un ciclo de vida: pruebas, upgrades, downgrades, cancelaciones, pagos fallidos, dunning.

Crear una Suscripción vía Checkout

El enfoque más fácil:

// app/actions/subscribe.ts
'use server';

import { stripe } from '@/lib/stripe';
import { redirect } from 'next/navigation';

export async function createSubscriptionCheckout(
  customerId: string,
  priceId: string
) {
  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    customer: customerId,
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_URL}/account/billing?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
    subscription_data: {
      trial_period_days: 14,
      metadata: {
        plan: 'pro', // Tu propio metadata
      },
    },
    allow_promotion_codes: true,
    tax_id_collection: { enabled: true },
  });

  redirect(session.url!);
}

Administrar Suscripciones

Para el portal del cliente (upgrade, downgrade, cancelar, actualizar método de pago), el Customer Portal de Stripe es genuinamente excelente en 2026:

// app/actions/billing.ts
'use server';

import { stripe } from '@/lib/stripe';
import { redirect } from 'next/navigation';

export async function createBillingPortalSession(customerId: string) {
  const session = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: `${process.env.NEXT_PUBLIC_URL}/account/billing`,
  });

  redirect(session.url);
}

Eventos Clave de Webhook de Suscripción

Evento Cuándo Ocurre Qué Hacer
customer.subscription.created Nueva suscripción Provisionar acceso
customer.subscription.updated Cambio de plan, renovación Actualizar nivel de acceso
customer.subscription.deleted Cancelación (fin del período) Revocar acceso
invoice.payment_succeeded Renovación exitosa Actualizar registros de facturación
invoice.payment_failed Renovación fallida Enviar email de dunning, marcar cuenta
customer.subscription.trial_will_end 3 días antes de fin de prueba Enviar email recordatorio

No confíes únicamente en el estado de suscripción de la llamada de API. Los webhooks son la fuente de verdad para cambios de estado de suscripción. He visto equipos que consultan la API de Stripe en lugar de usar webhooks y es tanto más lento como más frágil.

La belleza del Payment Element de Stripe en 2026 es que los pagos con billetera en su mayoría simplemente funcionan. Pero hay algunos requisitos de configuración que la gente se pierde.

Configuración de Apple Pay

  1. Verificación de dominio es requerida. Necesitas alojar un archivo .well-known/apple-developer-merchantid-domain-association en tu raíz de dominio. Stripe proporciona este archivo en tu Dashboard bajo Settings → Payment Methods → Apple Pay.

  2. En Next.js, coloca el archivo en public/.well-known/apple-developer-merchantid-domain-association.

  3. Registra tu dominio en el Dashboard de Stripe.

  4. Apple Pay solo se muestra en Safari/iOS. No te alarmes cuando no aparezca en Chrome durante las pruebas.

Configuración de Google Pay

Google Pay requiere menos configuración — funciona automáticamente con el Payment Element siempre que tu cuenta de Stripe esté correctamente configurada. Se muestra en Chrome y en dispositivos Android.

Link es la respuesta de Stripe a Shop Pay. Los clientes guardan su información de pago una vez y pueden hacer checkout con un clic en cualquier comerciante de Stripe usando Link.

A partir de 2026, Link está habilitado por defecto en nuevas cuentas de Stripe. La mejora de conversión es real — Stripe reporta una mejora significativa en finalización de checkout cuando Link está disponible. Para usuarios recurrentes de Link, es mucho mayor.

Con el Payment Element, Link aparece automáticamente. Con Checkout Sessions, también es automático. No necesitas hacer nada especial.

// Link es automático con Payment Element, pero puedes personalizar:
<PaymentElement
  options={{
    wallets: {
      applePay: 'auto',
      googlePay: 'auto',
    },
    // Link aparece en el campo de email automáticamente
  }}
/>

Link merece su propia sección porque se ha convertido en un impulsor serio de conversión. Así es cómo funciona:

  1. El cliente ingresa su email en tu formulario de checkout.
  2. Si tiene una cuenta de Link, recibe un código de verificación vía SMS.
  3. Después de verificación, su dirección guardada y método de pago se rellenan automáticamente.
  4. Hace clic en "Pagar" — listo.

La idea clave: Link funciona entre comerciantes. Si tu cliente usó Link en un sitio completamente diferente, obtendrá la experiencia de un clic en el tuyo también. El efecto de red de Stripe es real — reportan más de 100 millones de usuarios de Link a principios de 2026.

Para maximizar la adopción de Link, asegúrate de que el campo de email sea lo primero con lo que los clientes interactúen en tu flujo de checkout. El Payment Element maneja esto bien con el layout accordion.

Si quieres ir más allá, puedes usar el Express Checkout Element para mostrar Apple Pay, Google Pay y Link como botones prominentes encima de tu formulario:

// components/ExpressCheckout.tsx
'use client';

import { ExpressCheckoutElement } from '@stripe/react-stripe-js';

export function ExpressCheckout() {
  return (
    <ExpressCheckoutElement
      onConfirm={async (event) => {
        // Manejar confirmación de pago express
        console.log('Express checkout confirmed:', event);
      }}
      options={{
        buttonType: {
          applePay: 'buy',
          googlePay: 'buy',
        },
      }}
    />
  );
}

Seguridad, Pruebas y Lanzamiento

Lista de Verificación de Seguridad

  • Clave secreta de Stripe solo se usa del lado del servidor
  • Las firmas de webhook se verifican en cada solicitud
  • HTTPS se aplica en producción
  • Los cálculos de cantidad ocurren del lado del servidor (nunca confíes en cantidades enviadas por cliente)
  • Las rutas de API tienen limitación de velocidad
  • Los datos del cliente se manejan según tu política de privacidad
  • Los encabezados CSP permiten dominios de Stripe (js.stripe.com, api.stripe.com)

Pruebas

El modo de prueba de Stripe es excelente. Usa estos números de tarjeta de prueba:

Número de Tarjeta Escenario
4242 4242 4242 4242 Pago exitoso
4000 0000 0000 3220 3D Secure requerido
4000 0000 0000 9995 Rechazado
4000 0025 0000 3155 Requiere autenticación
4000 0000 0000 0341 Falla la vinculación (para tarjetas guardadas)

Para pruebas de suscripción, usa los test clocks de Stripe para simular el paso del tiempo sin esperar realmente.

Ir en Vivo

  1. Cambia tus claves de sk_test_ a sk_live_ y pk_test_ a pk_live_.
  2. Configura tu endpoint de webhook en vivo en el Dashboard de Stripe.
  3. Verifica tu dominio de Apple Pay para producción.
  4. Habilita los métodos de pago que deseas en el Dashboard de Stripe.
  5. Asegúrate de que tu cuenta de Stripe esté completamente activada (verificación de identidad, cuenta bancaria, etc.).

Consideraciones de Rendimiento

Stripe.js es ~40KB comprimido. Eso no es nada. Aquí hay algunos consejos:

  • Carga perezosa de Stripe.js. No lo cargues en cada página — solo en páginas relacionadas con checkout. La función loadStripe maneja esto bien; no obtendrá el script hasta que la llames.

  • Usa @stripe/stripe-js/pure si quieres controlar exactamente cuándo se carga el script:

import { loadStripe } from '@stripe/stripe-js/pure';
// El script no se cargará hasta que se llame loadStripe()

  • Server Components para páginas de producto. Mantén el código cliente de Stripe fuera de tu listado de productos y páginas de detalle. Solo trae los componentes cliente cuando el usuario realmente inicie checkout.

  • Edge runtime para rutas de API. El SDK de Node.js de Stripe funciona en el edge runtime. Puedes agregar export const runtime = 'edge' a tus rutas de API de Stripe para menor latencia.

Para equipos construyendo vitrinas de comercio headless de alto rendimiento, frameworks como Astro también pueden ser un gran ajuste para las páginas ricas en contenido mientras Next.js maneja los flujos de checkout dinámicos. Hemos hecho este enfoque híbrido para varios clientes — nuestros equipos de desarrollo de Astro y desarrollo de Next.js colaboran en estas arquitecturas regularmente.

Preguntas Frecuentes

¿Cuáles son las tarifas de transacción de Stripe en 2026? El precio estándar de Stripe es 2.9% + $0.30 por cargo de tarjeta exitoso en EE.UU. Para tarjetas europeas, es 1.5% + €0.25. Descuentos por volumen están disponibles para negocios procesando más de $1M anualmente. Stripe no cobra tarifas de configuración, tarifas mensuales ni cargos ocultos en el plan estándar. Stripe cobra un 0.5% adicional para tarjetas ingresadas manualmente y 1% para tarjetas internacionales.

¿Debo usar Checkout Sessions o Payment Intents? Usa Checkout Sessions en la mayoría de casos. Son más rápidos de implementar, automáticamente soportan 40+ métodos de pago, manejan cumplimiento PCI y Stripe continuamente optimiza la tasa de conversión. Usa Payment Intents cuando necesites una interfaz de checkout completamente personalizada que no pueda lograrse con Checkout incrustado, o cuando necesites control fino sobre el flujo de pago (como pagos divididos o captura manual).

¿Cómo manejo fallos de webhook en producción? Siempre devuelve estado 200 desde tu manejador de webhook, incluso si tu lógica de negocio falla. Registra el error y procésalo de forma asincrónica. Haz que tus manejadores sean idempotentes verificando el ID del evento contra tu base de datos antes de procesar. Stripe reintenta webhooks hasta por 3 días con backoff exponencial. Configura alertas de falla de webhook en el Dashboard de Stripe y considera usar una cola (como AWS SQS o Inngest) para procesar cargas de webhook de forma asincrónica.

¿Puedo usar Stripe con un CMS headless como Sanity o Contentful? Absolutamente. El patrón típico es: almacena información de producto y contenido en tu CMS headless, almacena precios y datos de pago en Stripe y conéctalos vía ID de producto o SKU compartido. Tu frontend de Next.js obtiene contenido del CMS y crea Stripe Checkout Sessions o Payment Intents cuando el cliente esté listo para comprar. Cubrimos este patrón extensamente en nuestro trabajo de desarrollo de CMS headless.

¿Cómo pruebo Apple Pay localmente? No puedes probar fácilmente Apple Pay en localhost porque requiere HTTPS y verificación de dominio. El mejor enfoque es usar el modo de prueba de Stripe con la tarjeta de prueba 4242 en el Payment Element — simula el flujo de pago. Para pruebas reales de Apple Pay, despliega a un entorno de staging con HTTPS. La CLI de Stripe también soporta reenvío de eventos de webhook para transacciones de Apple Pay.

¿Vale la pena habilitar Stripe Link? Sí. Link es gratuito para comerciantes — Stripe no cobra extra por ello. Aparece automáticamente en el Payment Element y Checkout Sessions. Stripe reporta que Link aumenta significativamente la finalización de checkout en promedio, con números más altos para usuarios recurrentes de Link. No hay desventaja al habilitarlo y con 100M+ usuarios de Link en 2026, el efecto de red es significativo.

¿Cómo manejo suscripciones con facturación medida en Next.js? Crea una suscripción con un precio medido en Stripe. Luego, usa la API de Usage Records para reportar uso desde tu backend. Al final de cada período de facturación, Stripe calcula automáticamente el total y cobra al cliente. Tu manejador de webhook debe escuchar eventos invoice.payment_succeeded e invoice.payment_failed para mantener tu sistema sincronizado. Reporta uso del lado del servidor usando un trabajo cron o arquitectura impulsada por eventos.

¿Cuál es la mejor manera de manejar moneda y precios para clientes internacionales? Stripe Adaptive Pricing (lanzado 2025) convierte automáticamente precios a la moneda local del cliente en checkout. Estableces precios en tu moneda base y Stripe maneja conversión, visualización y liquidación. Alternativamente, puedes crear múltiples precios por producto en diferentes monedas en Stripe para más control. Usa el IP del cliente o locale del navegador para determinar qué moneda mostrar en tus páginas de producto.

¿Cuánto cuesta construir una integración de comercio headless con Stripe? Depende del alcance. Una integración básica de Checkout Sessions puede hacerse en unos pocos días. Una configuración completa con suscripciones, portal del cliente, webhooks e interfaz personalizada típicamente toma 2-6 semanas de tiempo de desarrollo. Si quieres discutir tus necesidades específicas, consulta nuestra página de precios o ponte en contacto — hemos construido estas integraciones en una amplia gama de industrias y podemos darte una estimación realista.