Pular para o conteúdo principal
Payment Element é a integração de navegador recomendada pela Pagou para novos checkouts com cartão. Ela combina:
  • campos de cartão hospedados em iframe seguro
  • tokenização no navegador
  • suporte embutido a continuação de next_action
  • handoff limpo para o seu back-end criar POST /v2/transactions

​
Quando usar

Use Payment Element quando:
  • você estiver construindo um novo checkout com cartão
  • estiver substituindo um fluxo legado de tokenização no navegador
  • precisar tratar 3DS na mesma sessão do cliente
  • quiser que o back-end continue no controle da criação da transação e do estado do pedido

​
Modelo de integração

Payment Element não substitui o seu back-end. Ele reduz a responsabilidade do navegador para entrada segura do cartão e orquestração do submit.

​
O que o navegador faz

  • inicializa Pagou
  • monta o campo de cartão
  • envia via elements.submit(...)
  • continua next_action quando necessário
  • mostra mensagens de pendência, sucesso ou nova tentativa

​
O que o back-end faz

  • autentica com as suas credenciais secretas da Pagou
  • cria a transação
  • armazena IDs de transação e referências de pedido
  • processa eventos de webhook
  • decide quando o pedido está realmente pago

​
APIs principais

A superfície atual do navegador é: 
Pagou.setEnvironment("sandbox");

const elements = Pagou.elements({
	publicKey: "pk_sandbox_sua_chave_publica",
	locale: "pt-BR",
	origin: window.location.origin,
});

const card = elements.create("card", { theme: "default" });

const result = await elements.submit({
	createTransaction: async (tokenData) => {
		return fetch("/api/pay", {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ token: tokenData.token, amount: 2490 }),
		}).then((response) => response.json());
	},
});

​
Regras operacionais

  • preserve id, status e next_action na resposta do back-end
  • não libere pedido a partir apenas da resposta do navegador
  • mantenha o pedido pendente até webhook ou reconciliação confirmarem o estado final
  • reconcilie resultados incertos com GET /v2/transactions/{id}

​
Comece por aqui