Pago en línea

El checkout integrado inserta un formulario de pago seguro directamente en el diseño de tu página. A diferencia del checkout superpuesto, que se abre como un modal, el checkout integrado pasa a formar parte de tu página. Tú controlas el diseño y puedes mostrar tu propio resumen del pedido junto al formulario de checkout.

Formulario de checkout integrado en una página de producto con resumen del pedido

Cómo funciona

El checkout integrado muestra un frame seguro de Dodo Payments en un contenedor de tu página. El frame gestiona la recopilación de la información del cliente y los datos de pago. Tu página muestra los artículos, los totales y otra información. El SDK permite que tu página y el frame de checkout se comuniquen entre sí. Cuando se completa el checkout, Dodo Payments crea el pago o la suscripción para un producto de suscripción, y envía un webhook para que puedas aprovisionar el acceso.

El frame de checkout integrado gestiona de forma segura toda la información de pago confidencial, lo que garantiza el cumplimiento de PCI sin necesidad de certificaciones adicionales por tu parte.

Qué caracteriza a un buen checkout integrado

Los clientes necesitan saber a quién le compran, qué compran y cuánto pagan. Tu implementación debe incluir:

Ejemplo de checkout integrado con los elementos obligatorios etiquetados — Example inline checkout layout showing required elements

Información recurrente: Si el pago es recurrente, muestra con qué frecuencia se repite y el total que se pagará en la renovación. Si se trata de una prueba, muestra su duración.
Descripciones de los artículos: Una descripción de lo que se está comprando.
Totales de la transacción: Subtotal, impuesto total y total general, incluida la moneda.
Pie de página de Dodo Payments: El frame completo de checkout integrado, incluido el pie de página con información de Dodo Payments, las condiciones de venta y la 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.

Muestra siempre el frame completo de checkout integrado, incluido el pie de página. Eliminar u ocultar información legal infringe los requisitos de cumplimiento.

Recorrido del cliente

El flujo de checkout depende de la configuración de tu sesión de checkout. Según cómo configures la sesión, los clientes pueden ver toda la información en una sola página o en varios pasos.

Customer opens checkout

Abres el checkout integrado pasando una URL de checkout. Usa eventos del SDK, como checkout.breakdown, para mostrar y actualizar información en la página.

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

Customer enters their details

En primer lugar, el checkout integrado pide a los clientes que introduzcan su dirección de correo electrónico, seleccionen su país y, cuando sea necesario, introduzcan su código ZIP o código postal. Este paso recopila toda la información necesaria para determinar los impuestos y las opciones de pago disponibles.Puedes rellenar previamente los datos del cliente y mostrar direcciones guardadas para agilizar la experiencia.

Customer selects payment method

Después de introducir sus datos, los clientes ven los métodos de pago disponibles y el formulario de pago. Las opciones pueden incluir tarjetas 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 agilizar el checkout.

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

Checkout completed

Dodo Payments dirige cada pago al mejor adquirente para esa venta, con el fin de maximizar las probabilidades de éxito. Los clientes acceden a un flujo de éxito que puedes crear.

Pantalla de éxito con marca de confirmación

Dodo Payments creates the payment or subscription

Dodo Payments crea el pago o la suscripción para un producto de suscripción, y envía un webhook para que puedas aprovisionar el acceso. El método de pago utilizado por el cliente se guarda para renovaciones o cambios de suscripción.

Suscripción creada con notificación de webhook

Inicio rápido

Instala el SDK, inicialízalo para el modo integrado y abre el checkout en un elemento contenedor:

import { DodoPayments } from "dodopayments-checkout";

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

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

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

Integración paso a paso

Install the SDK

Instala mediante npm, yarn o pnpm:

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'. Escucha el evento checkout.breakdown para actualizar tu interfaz con 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

Añade un elemento a tu HTML donde se inyectará el frame de checkout:

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

Open the Checkout

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

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

Test Your Integration

Inicia tu servidor de desarrollo:

npm run dev

Prueba el flujo de checkout:
- Introduce tu correo electrónico y los datos de dirección en el frame integrado
- Comprueba que tu resumen personalizado del pedido se actualice en tiempo real
- Prueba el flujo de pago con credenciales de prueba
- Confirma que las redirecciones funcionen correctamente

Deberías ver eventos checkout.breakdown registrados en la consola del navegador si añadiste un registro de consola en el callback 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 las URL de checkout para utilizar sesiones de checkout activas desde tu backend
Prueba el flujo completo en producción

Ejemplo completo de React

Este ejemplo muestra cómo implementar un resumen personalizado del pedido junto al checkout integrado y mantenerlos 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.checkout.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 != null && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount != null && breakdown.discount > 0 && (
            <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) != null && (
            <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 la API

Inicializar

Llama a Initialize una vez para configurar el SDK:

interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}

DodoPayments.Initialize(options);

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

Abrir el checkout

Abre el frame de checkout en un contenedor:

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

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

DodoPayments.Checkout.open(options);

Opción	Tipo	Obligatorio	Descripción
`checkoutUrl`	`string`	Sí	URL de la sesión de checkout de la API para crear una sesión de checkout
`elementId`	`string`	Sí	El `id` del elemento DOM donde debe mostrarse el checkout
`options.showTimer`	`boolean`	No	Muestra u oculta el temporizador de la sesión. El valor predeterminado es `true`. Cuando se establece en `false`, recibes el evento `checkout.link_expired` cuando caduca la sesión.
`options.showSecurityBadge`	`boolean`	No	Muestra u oculta la insignia de seguridad. El valor predeterminado es `true`
`options.manualRedirect`	`boolean`	No	Cuando es `true`, impide las redirecciones automáticas. El checkout emite `checkout.status` con el resultado del pago y `checkout.redirect_requested` con la URL que se debe abrir; tú gestionas la navegación
`options.payButtonText`	`string`	No	Texto personalizado para el botón de pago
`options.fontSize`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	No	Tamaño de fuente global del checkout
`options.fontWeight`	`"normal" \| "medium" \| "bold" \| "extraBold"`	No	Peso de fuente global del checkout

Cerrar el checkout

Elimina el frame de checkout mediante programación y limpia los listeners de eventos:

DodoPayments.Checkout.close();

Comprobar el estado

Comprueba si el frame de checkout está insertado actualmente:

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

Eventos

El SDK proporciona eventos en tiempo real mediante el callback onEvent. Para el checkout integrado, checkout.breakdown resulta especialmente útil para sincronizar tu interfaz:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Frame has loaded
        break;
      case "checkout.form_ready":
        // Form is ready for user input
        break;
      case "checkout.breakdown":
        // Prices, taxes, or discounts updated
        break;
      case "checkout.customer_details_submitted":
        // Customer details submitted
        break;
      case "checkout.pay_button_clicked":
        // Customer clicked pay button
        break;
      case "checkout.redirect":
        // Checkout will redirect
        break;
      case "checkout.error":
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Session expired (only when showTimer is false)
        break;
    }
  }
});

Evento	Descripción
`checkout.opened`	El frame de checkout se ha cargado
`checkout.form_ready`	El formulario está listo para que el usuario introduzca datos. Úsalo para ocultar los estados de carga
`checkout.breakdown`	Precios, impuestos o descuentos actualizados
`checkout.customer_details_submitted`	Datos del cliente enviados
`checkout.pay_button_clicked`	El cliente ha hecho clic en el botón de pago. Útil para analíticas y seguimiento de embudos de conversión
`checkout.redirect`	El checkout va a redirigir, por ejemplo, a una página bancaria
`checkout.error`	Se produjo un error durante el checkout
`checkout.link_expired`	La sesión de checkout caducó. Solo se recibe cuando `showTimer` está establecido en `false`

Datos del desglose del checkout

El evento checkout.breakdown proporciona información sobre precios e impuestos:

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
}

El evento se activa cuando se carga el frame de checkout y cada vez que se recalcula el precio; por ejemplo, cuando el cliente selecciona un país o introduce un código postal que modifica el impuesto. Detalles de los campos:

Campo	Descripción
`subTotal`	Suma de todos los artículos antes de descuentos o impuestos
`discount`	Valor total de todos los descuentos aplicados
`tax`	Importe del impuesto calculado. Se actualiza dinámicamente cuando el usuario interactúa con los campos de dirección
`total`	Resultado de `subTotal - discount + tax` en la moneda base de la sesión
`currency`	Código de moneda ISO, por ejemplo `"USD"`, para los valores estándar de subtotal, descuento e impuesto.
`finalTotal`	Importe real que se cobra al cliente. Puede incluir ajustes adicionales de divisas o comisiones de métodos de pago locales que no forman parte del desglose básico del precio.
`finalTotalCurrency`	Moneda en la que paga realmente el cliente. Puede diferir de `currency` si la paridad del poder adquisitivo o la conversión a moneda local están activas.

Consejos de integración:

Formato de moneda: Los precios son números enteros expresados en la unidad monetaria más pequeña; por ejemplo, centavos para USD. Para monedas con dos decimales, divide entre 100 antes de aplicar formato con Intl.NumberFormat. Las monedas sin decimales, como JPY, no tienen una unidad menor, por lo que no debes dividirlas.
Gestión de estados iniciales: Cuando el checkout se carga por primera vez, tax y discount pueden ser 0 o null hasta que el usuario proporcione sus datos de facturación o aplique un código. Gestiona estos estados correctamente, por ejemplo, mostrando un guion — u ocultando la fila.
«Total final» frente a «Total»: Aunque total proporciona el cálculo de precio estándar, finalTotal es la fuente de verdad de la transacción. Si finalTotal está presente, refleja exactamente lo que se cobrará en la tarjeta del cliente.
Información en tiempo real: Usa el campo tax para mostrar a los usuarios que los impuestos se están calculando en tiempo real. Esto aporta una sensación dinámica a tu página de checkout y reduce la fricción durante la introducción de la dirección.

Implementación mediante CDN

Para una integración rápida sin un paso de compilación, carga el SDK desde 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>
  
  <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
  <script>
    DodoPaymentsCheckout.DodoPayments.Initialize({
      mode: "test",
      displayType: "inline",
      onEvent: (event) => {
        console.log('Checkout event:', event);
      }
    });
  </script>
</head>
<body>
  <div id="dodo-inline-checkout"></div>

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

Actualizar el método de pago

El checkout integrado admite actualizaciones del método de pago para suscripciones. Cuando un cliente necesita actualizar su método de pago para una suscripción activa o reactivar una suscripción en espera, puedes mostrar el flujo de actualización directamente en el diseño de tu página.

Cómo funciona

Llama a la API de actualización del método de pago para obtener un payment_link:

// On your server. `client` is the Dodo Payments server SDK (`new DodoPayments()` from the `dodopayments` package).
const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

Pasa el payment_link devuelto como checkoutUrl para abrir el checkout integrado:

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

El frame integrado muestra únicamente el formulario de recopilación del método de pago. Los clientes pueden introducir los datos de una tarjeta nueva 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 de una suscripción con estado on_hold, Dodo Payments crea automáticamente un cargo por cualquier deuda pendiente. Supervisa los webhooks payment.succeeded y subscription.active para confirmar la reactivación.

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

if (response.payment_id) {
  // Charge created for remaining dues
  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 datos nuevos pasando type: 'existing' con un payment_method_id a la API de actualización del método de pago.

Gestión de errores

Implementa siempre la gestión 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);
      // Show user-friendly error message
    }
  }
});

Gestiona siempre el evento checkout.error para ofrecer una buena experiencia de usuario cuando se produzcan errores.

Prácticas recomendadas

Diseño adaptable: Asegúrate de que el elemento contenedor tenga suficiente anchura y altura. Normalmente, el iframe se expandirá para ocupar todo el contenedor.
Sincronización: Usa el evento checkout.breakdown para mantener sincronizados tu resumen personalizado del pedido o tus tablas de precios con lo que ve el usuario en el frame de checkout.
Estados esqueleto: Muestra un indicador de carga en tu contenedor hasta que se active el evento checkout.opened.
Limpieza: Llama a DodoPayments.Checkout.close() cuando se desmonte el componente para limpiar el iframe y los listeners de eventos.

Para implementaciones con modo oscuro, usa #0d0d0d como color de fondo para lograr una integración visual óptima con el frame de checkout integrado.

Validación del estado del pago

No dependas únicamente de los eventos del checkout integrado para determinar si un pago se realizó correctamente o falló. Implementa siempre la validación del lado del servidor mediante webhooks o polling.

Por qué es esencial validar en el servidor

Aunque los eventos del checkout integrado proporcionan información en tiempo real, no deben ser tu única fuente de verdad para el estado del pago. Los problemas de red, los bloqueos del navegador o que los usuarios cierren la página pueden hacer que se pierdan eventos. Para garantizar una validación fiable de los pagos:

Escucha los eventos de webhook: Dodo Payments envía webhooks cuando cambia el estado de un pago
Implementa un mecanismo de polling: Tu frontend debe consultar periódicamente tu servidor para obtener actualizaciones de estado
Combina ambos enfoques: Usa los webhooks como fuente principal y el polling como alternativa

Arquitectura recomendada

Pasos de implementación

1. Escucha los eventos de checkout: Cuando el usuario haga clic en pagar, empieza a preparar la verificación del estado:

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

2. Consulta tu servidor: Crea un endpoint que compruebe en tu base de datos el estado del pago, actualizado por los 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. Gestiona los webhooks en el servidor: Actualiza tu base de datos cuando Dodo envíe webhooks payment.succeeded o payment.failed. Consulta nuestra documentación de Webhooks para obtener más información.

Solución de problemas

Checkout frame is not appearing

Comprueba que elementId coincida con el id de un div que exista realmente en el DOM
Asegúrate de que displayType: 'inline' se haya pasado a Initialize
Comprueba que 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 introduzca un país y un código postal válidos en el frame de checkout

Carteras digitales

Para obtener información detallada sobre la configuración de Apple Pay, Google Pay y otras carteras digitales, consulta la página Carteras digitales.

Configuración rápida de Apple Pay

La verificación del dominio solo es necesaria para el checkout integrado. 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 Apple Pay, haz clic en Manage domains.

Botón Manage domains en la fila Apple Pay de la configuración de Payment Methods — Open Wallet domains from the Apple Pay row

Download the domain association file

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

Panel de dominios de Wallet con el botón Download file — 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; después, haz clic en Continue.

Formulario de registro de dominio con un dominio introducido — 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.

Pantalla de verificación del dominio con la ruta del archivo de asociación y el botón Verify domain — 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.

Lista de dominios de Wallet que muestra dominios con estado Active de Apple Pay e interruptores Enabled — Verified domains show an Active status

Test the integration

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

Compatibilidad con navegadores

El Checkout SDK de Dodo Payments es compatible con:

Chrome (última versión)
Firefox (última versión)
Safari (última versión)
Edge (última versión)
IE11+

Checkout integrado frente a checkout superpuesto

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

Función	Integrado	Superpuesto
Profundidad de integración	Completamente integrado en la página	Modal sobre la página
Control del diseño	Control total	Limitado
Marca	Coincide con tu página	Separada de la página
Esfuerzo de implementación	Mayor	Menor
Más adecuado para	Páginas de checkout personalizadas y flujos de alta conversión	Integración rápida y páginas existentes

Usa el checkout integrado cuando quieras el máximo control sobre la experiencia de checkout y una identidad de marca coherente. Usa el checkout superpuesto para 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.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Cómo funciona

Qué caracteriza a un buen checkout integrado

Recorrido del cliente

Inicio rápido

Integración paso a paso

Ejemplo completo de React

Referencia de la API

Inicializar

Abrir el checkout

Cerrar el checkout

Comprobar el estado

Eventos

Datos del desglose del checkout

Implementación mediante CDN

Actualizar el método de pago

Cómo funciona

Para suscripciones en espera

Gestión de errores

Prácticas recomendadas

Validación del estado del pago

Por qué es esencial validar en el servidor

Arquitectura recomendada

Pasos de implementación

Solución de problemas

Carteras digitales

Configuración rápida de Apple Pay

Compatibilidad con navegadores

Checkout integrado frente a checkout superpuesto

Recursos relacionados

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

​Cómo funciona

​Qué caracteriza a un buen checkout integrado

​Recorrido del cliente

​Inicio rápido

​Integración paso a paso

​Ejemplo completo de React

​Referencia de la API

​Inicializar

​Abrir el checkout

​Cerrar el checkout

​Comprobar el estado

​Eventos

​Datos del desglose del checkout

​Implementación mediante CDN

​Actualizar el método de pago

​Cómo funciona

​Para suscripciones en espera

​Gestión de errores

​Prácticas recomendadas

​Validación del estado del pago

​Por qué es esencial validar en el servidor

​Arquitectura recomendada

​Pasos de implementación

​Solución de problemas

​Carteras digitales

​Configuración rápida de Apple Pay

​Compatibilidad con navegadores

​Checkout integrado frente a checkout superpuesto

​Recursos relacionados

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

Cómo funciona

Qué caracteriza a un buen checkout integrado

Recorrido del cliente

Inicio rápido

Integración paso a paso

Ejemplo completo de React

Referencia de la API

Inicializar

Abrir el checkout

Cerrar el checkout

Comprobar el estado

Eventos

Datos del desglose del checkout

Implementación mediante CDN

Actualizar el método de pago

Cómo funciona

Para suscripciones en espera

Gestión de errores

Prácticas recomendadas

Validación del estado del pago

Por qué es esencial validar en el servidor

Arquitectura recomendada

Pasos de implementación

Solución de problemas

Carteras digitales

Configuración rápida de Apple Pay

Compatibilidad con navegadores

Checkout integrado frente a checkout superpuesto

Recursos relacionados