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
- 10
- Available on
- All plans
Cardflo's embedded checkout seamlessly integrates payment processing directly into your website or application. This solution provides a secure, PCI-compliant payment form that appears within your existing page, eliminating redirects and maintaining a consistent user experience.
It's designed for merchants seeking straightforward integration without sacrificing control or brand presence.
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
Embedded checkout functions as a client-side integration method where payment input fields are hosted by the Service Provider (PSP) but rendered within the merchant's existing web architecture.
Unlike hosted payment pages that require a browser redirect to an external domain, this model utilises iFrames or hosted fields to maintain the user's presence on the primary site. The data flow ensures that sensitive Primary Account Number (PAN) data never touches the merchant's server, as the input fields communicate directly with the acquirer's gateway.
This mechanism significantly reduces the scope of PCI DSS compliance, typically allowing merchants to qualify for the simpler SAQ A or SAQ A-EP assessments.
By retaining control over the DOM around the secure fields, businesses can manage the visual layout and user journey while delegating the cryptographic security and tokenisation processes to the infrastructure layer of the payment stack. This approach balances branding requirements with robust risk management and technical security.
How embedded checkout works
Client-side script initialisation
The integration begins by loading a JavaScript library from the payment provider onto the merchant's checkout page. This script creates secure containers within specific DIV elements, ensuring that the critical payment inputs remain isolated from the rest of the page's code to prevent cross-site scripting vulnerabilities or data interference.
Secure field rendering
The provider renders individual iFrames for the card number, expiry date, and CVV. These fields are hosted on a PCI-compliant environment but appear as part of the merchant's form. This separation ensures that the merchant handles only non-sensitive metadata, while the actual cardholder data is transmitted directly to the gateway.
Tokenisation and validation
When the customer enters their details, the system performs real-time validation for LUHN checks and BIN identification. Upon submission, the sensitive data is exchanged for a secure vault token. This token represents the payment instrument and is the only credential passed to the merchant's backend for the authorisation request.
Transaction authorisation
The merchant sends the token to their server, which then initiates an authorisation call to the acquirer. The acquirer forwards this to the card schemes and the issuer. The issuer returns a response, such as an approval or a decline code, which the merchant then displays to the user.
Why embedded checkout matters
Conversion Rate Optimisation
Redirects often introduce friction and latency, which are primary drivers of basket abandonment. By keeping the customer within the merchant's domain throughout the entire transaction, the payment process feels like a continuous part of the user journey. This consistency helps maintain trust, particularly during high-value transactions where a sudden change in URL might cause users to suspect a phishing attempt or a technical fault.
Security and Compliance Burden
Managing raw card data requires extensive security protocols and rigorous yearly audits under PCI DSS Level 1 criteria. An embedded model bypasses these requirements by ensuring the merchant server never sees, processes, or stores sensitive PAN data. This shift reduces the operational overhead and liability associated with data breaches, as the security burden is transferred to the service provider whose systems are purpose-built for data protection.
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.
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
- Reduction of PCI DSS scope to SAQ A or SAQ A-EP by isolating sensitive payment data.
- Elimination of cross-domain redirects to minimise checkout friction and improve customer retention.
- CSS customisation capabilities to align the payment form with existing brand style guides.
- Real-time client-side validation for card formatting, expiry dates, and CVV length checks.
- Direct tokenisation of card details to ensure secure transmission to the payment gateway.
- Mobile-responsive input fields that adapt to various screen sizes and virtual keyboard layouts.
- Support for 3D Secure authentication directly within the embedded flow for SCA compliance.
- Automatic BIN detection to identify card type and apply relevant processing logic immediately.
- Compatibility with modern JavaScript frameworks including React, Vue, and Angular for structured integration.
- Localised language support for checkout fields to cater to a global customer base.
A short scoping call, then a written plan for your MIDs.
Questions about Embedded checkout
How does an embedded checkout differ from a hosted payment page regarding security?
A hosted payment page redirects the user to a URL managed by the PSP, whereas an embedded checkout keeps the user on the merchant's site using iFrames or hosted fields.
From a security perspective, both methods ensure the merchant does not handle sensitive card data, but the embedded approach offers more control over the user experience.
The embedded method typically requires a slightly more complex technical implementation than a hosted page but provides a significantly better conversion path for the end user.
Does using embedded fields require a specific PCI DSS certification level?
Merchants using embedded fields typically qualify for SAQ A-EP or SAQ A, depending on how the fields are implemented.
Because the sensitive data is captured in an iFrame that communicates directly with the PSP, the merchant's server is effectively removed from the flow of cardholder data.
This is a significant reduction in compliance requirements compared to an API-based integration where the merchant server may temporarily handle raw card data before tokenisation.
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.
Is the embedded checkout optimised for mobile devices?
Industry-standard embedded checkout components are designed to be responsive. They utilise media queries to adjust the size and layout of input fields based on the device's screen dimensions.
Furthermore, they are configured to trigger the correct numeric keypads on mobile operating systems, which improves the speed and accuracy of data entry for the customer, leading to higher completion rates on handheld devices.
Does the embedded checkout support alternative payment methods like digital wallets?
Embedded checkouts can often be configured to display digital wallet buttons, such as Apple Pay or Google Pay, alongside traditional card inputs. These methods often bypass the card entry fields entirely, using the wallet's stored credentials to authorise the transaction via a secure token.
This multi-modal approach ensures that the checkout remains flexible for various consumer preferences while maintaining a singular integration point.
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.