Checkout Inline

Visão Geral

O checkout inline permite que você crie experiências de checkout totalmente integradas que se misturam perfeitamente com seu site ou aplicativo. Ao contrário do checkout em sobreposição, que se abre como um modal sobre sua página, o checkout inline incorpora o formulário de pagamento diretamente no layout da sua página. Usando o checkout inline, você pode:

Criar experiências de checkout que estão totalmente integradas ao seu aplicativo ou site
Permitir que o Dodo Payments capture com segurança as informações do cliente e de pagamento em um quadro de checkout otimizado
Exibir itens, totais e outras informações do Dodo Payments em sua página
Usar métodos e eventos da SDK para construir experiências de checkout avançadas

Como Funciona

O checkout inline funciona incorporando um quadro seguro do Dodo Payments em seu site ou aplicativo. O quadro de checkout lida com a coleta de informações do cliente e a captura de detalhes de pagamento. Sua página exibe a lista de itens, totais e opções para alterar o que está no checkout. A SDK permite que sua página e o quadro de checkout interajam entre si. O Dodo Payments cria automaticamente uma assinatura quando um checkout é concluído, pronto para você provisionar.

O quadro de checkout inline lida com segurança todas as informações sensíveis de pagamento, garantindo conformidade com PCI sem certificação adicional da sua parte.

O Que Faz um Bom Checkout Inline?

É importante que os clientes saibam de quem estão comprando, o que estão comprando e quanto estão pagando. Para construir um checkout inline que seja compatível e otimizado para conversão, sua implementação deve incluir:

Exemplo de checkout inline com elementos obrigatórios rotulados

Exemplo de layout de checkout inline mostrando elementos obrigatórios

Informações recorrentes: Se for recorrente, com que frequência ocorre e o total a ser pago na renovação. Se for um teste, quanto tempo dura o teste.
Descrições dos itens: Uma descrição do que está sendo comprado.
Totais da transação: Totais da transação, incluindo subtotal, total de impostos e total geral. Certifique-se de incluir a moeda também.
Rodapé do Dodo Payments: O quadro completo do checkout inline, incluindo o rodapé do checkout que contém informações sobre o Dodo Payments, nossos termos de venda e nossa política de privacidade.
Política de reembolso: Um link para sua política de reembolso, se for diferente da política padrão de reembolso do Dodo Payments.

Sempre exiba o quadro completo do checkout inline, incluindo o rodapé. Remover ou ocultar informações legais viola os requisitos de conformidade.

Jornada do Cliente

O fluxo de checkout é determinado pela configuração da sua sessão de checkout. Dependendo de como você configura a sessão de checkout, os clientes experimentarão um checkout que pode apresentar todas as informações em uma única página ou em várias etapas.

Cliente abre o checkout

Você pode abrir o checkout inline passando itens ou uma transação existente. Use o SDK para mostrar e atualizar informações na página, e métodos do SDK para atualizar itens com base na interação do cliente.

Página inicial de checkout com lista de itens e formulário de pagamento

Cliente insere seus dados

O checkout inline primeiro pede aos clientes que insiram seu endereço de e-mail, selecionem seu país e (quando necessário) insiram seu CEP ou código postal. Esta etapa coleta todas as informações necessárias para determinar impostos e opções de pagamento disponíveis.Você pode preencher automaticamente os detalhes do cliente e apresentar endereços salvos para agilizar a experiência.

Cliente seleciona o método de pagamento

Após inserir seus dados, os clientes são apresentados com os métodos de pagamento disponíveis e o formulário de pagamento. As opções podem incluir cartão de crédito ou débito, PayPal, Apple Pay, Google Pay e outros métodos de pagamento locais com base em sua localização.Exiba métodos de pagamento salvos, se disponíveis, para acelerar o checkout.

Métodos de pagamento disponíveis e formulário de detalhes do cartão

Checkout concluído

O Dodo Payments direciona cada pagamento para o melhor adquirente para aquela venda, garantindo a melhor chance possível de sucesso. Os clientes entram em um fluxo de sucesso que você pode construir.

Tela de sucesso com marca de confirmação

Dodo Payments cria assinatura

O Dodo Payments cria automaticamente uma assinatura para o cliente, pronta para você provisionar. O método de pagamento que o cliente usou é mantido em arquivo para renovações ou alterações de assinatura.

Assinatura criada com notificação de webhook

Começo Rápido

Comece com o Checkout Inline da Dodo Payments em apenas algumas linhas 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
});

Certifique-se de ter um elemento contêiner com o id correspondente em sua página: <div id="dodo-inline-checkout"></div>.

Guia de Integração Passo a Passo

Instalar o SDK

Instale o SDK de Checkout da Dodo Payments:

npm install dodopayments-checkout

Inicializar o SDK para Exibição Inline

Inicialize o SDK e especifique displayType: 'inline'. Você também deve escutar o evento checkout.breakdown para atualizar sua interface com cálculos de impostos e totais em tempo 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.
    }
  },
});

Criar um Elemento Contêiner

Adicione um elemento ao seu HTML onde o quadro de checkout será injetado:

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

Abrir o Checkout

Chame DodoPayments.Checkout.open() com o checkoutUrl e o elementId do seu contêiner:

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

Teste Sua Integração

Inicie seu servidor de desenvolvimento:

npm run dev

Teste o fluxo de checkout:
- Insira seu e-mail e detalhes de endereço no quadro inline.
- Verifique se seu resumo de pedido personalizado é atualizado em tempo real.
- Teste o fluxo de pagamento usando credenciais de teste.
- Confirme se os redirecionamentos funcionam corretamente.

Você deve ver eventos checkout.breakdown registrados no console do seu navegador se você adicionou um log de console no callback onEvent.

Ir para Produção

Quando você estiver pronto para produção:

Altere o modo para 'live':

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

Atualize suas URLs de checkout para usar sessões de checkout ao vivo do seu backend.
Teste o fluxo completo em produção.

Exemplo Completo em React

Este exemplo demonstra como implementar um resumo de pedido personalizado ao lado do checkout inline, mantendo-os sincronizados usando o 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>
  );
}

Referência da API

Configuração

Opções de Inicialização

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

Opção	Tipo	Obrigatório	Descrição
`mode`	`"test" \| "live"`	Sim	Modo de ambiente.
`displayType`	`"inline" \| "overlay"`	Sim	Deve ser definido como `"inline"` para embutir o checkout.
`onEvent`	`function`	Sim	Função de callback para manipular eventos de checkout.

Opções de Checkout

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

Opção	Tipo	Obrigatório	Descrição
`checkoutUrl`	`string`	Sim	URL da sessão de checkout.
`elementId`	`string`	Sim	O `id` do elemento DOM onde o checkout deve ser renderizado.

Métodos

Abrir Checkout

Abre o quadro de checkout no contêiner especificado.

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

Fechar Checkout

Remove programaticamente o quadro de checkout e limpa os ouvintes de eventos.

DodoPayments.Checkout.close();

Verificar Status

Retorna se o quadro de checkout está atualmente injetado.

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

Eventos

O SDK fornece eventos em tempo real através do callback onEvent. Para o checkout inline, checkout.breakdown é particularmente útil para sincronizar sua interface.

Tipo de Evento	Descrição
`checkout.opened`	O quadro de checkout foi carregado.
`checkout.breakdown`	Disparado quando preços, impostos ou descontos são atualizados.
`checkout.customer_details_submitted`	Detalhes do cliente foram enviados.
`checkout.redirect`	O checkout realizará um redirecionamento (por exemplo, para uma página do banco).
`checkout.error`	Ocorreu um erro durante o checkout.

Dados de Quebra do Checkout

O evento checkout.breakdown fornece os seguintes dados:

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
}

Compreendendo o Evento de Quebra

O evento checkout.breakdown é a principal maneira de manter a interface da sua aplicação sincronizada com o estado do checkout da Dodo Payments. Quando ele é disparado:

Na inicialização: Imediatamente após o quadro de checkout ser carregado e estar pronto.
Na mudança de endereço: Sempre que o cliente seleciona um país ou insere um código postal que resulta em um recálculo de impostos.

Detalhes dos Campos:

Campo	Descrição
`subTotal`	A soma de todos os itens da sessão antes que quaisquer descontos ou impostos sejam aplicados.
`discount`	O valor total de todos os descontos aplicados.
`tax`	O valor do imposto calculado. No modo `inline`, isso é atualizado dinamicamente à medida que o usuário interage com os campos de endereço.
`total`	O resultado matemático de `subTotal - discount + tax` na moeda base da sessão.
`currency`	O código da moeda ISO (por exemplo, `"USD"`) para os valores padrão de subtotal, desconto e imposto.
`finalTotal`	O valor real que o cliente está sendo cobrado. Isso pode incluir ajustes adicionais de câmbio ou taxas de métodos de pagamento locais que não fazem parte da quebra de preço básica.
`finalTotalCurrency`	A moeda na qual o cliente está realmente pagando. Isso pode diferir de `currency` se a paridade do poder de compra ou a conversão de moeda local estiver ativa.

Dicas de Integração Importantes:

Formatação de Moeda: Os preços são sempre retornados como inteiros na menor unidade monetária (por exemplo, centavos para USD, ienes para JPY). Para exibi-los, divida por 100 (ou a potência apropriada de 10) ou use uma biblioteca de formatação como Intl.NumberFormat.
Tratamento de Estados Iniciais: Quando o checkout é carregado pela primeira vez, tax e discount podem ser 0 ou null até que o usuário forneça suas informações de cobrança ou aplique um código. Sua interface deve lidar com esses estados de forma elegante (por exemplo, mostrando um traço — ou ocultando a linha).
O “Total Final” vs “Total”: Enquanto total fornece o cálculo de preço padrão, finalTotal é a fonte da verdade para a transação. Se finalTotal estiver presente, ele reflete exatamente o que será cobrado no cartão do cliente, incluindo quaisquer ajustes dinâmicos.
Feedback em Tempo Real: Use o campo tax para mostrar aos usuários que os impostos estão sendo calculados em tempo real. Isso proporciona uma sensação de “ao vivo” na sua página de checkout e reduz a fricção durante a etapa de entrada de endereço.

Opções de Implementação

Instalação via Gerenciador de Pacotes

Instale via npm, yarn ou pnpm conforme mostrado no Guia de Integração Passo a Passo.

Implementação CDN

Para uma integração rápida sem uma etapa de build, você pode usar nossa 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>

Suporte a TypeScript

O SDK é escrito em TypeScript e inclui definições de tipo abrangentes.

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

Tratamento de Erros

O SDK fornece informações detalhadas sobre erros através do sistema de eventos. Sempre implemente um tratamento de erros adequado em seu 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
    }
  }
});

Sempre trate o evento checkout.error para proporcionar uma boa experiência ao usuário quando problemas ocorrerem.

Melhores Práticas

Design Responsivo: Certifique-se de que seu elemento contêiner tenha largura e altura suficientes. O iframe geralmente se expandirá para preencher seu contêiner.
Sincronização: Use o evento checkout.breakdown para manter seu resumo de pedido personalizado ou tabelas de preços sincronizados com o que o usuário vê no quadro de checkout.
Estados de Carregamento: Mostre um indicador de carregamento em seu contêiner até que o evento checkout.opened seja disparado.
Limpeza: Chame DodoPayments.Checkout.close() quando seu componente for desmontado para limpar o iframe e os ouvintes de eventos.

Solução de Problemas

O quadro de checkout não está aparecendo

Verifique se elementId corresponde ao id de um div que realmente existe no DOM.
Certifique-se de que displayType: 'inline' foi passado para Initialize.
Verifique se a checkoutUrl é válida.

Os impostos não estão atualizando na minha interface

Certifique-se de que você está escutando o evento checkout.breakdown.
Os impostos só são calculados após o usuário inserir um país e um código postal válidos no quadro de checkout.

Suporte a Navegadores

O SDK de Checkout da Dodo Payments suporta os seguintes navegadores:

Chrome (última versão)
Firefox (última versão)
Safari (última versão)
Edge (última versão)
IE11+

O Apple Pay não é atualmente suportado na experiência de checkout inline. Planejamos adicionar suporte ao Apple Pay em uma versão futura.

Checkout Inline vs Overlay

Escolha o tipo de checkout certo para seu caso de uso:

Recurso	Checkout Inline	Checkout Overlay
Profundidade de integração	Totalmente embutido na página	Modal sobre a página
Controle de layout	Controle total	Limitado
Branding	Sem costura	Separado da página
Esforço de implementação	Maior	Menor
Melhor para	Páginas de checkout personalizadas, fluxos de alta conversão	Integração rápida, páginas existentes

Use checkout inline quando você quiser controle máximo sobre a experiência de checkout e branding sem costura. Use checkout overlay para uma integração mais rápida com mudanças mínimas em suas páginas existentes.

Recursos Relacionados

Checkout Overlay

Use o checkout overlay para uma integração modal rápida.

API de Sessões de Checkout

Crie sessões de checkout para potencializar suas experiências de checkout.

Webhooks

Manipule eventos de pagamento no lado do servidor com webhooks.

Guia de Integração

Guia completo para integrar o Dodo Payments.

Para mais ajuda, visite nossa comunidade no Discord ou entre em contato com nossa equipe de suporte ao desenvolvedor.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Visão Geral

Como Funciona

O Que Faz um Bom Checkout Inline?

Jornada do Cliente

Começo Rápido

Guia de Integração Passo a Passo

Exemplo Completo em React

Referência da API

Configuração

Opções de Inicialização

Opções de Checkout

Métodos

Abrir Checkout

Fechar Checkout

Verificar Status

Eventos

Dados de Quebra do Checkout

Compreendendo o Evento de Quebra

Opções de Implementação

Instalação via Gerenciador de Pacotes

Implementação CDN

Suporte a TypeScript

Tratamento de Erros

Melhores Práticas

Solução de Problemas

Suporte a Navegadores

Checkout Inline vs Overlay

Recursos Relacionados

Checkout Overlay

API de Sessões de Checkout

Webhooks

Guia de Integração

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​Visão Geral

​Como Funciona

​O Que Faz um Bom Checkout Inline?

​Jornada do Cliente

​Começo Rápido

​Guia de Integração Passo a Passo

​Exemplo Completo em React

​Referência da API

​Configuração

​Opções de Inicialização

​Opções de Checkout

​Métodos

​Abrir Checkout

​Fechar Checkout

​Verificar Status

​Eventos

​Dados de Quebra do Checkout

​Compreendendo o Evento de Quebra

​Opções de Implementação

​Instalação via Gerenciador de Pacotes

​Implementação CDN

​Suporte a TypeScript

​Tratamento de Erros

​Melhores Práticas

​Solução de Problemas

​Suporte a Navegadores

​Checkout Inline vs Overlay

​Recursos Relacionados

Checkout Overlay

API de Sessões de Checkout

Webhooks

Guia de Integração

Visão Geral

Como Funciona

O Que Faz um Bom Checkout Inline?

Jornada do Cliente

Começo Rápido

Guia de Integração Passo a Passo

Exemplo Completo em React

Referência da API

Configuração

Opções de Inicialização

Opções de Checkout

Métodos

Abrir Checkout

Fechar Checkout

Verificar Status

Eventos

Dados de Quebra do Checkout

Compreendendo o Evento de Quebra

Opções de Implementação

Instalação via Gerenciador de Pacotes

Implementação CDN

Suporte a TypeScript

Tratamento de Erros

Melhores Práticas

Solução de Problemas

Suporte a Navegadores

Checkout Inline vs Overlay

Recursos Relacionados