Checkout via iframe

The Checkout via iframe allows the payment process to be completed within the store's own page, without redirects or opening new tabs. This approach keeps the client in the merchant's domain, reduces interruptions, and improves the flow of the journey.

The content displayed in the iframe is delivered directly by Cielo. This ensures security, stability, and compliance while preserving visual integration with the store’s website.

ℹ️

The use of embedded checkout is optional. The merchant can maintain the traditional redirect flow or adopt the integrated version via iframe.

Why use checkout via iframe?

Using checkout via iframe brings significant advantages to the shopper experience:

• Payment on the same page: the shopper stays on the same page during payment;

• More fluidity and less friction: reduces unnecessary steps and makes the payment journey faster;

• Greater sense of security: the domain shown in the browser remains the store’s domain;

• Easy to integrate: adapts well to various architectures and technology stacks.

Prerequisites

Environment requirements

• Have a Cielo Checkout account;

• Domain with active TLS;

• Test environment (Sandbox).

Technical requirements

• Back-end capable of acting as a secure proxy for Checkout API calls;

• Front-end with support for iframe rendering;

• Do not expose credentials (clientId and clientSecret) on the front-end;

• Ability to process messages via postMessage, when applicable;

• Content Security Policy configured to allow only the resources essential to the iframe and communication with the back-end.

Supported Technologies

• Front-end: web applications in any framework (e.g., Vue.js in the reference example);

• Back-end: Node.js/Express, C#, Java, or any technology that allows HTTP requests with header submission.