Pago en línea - Dodo Payments Documentation

Descripción general

El pago en línea te permite crear experiencias de pago completamente integradas que se mezclan sin problemas con tu sitio web o aplicación. A diferencia del pago en superposición, que se abre como un modal sobre tu página, el pago en línea incrusta el formulario de pago directamente en el diseño de tu página. Usando el pago en línea, puedes:

Crear experiencias de pago que están completamente integradas con tu aplicación o sitio web
Permitir que Dodo Payments capture de forma segura la información del cliente y de pago en un marco de pago optimizado
Mostrar artículos, totales y otra información de Dodo Payments en tu página
Usar métodos y eventos del SDK para construir experiencias de pago avanzadas

Cómo funciona

El pago en línea funciona incrustando un marco seguro de Dodo Payments en tu sitio web o aplicación. El marco de pago se encarga de recopilar la información del cliente y capturar los detalles de pago. Tu página muestra la lista de artículos, totales y opciones para cambiar lo que hay en el pago. El SDK permite que tu página y el marco de pago interactúen entre sí. Dodo Payments crea automáticamente una suscripción cuando se completa un pago, lista para que la provisionen.

El marco de inline checkout gestiona de forma segura toda la información de pago sensible, garantizando el cumplimiento de PCI sin que necesites certificación adicional.

¿Qué hace que un buen pago en línea?

Es importante que los clientes sepan de quién están comprando, qué están comprando y cuánto están pagando. Para construir un pago en línea que sea conforme y optimizado para la conversión, tu implementación debe incluir:

Ejemplo de pago en línea con elementos requeridos etiquetados — Example inline checkout layout showing required elements

Información recurrente: Si es recurrente, con qué frecuencia se repite y el total a pagar en la renovación. Si es una prueba, cuánto dura la prueba.
Descripciones de artículos: Una descripción de lo que se está comprando.
Totales de transacción: Totales de transacción, incluyendo subtotal, total de impuestos y total general. Asegúrate de incluir también la moneda.
Pie de página de Dodo Payments: El marco completo de pago en línea, incluyendo el pie de página de pago que tiene información sobre Dodo Payments, nuestros términos de venta y nuestra política de privacidad.
Política de reembolso: Un enlace a tu política de reembolso, si difiere de la política de reembolso estándar de Dodo Payments.

Siempre muestra el marco completo de inline checkout, incluido el pie de página. Eliminar u ocultar la información legal incumple los requisitos de conformidad.

Viaje del cliente

El flujo de pago está determinado por la configuración de tu sesión de pago. Dependiendo de cómo configures la sesión de pago, los clientes experimentarán un pago que puede presentar toda la información en una sola página o a través de múltiples pasos.

Customer opens checkout

Puedes abrir el pago en línea pasando artículos o una transacción existente. Usa el SDK para mostrar y actualizar la información en la página, y los métodos del SDK para actualizar los artículos según la interacción del cliente.

Página de pago inicial con lista de artículos y formulario de pago

Customer enters their details

El pago en línea primero pide a los clientes que ingresen su dirección de correo electrónico, seleccionen su país y (donde sea necesario) ingresen su código postal. Este paso recopila toda la información necesaria para determinar impuestos y opciones de pago disponibles.Puedes prellenar los detalles del cliente y presentar direcciones guardadas para agilizar la experiencia.

Customer selects payment method

Después de ingresar sus datos, se presentan a los clientes los métodos de pago disponibles y el formulario de pago. Las opciones pueden incluir tarjeta de crédito o débito, PayPal, Apple Pay, Google Pay y otros métodos de pago locales según su ubicación.Muestra los métodos de pago guardados si están disponibles para acelerar el pago.

Métodos de pago disponibles y formulario de detalles de tarjeta

Checkout completed

Dodo Payments dirige cada pago al mejor adquirente para esa venta para obtener la mejor oportunidad de éxito. Los clientes ingresan a un flujo de éxito que puedes construir.

Pantalla de éxito con marca de verificación de confirmación

Dodo Payments creates subscription

Dodo Payments crea automáticamente una suscripción para el cliente, lista para que la provisionen. El método de pago que utilizó el cliente se guarda para renovaciones o cambios de suscripción.

Suscripción creada con notificación de webhook

Inicio Rápido

Comienza con el Pago en Línea de Dodo Payments en solo unas pocas líneas de código:

import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK for inline mode
DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout in a specific container
DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout" // ID of the container element
});

Asegúrate de tener un elemento contenedor con el id correspondiente en tu página: <div id="dodo-inline-checkout"></div>.

Guía de Integración Paso a Paso

Install the SDK

Instala el SDK de Dodo Payments Checkout:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK for Inline Display

Inicializa el SDK y especifica displayType: 'inline'. También debes escuchar el evento checkout.breakdown para actualizar tu interfaz de usuario con los cálculos de impuestos y totales en tiempo real.

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Create a Container Element

Agrega un elemento a tu HTML donde se inyectará el marco de pago:

<div id="dodo-inline-checkout"></div>

Open the Checkout

Llama a DodoPayments.Checkout.open() con el checkoutUrl y el elementId de tu contenedor:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Test Your Integration

Inicia tu servidor de desarrollo:

npm run dev

Prueba el flujo de pago:
- Ingresa tu correo electrónico y detalles de dirección en el marco en línea.
- Verifica que tu resumen de pedido personalizado se actualice en tiempo real.
- Prueba el flujo de pago usando credenciales de prueba.
- Confirma que las redirecciones funcionen correctamente.

Deberías ver eventos checkout.breakdown registrados en la consola del navegador si agregaste un console.log en la devolución onEvent.

Go Live

Cuando estés listo para producción:

Cambia el modo a 'live':

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

Actualiza tus URLs de pago para usar sesiones de pago en vivo desde tu backend.
Prueba el flujo completo en producción.

Ejemplo Completo en React

Este ejemplo muestra cómo implementar un resumen de pedido personalizado junto al inline checkout, manteniéndolos sincronizados mediante el evento checkout.breakdown.

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Referencia de API

Configuración

Opciones de Inicialización

interface InitializeOptions {
  mode: "test" | "live";
  displayType: "inline"; // Required for inline checkout
  onEvent: (event: CheckoutEvent) => void;
}

Opción	Tipo	Requerido	Descripción
`mode`	`"test" \| "live"`	Sí	Modo de entorno.
`displayType`	`"inline" \| "overlay"`	Sí	Debe establecerse en `"inline"` para incrustar el checkout.
`onEvent`	`function`	Sí	Función de devolución para manejar eventos del checkout.

Opciones de Pago

export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type FontWeight = "normal" | "medium" | "bold" | "extraBold";

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

Opción	Tipo	Requerido	Descripción
`checkoutUrl`	`string`	Sí	URL de la sesión de pago.
`elementId`	`string`	Sí	El `id` del elemento DOM donde se debe renderizar el pago.
`options.showTimer`	`boolean`	No	Mostrar u ocultar el temporizador de pago. Predeterminado a `true`. Cuando está deshabilitado, recibirás el evento `checkout.link_expired` cuando la sesión expire.
`options.showSecurityBadge`	`boolean`	No	Mostrar u ocultar la insignia de seguridad. Predeterminado a `true`.
`options.payButtonText`	`string`	No	Texto personalizado para mostrar en el botón de pago.
`options.fontSize`	`FontSize`	No	Tamaño de fuente global para el pago.
`options.fontWeight`	`FontWeight`	No	Peso de la fuente global para el pago.

Métodos

Abrir Pago

Abre el marco de pago en el contenedor especificado.

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

También puedes pasar opciones adicionales para personalizar el comportamiento del pago:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout",
  options: {
    showTimer: false,
    showSecurityBadge: false,
    payButtonText: "Pay Now",
  },
});

Cerrar Pago

Elimina programáticamente el marco de pago y limpia los listeners de eventos.

DodoPayments.Checkout.close();

Verificar Estado

Indica si el marco de pago está actualmente inyectado.

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

Eventos

El SDK proporciona eventos en tiempo real a través del callback onEvent. Para el pago en línea, checkout.breakdown es particularmente útil para sincronizar tu UI.

Tipo de Evento	Descripción
`checkout.opened`	El marco de pago ha sido cargado.
`checkout.form_ready`	El formulario de pago está listo para recibir entrada del usuario. Útil para ocultar estados de carga y mostrar la interfaz de usuario de pago.
`checkout.breakdown`	Se activa cuando se actualizan precios, impuestos o descuentos.
`checkout.customer_details_submitted`	Se han enviado los detalles del cliente.
`checkout.pay_button_clicked`	Se activa cuando el cliente hace clic en el botón de pago. Útil para análisis y seguimiento de embudos de conversión.
`checkout.redirect`	El pago realizará una redirección (por ejemplo, a una página de banco).
`checkout.error`	Ocurrió un error durante el pago.
`checkout.link_expired`	Se activa cuando la sesión de pago expira. Solo se recibe cuando `showTimer` está configurado a `false`.

Datos del Análisis del Pago

El evento checkout.breakdown proporciona los siguientes datos:

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;         // Amount in cents
  tax?: number;              // Amount in cents
  total?: number;            // Amount in cents
  currency?: string;         // e.g., "USD"
  finalTotal?: number;       // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

Entendiendo el Evento de Análisis

El evento checkout.breakdown es la forma principal de mantener la interfaz de usuario de tu aplicación sincronizada con el estado de pago de Dodo Payments. Cuándo se activa:

Al inicializar: Inmediatamente después de que se carga y lista el marco de pago.
Al cambiar de dirección: Cada vez que el cliente selecciona un país o ingresa un código postal que resulta en un recálculo de impuestos.

Detalles del Campo:

Campo	Descripción
`subTotal`	La suma de todos los artículos de línea en la sesión antes de que se apliquen descuentos o impuestos.
`discount`	El valor total de todos los descuentos aplicados.
`tax`	El monto de impuestos calculado. En modo `inline`, esto se actualiza dinámicamente a medida que el usuario interactúa con los campos de dirección.
`total`	El resultado matemático de `subTotal - discount + tax` en la moneda base de la sesión.
`currency`	El código ISO de la moneda (por ejemplo, `"USD"`) para los valores estándar de subtotal, descuento e impuestos.
`finalTotal`	El monto real que se cobra al cliente. Esto puede incluir ajustes de cambio de divisa adicionales o tarifas de método de pago local que no son parte del desglose de precio básico.
`finalTotalCurrency`	La moneda en la que el cliente está realmente pagando. Esto puede diferir de `currency` si la paridad del poder adquisitivo o la conversión de moneda local está activa.

Consejos Clave de Integración:

Formato de Moneda: Los precios siempre se devuelven como enteros en la unidad monetaria más pequeña (por ejemplo, centavos para USD, yen para JPY). Para mostrarlos, divide por 100 (o la potencia de 10 correspondiente) o usa una biblioteca de formato como Intl.NumberFormat.
Manejo de Estados Iniciales: Cuando el pago se carga por primera vez, tax e discount pueden ser 0 o null hasta que el usuario proporcione su información de facturación o aplique un código. Tu UI debe manejar estos estados de manera adecuada (por ejemplo, mostrando un guion — u ocultando la fila).
El “Total Final” vs “Total”: Mientras que total te da el cálculo de precio estándar, finalTotal es la fuente de verdad para la transacción. Si finalTotal está presente, refleja exactamente lo que se cargará a la tarjeta del cliente, incluyendo cualquier ajuste dinámico.
Retroalimentación en Tiempo Real: Usa el campo tax para mostrar a los usuarios que los impuestos están siendo calculados en tiempo real. Esto proporciona una sensación de “en vivo” a tu página de pago y reduce la fricción durante el paso de ingreso de dirección.

Opciones de Implementación

Instalación del Gestor de Paquetes

Instala vía npm, yarn o pnpm como se muestra en la Guía de Integración Paso a Paso.

Implementación vía CDN

Para una integración rápida sin un paso de compilación, puedes usar nuestro CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Inline Checkout</title>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test",
            displayType: "inline",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <div id="dodo-inline-checkout"></div>

    <script>
        // Open the checkout
        DodoPaymentsCheckout.DodoPayments.Checkout.open({
            checkoutUrl: "https://test.dodopayments.com/session/cks_123",
            elementId: "dodo-inline-checkout"
        });
    </script>
</body>
</html>

Actualizar Método de Pago

El pago en línea admite actualizaciones de método de pago para suscripciones. Cuando un cliente necesita actualizar su método de pago — ya sea para una suscripción activa o para reactivar una suscripción en espera — puedes renderizar el flujo de actualización directamente dentro de la disposición de tu página.

Cómo Funciona

Llama a la API de Actualización de Método de Pago para obtener un payment_link:

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  type: 'new',
  return_url: 'https://example.com/return'
});

Pasa el payment_link devuelto como el checkoutUrl para abrir el pago en línea:

DodoPayments.Checkout.open({
  checkoutUrl: response.payment_link,
  elementId: "dodo-inline-checkout"
});

El marco en línea solo muestra el formulario de recopilación de método de pago. Los clientes pueden ingresar nuevos detalles de tarjeta o seleccionar un método de pago guardado sin salir de tu página.

Para Suscripciones en Espera

Al actualizar el método de pago para una suscripción en estado on_hold, Dodo Payments automáticamente crea un cargo por cualquier deuda pendiente. Monitorea los webhooks payment.succeeded e subscription.active para confirmar la reactivación.

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  type: 'new',
  return_url: 'https://example.com/return'
});

if (response.payment_id) {
  // Charge created for remaining dues
  // Open inline checkout for payment collection
  DodoPayments.Checkout.open({
    checkoutUrl: response.payment_link,
    elementId: "dodo-inline-checkout"
  });
}

También puedes usar un método de pago guardado existente en lugar de recopilar nuevos detalles pasando type: 'existing' con un payment_method_id a la API de Actualización de Método de Pago.

Manejo de Errores

El SDK proporciona información detallada sobre errores a través del sistema de eventos. Siempre implementa un manejo adecuado de errores en tu callback onEvent:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
    }
  }
});

Siempre maneja el evento checkout.error para proporcionar una buena experiencia al usuario cuando ocurran problemas.

Mejores Prácticas

Diseño Responsivo: Asegúrate de que tu elemento contenedor tenga suficiente ancho y alto. El iframe típicamente se expandirá para llenar su contenedor.
Sincronización: Usa el evento checkout.breakdown para mantener tu resumen de pedido personalizado o tablas de precios sincronizados con lo que el usuario ve en el marco de pago.
Estados de Esqueleto: Muestra un indicador de carga en tu contenedor hasta que se active el evento checkout.opened.
Limpieza: Llama a DodoPayments.Checkout.close() cuando tu componente se desmonte para limpiar el iframe y los listeners de eventos.

Para implementaciones en modo oscuro, se recomienda usar #0d0d0d como el color de fondo para una integración visual óptima con el marco de pago en línea.

Validación de Estado de Pago

No confíes únicamente en los eventos de pago en línea para determinar el éxito o fracaso del pago. Siempre implementa validación del lado del servidor usando webhooks y/o sondeo.

Por Qué la Validación del Lado del Servidor es Esencial

Aunque los eventos de pago en línea proporcionan retroalimentación en tiempo real, no deben ser tu única fuente de verdad para el estado de pago. Problemas de red, fallos del navegador o el cierre de la página por parte de los usuarios pueden hacer que se pierdan eventos. Para asegurar una validación de pago confiable:

Tu servidor debe escuchar eventos webhook - Dodo Payments envía webhooks para cambios de estado de pago
Implementa un mecanismo de sondeo - Tu frontend debe sondear a tu servidor para actualizaciones de estado
Combina ambos enfoques - Usa webhooks como fuente principal y sondeo como respaldo

Arquitectura Recomendad

Pasos de Implementación

1. Escucha eventos de pago - Cuando el usuario hace clic en pagar, comienza a prepararte para verificar el estado:

onEvent: (event) => {
  if (event.event_type === 'checkout.pay_button_clicked') {
    // Start polling your server for confirmed status
    startPolling();
  }
}

2. Sonne a tu servidor - Crea un endpoint que verifique tu base de datos para el estado de pago (actualizado por webhooks):

// Poll every 2 seconds until status is confirmed
const interval = setInterval(async () => {
  const { status } = await fetch(`/api/payments/${paymentId}/status`).then(r => r.json());
  if (status === 'succeeded' || status === 'failed') {
    clearInterval(interval);
    handlePaymentResult(status);
  }
}, 2000);

3. Maneja webhooks del lado del servidor - Actualiza tu base de datos cuando Dodo envía webhooks payment.succeeded o payment.failed. Consulta nuestra documentación de Webhooks para más detalles.

Solución de Problemas

Checkout frame is not appearing

Verifica que elementId coincida con el id de un div que realmente exista en el DOM.
Asegúrate de que displayType: 'inline' haya sido pasado a Initialize.
Revisa que el checkoutUrl sea válido.

Taxes are not updating in my UI

Asegúrate de estar escuchando el evento checkout.breakdown.
Los impuestos solo se calculan después de que el usuario ingrese un país y código postal válidos en el marco de pago.

Habilitación de Billeteras Digitales

Para información detallada sobre cómo configurar Apple Pay, Google Pay y otras billeteras digitales, consulta la página de Billeteras Digitales.

Configuración Rápida para Apple Pay

La verificación del dominio solo es necesaria para el checkout integrado (embedded). No es necesaria para el checkout alojado.

Apple Pay no está disponible para el checkout superpuesto.

Apple Pay se verifica por dominio desde el dashboard.

Open Wallet domains

Ve a Settings → Payment Methods y, en la fila de Apple Pay, haz clic en Manage domains.

Manage domains button on the Apple Pay row in Payment Methods settings — Open Wallet domains from the Apple Pay row

Download the domain association file

Desde el panel de dominios de Wallet, descarga el archivo de asociación.

Wallet domains panel with the Download file button — Download the Apple Pay domain association file

Haz clic en Register domain e introduce el dominio donde insertas el checkout integrado (por ejemplo, shop.example.com) y, a continuación, haz clic en Continue.

Register a domain form with a domain entered — Register the domain where you embed inline checkout

Host the file on your domain

Aloja el archivo en:

https://shop.example.com/.well-known/apple-developer-merchantid-domain-association

Debe servirse mediante HTTPS, ser accesible sin redirecciones y servirse con Content-Type: application/octet-stream o text/plain.

Verify the domain

Haz clic en Verify domain. Dodo Payments confirma que el archivo está disponible y envía tu dominio a Apple.

Verify your domain screen with the association file host path and Verify domain button — Verify the hosted association file

Confirm it's active

Cuando el estado muestre Active, Apple Pay estará habilitado para ese dominio. Usa el interruptor Enabled para activarlo o desactivarlo por dominio.

Wallet domains list showing domains with an Active Apple Pay status and Enabled toggles — Verified domains show an Active status

Test the integration

Abre el checkout en un dispositivo Apple
Verifica que aparezca el botón de Apple Pay
Completa una transacción de prueba

Compatibilidad de navegadores

El Checkout SDK de Dodo Payments es compatible con los siguientes navegadores:

Chrome (más reciente)
Firefox (más reciente)
Safari (más reciente)
Edge (más reciente)
IE11+

Checkout integrado frente a checkout superpuesto

Elige el tipo de checkout adecuado para tu caso de uso:

Función	Checkout integrado	Checkout superpuesto
Nivel de integración	Completamente integrado en la página	Modal sobre la página
Control del diseño	Control total	Limitado
Marca	Integrada de forma fluida	Separada de la página
Esfuerzo de implementación	Mayor	Menor
Ideal para	Páginas de checkout personalizadas, flujos de alta conversión	Integración rápida, páginas existentes

Usa el checkout integrado cuando quieras tener el máximo control sobre la experiencia de checkout y una marca integrada de forma fluida. Usa el checkout superpuesto para lograr una integración más rápida con cambios mínimos en tus páginas existentes.

Recursos relacionados

Overlay Checkout

Usa el checkout superpuesto para una integración rápida basada en modales.

Checkout Sessions API

Crea sesiones de checkout para impulsar tus experiencias de checkout.

Webhooks

Gestiona los eventos de pago en el servidor mediante webhooks.

Integration Guide

Guía completa para integrar Dodo Payments.

Para obtener más ayuda, visita nuestra comunidad de Discord o ponte en contacto con nuestro equipo de soporte para desarrolladores.

​Descripción general

​Cómo funciona

​¿Qué hace que un buen pago en línea?

​Viaje del cliente

​Inicio Rápido

​Guía de Integración Paso a Paso

​Ejemplo Completo en React

​Referencia de API

​Configuración

​Opciones de Inicialización

​Opciones de Pago

​Métodos

​Abrir Pago

​Cerrar Pago

​Verificar Estado

​Eventos

​Datos del Análisis del Pago

​Entendiendo el Evento de Análisis

​Opciones de Implementación

​Instalación del Gestor de Paquetes

​Implementación vía CDN

​Actualizar Método de Pago

​Cómo Funciona

​Para Suscripciones en Espera

​Manejo de Errores

​Mejores Prácticas

​Validación de Estado de Pago

​Por Qué la Validación del Lado del Servidor es Esencial

​Arquitectura Recomendad

​Pasos de Implementación

​Solución de Problemas

​Habilitación de Billeteras Digitales

​Configuración Rápida para Apple Pay

​Compatibilidad de navegadores

​Checkout integrado frente a checkout superpuesto

​Recursos relacionados

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

Descripción general

Cómo funciona

¿Qué hace que un buen pago en línea?

Viaje del cliente

Inicio Rápido

Guía de Integración Paso a Paso

Ejemplo Completo en React

Referencia de API

Configuración

Opciones de Inicialización

Opciones de Pago

Métodos

Abrir Pago

Cerrar Pago

Verificar Estado

Eventos

Datos del Análisis del Pago

Entendiendo el Evento de Análisis

Opciones de Implementación

Instalación del Gestor de Paquetes

Implementación vía CDN

Actualizar Método de Pago

Cómo Funciona

Para Suscripciones en Espera

Manejo de Errores

Mejores Prácticas

Validación de Estado de Pago

Por Qué la Validación del Lado del Servidor es Esencial

Arquitectura Recomendad

Pasos de Implementación

Solución de Problemas

Habilitación de Billeteras Digitales

Configuración Rápida para Apple Pay

Compatibilidad de navegadores

Checkout integrado frente a checkout superpuesto

Recursos relacionados