Embedded checkout
On-page payment fields must preserve a native storefront journey without exposing raw card details to merchant infrastructure. Cardflo’s embedded checkout widget uses isolated iframe fields and browser-side tokenisation before transactions reach regulated acquirer partners.
- Category
- Checkout
- Capabilities
- 6
- Available on
- All plans
Mid-market merchants face friction when customers leave the storefront to complete a purchase. Maintaining an uninterrupted user journey requires displaying payment fields directly within the shopping cart architecture. At the same time, handling unencrypted card numbers on native forms introduces significant compliance obligations and technical overhead for retail and software operators.
Cardflo provides a drop-in payment ui that isolates sensitive input fields inside a secure container. The gateway orchestrates the tokenisation process directly from the browser to regulated acquirer partners. This architecture keeps the buyer engaged on the original webpage while ensuring the merchant infrastructure never touches raw primary account numbers.
Cardflo embeds secure payment fields directly into your existing domain, managing the multi-acquirer boarding process on your behalf. This integration maintains your brand's look and feel whilst reducing PCI DSS compliance burden and increasing payment security.
Embedded checkout overview
Incorporating payment fields directly into a commercial interface demands a careful balance between user experience and data security. Cardflo supplies an inline checkout integration that loads secure tokenisation elements directly into the merchant DOM.
The architecture relies on an iframe security model, isolating the cardholder input from the host environment to restrict PCI DSS scope to SAQ A requirements. Finance and technical teams can style the input fields to match local CSS templates, maintaining a unified visual identity without handling raw PAN data.
This approach is designed for merchants retaining buyers on a single domain, rather than those redirecting off-site to a hosted checkout page or those with the resources to engineer a custom payment api from the ground up. The resulting flow captures the transaction cleanly before passing the payload to an acquirer partner network for authorisation.
How embedded checkout works
Initialising the UI library
The merchant platform loads the Cardflo script on the final cart page, initialising the drop-in library. This script generates empty container elements within the native DOM structure. The system establishes an encrypted connection to the gateway orchestration layer, ensuring the environment is authenticated and ready to render isolated payment fields. This step primes the interface without exposing the broader website to PCI compliance burdens.
Rendering the secure iframe
Cardflo injects an iframe payment gateway directly into the designated DOM containers. These isolated frames host the actual input fields for card numbers, expiry dates and security codes. Because the frames originate from a certified vault, the customer types sensitive data directly into a secure environment that looks and behaves like native website code, completely bypassing the merchant proprietary servers.
Tokenisation and payload submission
Upon form submission, the Cardflo vault securely captures the card details and generates a cryptographic token representing the instrument. The front-end receives this token and submits it to the merchant backend alongside standard order data. The system then routes the tokenised payload to the appropriate acquirer partner network, triggering an authorisation request while keeping the buyer firmly on the original domain.
Why embedded checkout matters
Preserving the conversion funnel
Forcing customers to leave a storefront introduces latency, brand disruption and unnecessary friction. By completing the transaction within an inline checkout integration, merchants prevent cart abandonment linked to unfamiliar redirect environments. Maintaining visual consistency throughout the checkout journey keeps the buyer engaged, ensuring a higher percentage of initiated transactions result in successfully authorised sales.
Containing compliance infrastructure
Capturing card data depends on holding a clean position against security standards, which often imposes heavy infrastructure costs. Utilising an iframe security model shifts the burden of raw data handling away from the merchant architecture. The operator achieves a native visual experience while maintaining an SAQ A compliance profile, drastically reducing the time and capital spent on annual security audits and penetration testing.
Regulatory notes for embedded checkout
Inline 3DS2 authentication under PSD2
Strong Customer Authentication is mandatory across the European Economic Area for the majority of digital card transactions. An embedded checkout widget must accommodate these security checks without breaking the user journey.
The Cardflo library detects when a transaction falls under PSD2 scope and automatically triggers the necessary 3D Secure 2 protocols directly on the active webpage.
The orchestration engine passes exemption flags where applicable, such as for low-value payments or recurring merchant-initiated transactions.
When an issuer challenges the transaction, the inline checkout integration surfaces the issuer authentication screen via a secure modal, capturing the biometric or passcode data before immediately returning control to the merchant application.
Scheme rules on data minimisation
Visa and Mastercard require operators to limit system exposure to sensitive authentication data. Passing full card details through a merchant backend violates scheme data minimisation principles unless the entity holds full PCI DSS Level 1 certification.
An iframe payment gateway ensures that only secure tokens traverse the merchant network.
The acquirer partner network receives the raw cardholder data directly from the isolated vault, authorising the funds according to strict scheme communication standards.
This structure allows operators to present a continuous, native buying experience while shifting the regulatory burden of securing the primary account numbers onto dedicated gateway infrastructure.
Embedded checkout use cases
Curated box subscription checkouts
Merchants using a bespoke basket can place isolated card number, expiry and security code elements within the page while keeping raw credentials outside their application environment. Cardflo provides drop-in tokenisation components and routes the resulting payment tokens through its acquirer partner network, reducing PCI DSS exposure without surrendering the surrounding checkout design.
Saved address express checkout
Returning retail customers can complete purchases from an account page using saved delivery details, but re-entering payment credentials often adds friction before order confirmation. Cardflo supports embedded tokenisation fields and wallet options such as Apple Pay and Google Pay, allowing merchants to shorten the on-page flow while acquirer partners handle authorisation.
On-page ticket sales at scale
Merchants replacing separate desktop and mobile payment forms need one embedded component that preserves field usability across screen sizes without exposing card data to storefront scripts. Cardflo supplies a responsive iframe-based widget with configurable styling and validation, while maintaining isolation between the merchant page and the environment used to capture payment credentials.
Inline 3DS2 authentication flow
European card payments may require PSD2 SCA, and a poorly contained 3DS2 challenge can interrupt the basket flow or obscure the final payment state. Cardflo keeps supported authentication steps within the embedded checkout experience, then passes the authentication result into routing and reporting so merchants can reconcile authorisations, failures and challenge outcomes.
Embedded checkout by the numbers
Industry research suggests that removing redirects can lead to a significant decrease in cart abandonment, as customers are less likely to encounter technical friction or trust issues during the payment phase.
Using hosted fields can reduce the number of security controls a merchant must audit annually by a substantial margin compared to handling raw card data, according to standard PCI DSS assessment benchmarks.
Optimised embedded fields that trigger native keyboards and provide real-time validation typically facilitate faster completion times for mobile users compared to traditional non-responsive form layouts.
Methodology: these figures are illustrative ranges drawn from published industry data and observed merchant cohorts, not guarantees. Actual results depend on your risk profile, card mix, geography and acquiring setup, and are confirmed only in your own pricing and approval terms.
Related terms
Talk to our team about a live rollout across our acquirer partners' rails.
What you get with Embedded checkout
- PCI DSS scope reduction to SAQ A via isolated iframe elements handling raw primary account numbers.
- CSS compatibility allows merchants to style fonts, colours and borders to match the native website layout.
- Real-time client-side validation immediately flags incorrect card lengths or expiry dates before transaction submission.
- Compatibility with multiple acquirer partners allows dynamic routing behind a single unified front-end interface.
- Automatic field generation for cardholder name, PAN, CVV and expiry date within the website payment component.
- Support for card-on-file tokenisation lets returning buyers complete subsequent purchases without re-entering standard payment details.
A short scoping call, then a written plan for your MIDs.
Questions about Embedded checkout
How does an iframe checkout widget restrict PCI DSS scope?
An iframe isolates the cardholder data environment from the surrounding website architecture. When a buyer types the card number, the keystrokes enter a secure window hosted entirely on Cardflo infrastructure.
The merchant application never processes, transmits or stores the primary account number or CVV. This architectural separation qualifies the merchant for Self-Assessment Questionnaire A (SAQ A).
By removing raw data from the proprietary server environment, businesses avoid the stringent, resource-heavy technical controls required for environments that handle full unencrypted card strings.
Can CSS stylesheets manipulate the drop-in UI fields?
Developers can pass specific styling attributes through the initialisation configuration to match the host domain layout. The JavaScript library accepts parameters for font families, text sizes, placeholder colours, border radii and padding.
While the input fields reside within an isolated cross-origin frame, these approved properties map to the internal elements dynamically. This capability ensures the embedded checkout widget visually aligns with the surrounding cart interface, providing a cohesive brand experience without compromising the fundamental iframe security model.
How does the embedded checkout widget handle validation errors on-page?
The embedded checkout widget validates card field formats within its secured components and returns structured error states to the surrounding checkout page. Merchants can display field-level messages, disable order submission until required details are valid and retain non-sensitive basket information.
Sensitive card data remains confined to the widget’s controlled fields rather than passing through the merchant’s page code.
Can an embedded checkout widget adapt to mobile screen sizes?
The embedded checkout widget can use responsive containers so card fields, labels and validation messages fit smaller screens without opening a separate payment page. Merchants control the surrounding layout, while the secured payment elements resize within defined width and height constraints.
Mobile testing should cover keyboard behaviour, viewport settings, browser compatibility and adequate spacing around payment controls.
Related features.
Related guides.
See how Cardflo compares.
Ready to improve your payments setup?
Tell us about your business. We'll match you with the right acquiring partners and the right route, typically inside a week.