Styling and Responsiveness

Displaying the checkout inside the iframe can be adjusted for different screen sizes. The goal is to ensure the content is clearly shown on both desktop environments and mobile devices.

Design Recommendations

The iframe should occupy the full width available in the container;
On larger screens, a fixed height helps maintain a comfortable viewing area;
On mobile devices, the iframe can occupy the entire visible height of the screen;
Adjustments to the container's spacing contribute to a more organized layout.

CSS Example

The following example shows the style rules applied to the component.

/* Para desktop */
iframe {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 8px;
}

/* Para mobile */
@media (max-width: 768px) {
  iframe {
    height: 100vh;  /* Ocupa toda a tela */
  }
  
  .checkout-poc {
    padding: 16px;
    margin: 0;
  }
}

This code defines:

Full width for the iframe;
Fixed height for desktops;
Full-screen height for mobile devices;
Spacing adjustments in the .checkout-poc container on smaller screens.

Accessibility in the iframe

The checkout iframe should include attributes that enhance assisted navigation and reinforce the security of the displayed content. It is recommended to:

Use title to indicate the iframe's purpose;
Set aria-label when the element represents a functional area of the interface;
Apply restrictions with sandbox="allow-scripts allow-same-origin allow-forms";
Use referrerpolicy="no-referrer" to avoid sending unnecessary information to external domains.

These practices contribute to a safer, more accessible, and consistent experience across different devices.