Pago en línea

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 pago en línea maneja de forma segura toda la información sensible de pago, asegurando el cumplimiento de PCI sin certificación adicional de tu parte.

¿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

Ejemplo de diseño de pago en línea mostrando elementos requeridos

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 pago en línea, incluyendo el pie de página. Eliminar o ocultar información legal viola los requisitos de cumplimiento.

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.

El cliente abre el pago

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 métodos del SDK para actualizar artículos basados en la interacción del cliente.

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

El cliente ingresa sus datos

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.

El cliente selecciona el método de pago

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

Pago completado

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 crea la suscripción

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

Instalar el SDK

Instala el SDK de Dodo Payments Checkout:

npm install dodopayments-checkout

Inicializar el SDK para Visualización en Línea

Inicializa el SDK y especifica displayType: 'inline'. También debes escuchar el evento checkout.breakdown para actualizar tu UI 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.
    }
  },
});

Crear un Elemento Contenedor

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

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

Abrir el Pago

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"
});

Prueba Tu Integración

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 de tu navegador si agregaste un registro en la consola en el callback onEvent.

Poner en Producción

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 demuestra cómo implementar un resumen de pedido personalizado junto con el pago en línea, manteniéndolos sincronizados usando 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 estar configurado a `"inline"` para incrustar el pago.
`onEvent`	`function`	Sí	Función de callback para manejar eventos de pago.

Opciones de Pago

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
}

Opción	Tipo	Requerido	Descripción
`checkoutUrl`	`string`	Sí	URL de sesión de pago.
`elementId`	`string`	Sí	El `id` del elemento DOM donde se debe renderizar 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"
});

Cerrar Pago

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

DodoPayments.Checkout.close();

Verificar Estado

Devuelve 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.breakdown`	Se activa cuando los precios, impuestos o descuentos son actualizados.
`checkout.customer_details_submitted`	Los detalles del cliente han sido enviados.
`checkout.redirect`	El pago realizará una redirección (por ejemplo, a una página bancaria).
`checkout.error`	Ocurrió un error durante el pago.

Datos de Desglose 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 Desglose

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

En la inicialización: Inmediatamente después de que el marco de pago se carga y está listo.
En el cambio 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 de los Campos:

Campo	Descripción
`subTotal`	La suma de todos los artículos en la sesión antes de que se apliquen descuentos o impuestos.
`discount`	El valor total de todos los descuentos aplicados.
`tax`	El monto del impuesto calculado. En `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 de moneda ISO (por ejemplo, `"USD"`) para los valores estándar de subtotal, descuento e impuesto.
`finalTotal`	La cantidad real que se le cobra al cliente. Esto puede incluir ajustes adicionales de cambio de divisas o tarifas de métodos de pago locales que no son parte del desglose de precios básico.
`finalTotalCurrency`	La moneda en la que el cliente está pagando realmente. Esto puede diferir de `currency` si la paridad del poder adquisitivo o la conversión de moneda local están activas.

Consejos Clave de Integración:

Formato de Moneda: Los precios siempre se devuelven como enteros en la unidad de moneda más pequeña (por ejemplo, centavos para USD, yenes para JPY). Para mostrarlos, divide por 100 (o la potencia de 10 apropiada) o usa una biblioteca de formato como Intl.NumberFormat.
Manejo de Estados Iniciales: Cuando el pago se carga por primera vez, tax y 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 — o 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 cobrará 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 se están calculando 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 entrada de dirección.

Opciones de Implementación

Instalación a través de Gestor de Paquetes

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

Implementación CDN

Para una integración rápida sin un paso de construcción, puedes usar nuestra 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>

Soporte para TypeScript

El SDK está escrito en TypeScript e incluye definiciones de tipo completas.

import { DodoPayments, CheckoutEvent } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    // event is fully typed
    console.log(event.event_type, event.data);
  },
});

Manejo de Errores

El SDK proporciona información detallada sobre errores a través del sistema de eventos. Siempre implementa un manejo de errores adecuado 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 de usuario cuando ocurren problemas.

Mejores Prácticas

Diseño Responsivo: Asegúrate de que tu elemento contenedor tenga suficiente ancho y alto. El iframe generalmente se expandirá para llenar su contenedor.
Sincronización: Usa el evento checkout.breakdown para mantener tu resumen de pedido personalizado o tablas de precios sincronizadas con lo que el usuario ve en el marco de pago.
Estados de Carga: 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.

Solución de Problemas

El marco de pago no aparece

Verifica que elementId coincida con el id de un div que realmente existe en el DOM.
Asegúrate de que displayType: 'inline' se haya pasado a Initialize.
Verifica que la checkoutUrl sea válida.

Los impuestos no se actualizan en mi UI

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

Soporte de Navegadores

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

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

Apple Pay no es actualmente compatible con la experiencia de pago en línea. Planeamos agregar soporte para Apple Pay en una futura versión.

Pago en Línea vs Pago en Superposición

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

Característica	Pago en Línea	Pago en Superposición
Profundidad de integración	Totalmente incrustado en la página	Modal sobre la página
Control de diseño	Control total	Limitado
Marca	Sin costuras	Separado de la página
Esfuerzo de implementación	Mayor	Menor
Mejor para	Páginas de pago personalizadas, flujos de alta conversión	Integración rápida, páginas existentes

Usa pago en línea cuando desees el máximo control sobre la experiencia de pago y una marca sin costuras. Usa pago en superposición para una integración más rápida con cambios mínimos en tus páginas existentes.

Recursos Relacionados

Pago en Superposición

Usa el pago en superposición para una integración rápida basada en modal.

API de Sesiones de Pago

Crea sesiones de pago para potenciar tus experiencias de pago.

Webhooks

Maneja eventos de pago del lado del servidor con webhooks.

Guía de Integración

Guía completa para integrar Dodo Payments.

Para más ayuda, visita nuestra comunidad de Discord o contacta a nuestro equipo de soporte para desarrolladores.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

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 de Desglose del Pago

Entendiendo el Evento de Desglose

Opciones de Implementación

Instalación a través de Gestor de Paquetes

Implementación CDN

Soporte para TypeScript

Manejo de Errores

Mejores Prácticas

Solución de Problemas

Soporte de Navegadores

Pago en Línea vs Pago en Superposición

Recursos Relacionados

Pago en Superposición

API de Sesiones de Pago

Webhooks

Guía de Integración

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​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 de Desglose del Pago

​Entendiendo el Evento de Desglose

​Opciones de Implementación

​Instalación a través de Gestor de Paquetes

​Implementación CDN

​Soporte para TypeScript

​Manejo de Errores

​Mejores Prácticas

​Solución de Problemas

​Soporte de Navegadores

​Pago en Línea vs Pago en Superposición

​Recursos Relacionados

Pago en Superposición

API de Sesiones de Pago

Webhooks

Guía de Integración

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 de Desglose del Pago

Entendiendo el Evento de Desglose

Opciones de Implementación

Instalación a través de Gestor de Paquetes

Implementación CDN

Soporte para TypeScript

Manejo de Errores

Mejores Prácticas

Solución de Problemas

Soporte de Navegadores

Pago en Línea vs Pago en Superposición

Recursos Relacionados