Checkout Inline

O checkout inline incorpora um formulário de pagamento seguro diretamente ao layout da sua página. Diferentemente do checkout sobreposto, que é aberto como um modal, o checkout inline se torna parte da sua página. Você controla o layout e pode exibir seu próprio resumo do pedido ao lado do formulário de checkout.

Formulário de checkout inline incorporado a uma página de produto com resumo do pedido

Como funciona

O checkout inline renderiza um frame seguro do Dodo Payments em um contêiner da sua página. O frame gerencia a coleta das informações do cliente e dos dados de pagamento. Sua página exibe itens, totais e outras informações. O SDK permite que sua página e o frame de checkout se comuniquem. Quando o checkout é concluído, o Dodo Payments cria o pagamento ou a assinatura para um produto de assinatura e envia um webhook para que você possa provisionar o acesso.

O frame de checkout inline gerencia com segurança todas as informações confidenciais de pagamento, garantindo a conformidade com o PCI sem exigir certificação adicional da sua parte.

O que caracteriza um bom checkout inline

Os clientes precisam saber de quem estão comprando, o que estão comprando e quanto estão pagando. Sua implementação deve incluir:

Exemplo de checkout inline com os elementos obrigatórios identificados — Example inline checkout layout showing required elements

Informações recorrentes: Se for recorrente, informe a frequência da recorrência e o total a pagar na renovação. Se houver um período de teste, informe sua duração.
Descrições dos itens: Uma descrição do que está sendo comprado.
Totais da transação: Subtotal, imposto total e total geral, incluindo a moeda.
Rodapé do Dodo Payments: O frame de checkout inline completo, incluindo o rodapé com as informações do Dodo Payments, os termos de venda e a política de privacidade.
Política de reembolso: Um link para sua política de reembolso, caso ela seja diferente da política de reembolso padrão do Dodo Payments.

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

Jornada do cliente

O fluxo de checkout depende da configuração da sua sessão de checkout. Dependendo de como você configura a sessão, os clientes podem ver todas as informações em uma única página ou distribuídas em várias etapas.

Customer opens checkout

Você abre o checkout inline passando uma URL de checkout. Use eventos do SDK, como checkout.breakdown, para exibir e atualizar informações na página.

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

Customer enters their details

Primeiro, o checkout inline solicita que os clientes insiram seu endereço de e-mail, selecionem seu país e, quando necessário, insiram seu ZIP code ou código postal. Essa etapa coleta todas as informações necessárias para determinar os impostos e as opções de pagamento disponíveis.Você pode preencher previamente os dados do cliente e apresentar endereços salvos para simplificar a experiência.

Customer selects payment method

Depois de inserir seus dados, os clientes veem 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 na localização do cliente.Exiba métodos de pagamento salvos, quando disponíveis, para acelerar o checkout.

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

Checkout completed

O Dodo Payments encaminha cada pagamento ao melhor adquirente para aquela venda, buscando a maior probabilidade possível de sucesso. Os clientes entram em um fluxo de sucesso que você pode criar.

Tela de sucesso com marca de confirmação

Dodo Payments creates the payment or subscription

O Dodo Payments cria o pagamento ou a assinatura para um produto de assinatura e envia um webhook para que você possa provisionar o acesso. O método de pagamento usado pelo cliente fica armazenado para renovações ou alterações na assinatura.

Assinatura criada com notificação de webhook

Início rápido

Instale o SDK, inicialize-o para o modo inline e abra o checkout em um elemento contêiner:

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

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

Integração passo a passo

Install the SDK

Instale usando npm, yarn ou pnpm:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK for Inline Display

Inicialize o SDK e especifique displayType: 'inline'. Escute 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.
    }
  },
});

Create a Container Element

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

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

Open the Checkout

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

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

Test Your Integration

Inicie seu servidor de desenvolvimento:

npm run dev

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

Você deverá ver eventos checkout.breakdown registrados no console do navegador se tiver adicionado um registro no console no callback onEvent.

Go Live

Quando 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 de produção 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 ambos 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.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>
  );
}

Referência da API

Inicializar

Chame Initialize uma vez para configurar o SDK:

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

DodoPayments.Initialize(options);

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

Abrir checkout

Abra o frame de checkout em um contêiner:

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

Opção	Tipo	Obrigatório	Descrição
`checkoutUrl`	`string`	Sim	URL da sessão de checkout da API de criação de sessão de checkout
`elementId`	`string`	Sim	O `id` do elemento DOM onde o checkout deve ser renderizado
`options.showTimer`	`boolean`	Não	Exibe ou oculta o cronômetro da sessão. O padrão é `true`. Quando definido como `false`, você recebe o evento `checkout.link_expired` quando a sessão expira.
`options.showSecurityBadge`	`boolean`	Não	Exibe ou oculta o selo de segurança. O padrão é `true`
`options.manualRedirect`	`boolean`	Não	Quando `true`, impede redirecionamentos automáticos. O checkout emite `checkout.status` com o resultado do pagamento e `checkout.redirect_requested` com a URL a ser aberta, e você gerencia a navegação
`options.payButtonText`	`string`	Não	Texto personalizado para o botão de pagamento
`options.fontSize`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	Não	Tamanho global da fonte do checkout
`options.fontWeight`	`"normal" \| "medium" \| "bold" \| "extraBold"`	Não	Peso global da fonte do checkout

Fechar checkout

Remova o frame de checkout programaticamente e limpe os listeners de eventos:

DodoPayments.Checkout.close();

Verificar status

Verifique se o frame de checkout está atualmente injetado:

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

Eventos

O SDK fornece eventos em tempo real por meio do callback onEvent. Para o checkout inline, checkout.breakdown é especialmente útil para sincronizar sua interface:

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	Descrição
`checkout.opened`	O frame de checkout foi carregado
`checkout.form_ready`	O formulário está pronto para entrada do usuário. Use-o para ocultar estados de carregamento
`checkout.breakdown`	Preços, impostos ou descontos atualizados
`checkout.customer_details_submitted`	Dados do cliente enviados
`checkout.pay_button_clicked`	O cliente clicou no botão de pagamento. Útil para análises e acompanhamento de funis de conversão
`checkout.redirect`	O checkout será redirecionado, por exemplo, para uma página bancária
`checkout.error`	Ocorreu um erro durante o checkout
`checkout.link_expired`	A sessão de checkout expirou. Recebido somente quando `showTimer` está definido como `false`

Dados detalhados do checkout

O evento checkout.breakdown fornece informações de preços e impostos:

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
}

O evento é disparado quando o frame de checkout é carregado e novamente sempre que o preço é recalculado, por exemplo, quando o cliente seleciona um país ou insere um código postal que altera o imposto. Detalhes dos campos:

Campo	Descrição
`subTotal`	Soma de todos os itens antes de descontos ou impostos
`discount`	Valor total de todos os descontos aplicados
`tax`	Valor do imposto calculado. Atualizado dinamicamente conforme o usuário interage com os campos de endereço
`total`	Resultado de `subTotal - discount + tax` na moeda base da sessão
`currency`	Código de moeda ISO, por exemplo, `"USD"`, para os valores padrão de subtotal, desconto e imposto.
`finalTotal`	O valor efetivamente cobrado do cliente. Pode incluir ajustes cambiais adicionais ou tarifas de métodos de pagamento locais que não fazem parte do detalhamento básico do preço.
`finalTotalCurrency`	A moeda na qual o cliente efetivamente paga. Ela pode ser diferente de `currency` se a paridade do poder de compra ou a conversão para a moeda local estiver ativa.

Dicas de integração:

Formatação de moeda: Os preços são inteiros na menor unidade da moeda, por exemplo, centavos para USD. Para moedas com duas casas decimais, divida por 100 antes de formatar com Intl.NumberFormat. Moedas sem casas decimais, como JPY, não têm uma unidade menor, portanto não as divida.
Gerenciamento dos 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. Gerencie esses estados de forma adequada, por exemplo, exibindo um traço — ou ocultando a linha.
“Total final” versus “Total”: Embora total forneça o cálculo de preço padrão, finalTotal é a fonte de verdade da transação. Se finalTotal estiver presente, ele refletirá exatamente o que será cobrado no cartão do cliente.
Feedback em tempo real: Use o campo tax para mostrar aos usuários que os impostos estão sendo calculados em tempo real. Isso dá uma sensação de atualização à sua página de checkout e reduz o atrito durante a inserção do endereço.

Implementação via CDN

Para uma integração rápida sem uma etapa de build, carregue o SDK pela 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>

Atualizar método de pagamento

O checkout inline oferece suporte a atualizações do método de pagamento para assinaturas. Quando um cliente precisa atualizar seu método de pagamento para uma assinatura ativa ou reativar uma assinatura suspensa, você pode renderizar o fluxo de atualização diretamente no layout da sua página.

Como funciona

Chame a API de atualização do método de pagamento para obter um 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' }
});

Passe o payment_link retornado como checkoutUrl para abrir o checkout inline:

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

O frame inline renderiza somente o formulário de coleta do método de pagamento. Os clientes podem inserir novos dados do cartão ou selecionar um método de pagamento salvo sem sair da sua página.

Para assinaturas suspensas

Ao atualizar o método de pagamento de uma assinatura no status on_hold, o Dodo Payments cria automaticamente uma cobrança para quaisquer valores pendentes. Monitore os webhooks payment.succeeded e subscription.active para confirmar a reativação.

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

Você também pode usar um método de pagamento salvo existente em vez de coletar novos dados, passando type: 'existing' com um payment_method_id para a API de atualização do método de pagamento.

Tratamento de erros

Sempre implemente o tratamento de erros no 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);
      // Show user-friendly error message
    }
  }
});

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

Práticas recomendadas

Design responsivo: Garanta que seu elemento contêiner tenha largura e altura suficientes. O iframe normalmente se expandirá para preencher o contêiner.
Sincronização: Use o evento checkout.breakdown para manter seu resumo de pedido personalizado ou suas tabelas de preços sincronizados com o que o usuário vê no frame de checkout.
Estados de esqueleto: Exiba um indicador de carregamento no 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 listeners de eventos.

Para implementações em modo escuro, use #0d0d0d como cor de fundo para obter a melhor integração visual com o frame de checkout inline.

Validação do status do pagamento

Não dependa somente dos eventos do checkout inline para determinar o sucesso ou a falha do pagamento. Sempre implemente a validação no servidor usando webhooks e/ou polling.

Por que a validação no servidor é essencial

Embora os eventos do checkout inline forneçam feedback em tempo real, eles não devem ser sua única fonte de verdade para o status do pagamento. Problemas de rede, falhas do navegador ou usuários fechando a página podem fazer com que eventos sejam perdidos. Para garantir uma validação confiável do pagamento:

Escute os eventos de webhook - O Dodo Payments envia webhooks para alterações no status do pagamento
Implemente um mecanismo de polling - Seu frontend deve consultar periodicamente seu servidor em busca de atualizações de status
Combine as duas abordagens - Use webhooks como fonte principal e polling como alternativa

Arquitetura recomendada

Etapas de implementação

1. Escute os eventos do checkout - Quando o usuário clicar em pagar, comece a preparar a verificação do status:

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

2. Consulte seu servidor - Crie um endpoint que verifique no banco de dados o status do pagamento, atualizado pelos 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. Gerencie webhooks no servidor - Atualize seu banco de dados quando o Dodo enviar webhooks payment.succeeded ou payment.failed. Consulte nossa documentação de Webhooks para obter detalhes.

Solução de problemas

Checkout frame is not appearing

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 checkoutUrl é válido

Taxes are not updating in my UI

Certifique-se de estar escutando o evento checkout.breakdown
Os impostos só são calculados depois que o usuário insere um país e um código postal válidos no frame de checkout

Carteiras digitais

Para obter informações detalhadas sobre como configurar Apple Pay, Google Pay e outras carteiras digitais, consulte a página Carteiras digitais.

Configuração rápida do Apple Pay

A verificação de domínio é necessária somente para o checkout inline (incorporado). Ela não é necessária para o checkout hospedado.

O Apple Pay não está disponível para o checkout sobreposto.

O Apple Pay é verificado por domínio no dashboard.

Open Wallet domains

Acesse Settings → Payment Methods e, na linha Apple Pay, clique em Manage domains.

Botão Manage domains na linha Apple Pay nas configurações de Payment Methods — Open Wallet domains from the Apple Pay row

Download the domain association file

No painel de domínios da carteira, baixe o arquivo de associação.

Painel de domínios da carteira com o botão Download file — Download the Apple Pay domain association file

Clique em Register domain e insira o domínio onde você incorpora o checkout inline, por exemplo, shop.example.com; depois clique em Continue.

Formulário de registro de domínio com um domínio inserido — Register the domain where you embed inline checkout

Host the file on your domain

Hospede-o em:

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

Ele deve ser servido por HTTPS, estar acessível sem redirecionamentos e ser servido com Content-Type: application/octet-stream ou text/plain.

Verify the domain

Clique em Verify domain. O Dodo Payments confirma que o arquivo está disponível e envia seu domínio à Apple.

Tela de verificação do domínio com o caminho do arquivo de associação hospedado e o botão Verify domain — Verify the hosted association file

Confirm it's active

Quando o status mostrar Active, o Apple Pay estará habilitado para esse domínio. Use o botão de alternância Enabled para ativá-lo ou desativá-lo por domínio.

Lista de domínios da carteira mostrando domínios com status Active do Apple Pay e botões de alternância Enabled — Verified domains show an Active status

Test the integration

Abra o checkout em um dispositivo Apple
Verifique se o botão do Apple Pay aparece
Conclua uma transação de teste

Suporte a navegadores

O Checkout SDK do Dodo Payments oferece suporte a:

Chrome (versão mais recente)
Firefox (versão mais recente)
Safari (versão mais recente)
Edge (versão mais recente)
IE11+

Checkout inline versus sobreposto

Escolha o tipo de checkout adequado ao seu caso de uso:

Recurso	Inline	Sobreposto
Profundidade da integração	Totalmente incorporado à página	Modal sobre a página
Controle do layout	Controle total	Limitado
Branding	Corresponde à sua página	Separado da página
Esforço de implementação	Maior	Menor
Ideal para	Páginas de checkout personalizadas e fluxos de alta conversão	Integração rápida e páginas existentes

Use o checkout inline quando quiser máximo controle sobre a experiência de checkout e branding consistente. Use o checkout sobreposto para uma integração mais rápida com alterações mínimas nas páginas existentes.

Recursos relacionados

Overlay Checkout

Use o checkout sobreposto para uma integração rápida baseada em modal.

Checkout Sessions API

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

Webhooks

Gerencie eventos de pagamento no servidor com webhooks.

Integration Guide

Guia completo para integrar o Dodo Payments.

Para obter mais ajuda, visite nossa comunidade no Discord ou entre em contato com nossa equipe de suporte a desenvolvedores.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Como funciona

O que caracteriza um bom checkout inline

Jornada do cliente

Início rápido

Integração passo a passo

Exemplo completo em React

Referência da API

Inicializar

Abrir checkout

Fechar checkout

Verificar status

Eventos

Dados detalhados do checkout

Implementação via CDN

Atualizar método de pagamento

Como funciona

Para assinaturas suspensas

Tratamento de erros

Práticas recomendadas

Validação do status do pagamento

Por que a validação no servidor é essencial

Arquitetura recomendada

Etapas de implementação

Solução de problemas

Carteiras digitais

Configuração rápida do Apple Pay

Suporte a navegadores

Checkout inline versus sobreposto

Recursos relacionados

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

​Como funciona

​O que caracteriza um bom checkout inline

​Jornada do cliente

​Início rápido

​Integração passo a passo

​Exemplo completo em React

​Referência da API

​Inicializar

​Abrir checkout

​Fechar checkout

​Verificar status

​Eventos

​Dados detalhados do checkout

​Implementação via CDN

​Atualizar método de pagamento

​Como funciona

​Para assinaturas suspensas

​Tratamento de erros

​Práticas recomendadas

​Validação do status do pagamento

​Por que a validação no servidor é essencial

​Arquitetura recomendada

​Etapas de implementação

​Solução de problemas

​Carteiras digitais

​Configuração rápida do Apple Pay

​Suporte a navegadores

​Checkout inline versus sobreposto

​Recursos relacionados

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

Como funciona

O que caracteriza um bom checkout inline

Jornada do cliente

Início rápido

Integração passo a passo

Exemplo completo em React

Referência da API

Inicializar

Abrir checkout

Fechar checkout

Verificar status

Eventos

Dados detalhados do checkout

Implementação via CDN

Atualizar método de pagamento

Como funciona

Para assinaturas suspensas

Tratamento de erros

Práticas recomendadas

Validação do status do pagamento

Por que a validação no servidor é essencial

Arquitetura recomendada

Etapas de implementação

Solução de problemas

Carteiras digitais

Configuração rápida do Apple Pay

Suporte a navegadores

Checkout inline versus sobreposto

Recursos relacionados