Arquitetura do Checkout via iframe

A arquitetura do Checkout via iframe é composta por três camadas principais: front-end, back-end e API Checkout. Cada camada executa uma etapa fundamental para criar o checkout, gerar a checkoutUrl e exibir o fluxo de pagamento dentro do iframe.

Um ponto central da arquitetura é que o front-end não se comunica diretamente com a API Checkout. Toda a comunicação com a API ocorre exclusivamente pelo back-end, garantindo segurança, padronização e proteção das credenciais.

Componentes da arquitetura

1. Front-end (loja)

O front-end é responsável por:

• Iniciar a criação da página de pagamento;
• Enviar requisição ao back-end sem incluir credenciais;
• Receber a checkoutUrl;
• Renderizar o iframe com o checkout;
• Controlar estados de carregamento, erros e fallback.

2. Back-end (servidor da loja)

O back-end atua como intermediário entre a loja e a API Checkout. Ele:

• Recebe a requisição enviada pelo front-end;
• Adiciona a credencial MerchantId;
• Cria a página de pagamento na API Checkout pelo endpoint POST /api/public/v1/orders;
• Retorna a URL final para o front-end.

Para mais detalhes e exemplos completos, consulte Criar página de pagamento do Checkout Cielo.

3. API Checkout

A API Checkout é responsável por:

• Receber a requisição enviada pelo back-end;
• Processar os dados do pedido;
• Criar a página de pagamento;
• Retorna o checkoutUrl, usada pelo iframe.

Fluxo completo do Checkout via iframe

O fluxo completo descreve a jornada desde a ação do usuário até a exibição do checkout:

O passo a passo abaixo descreve a jornada completa de criação e exibição do checkout:

1. A pessoa compradora clica em "Realizar pagamento";
2. O front-end envia uma requisição ao back-end solicitando a criação da página de pagamento;
3. O back-end envia uma requisição para a API Checkout (POST https://cieloecommerce.cielo.com.br/api/public/v1/orders) ;
4. A API Checkout cria a página de pagamento e retorna o checkoutUrl;
5. O back-end devolve a checkoutUrl para o front-end.;
6. O front-end exibe a página de pagamento na sessão da pessoa compradora.