Embedded Components: A Platform’s Payment UX Layer

Key takeaways

• Embedded components are pre-built, brandable UI pieces for payment flows that drop into a platform’s app, sitting between hosted pages and building everything from scratch.
• They cover the full payment surface, from checkout and onboarding to dashboards, disputes, and refunds, so teams don’t rebuild what every payment platform needs.
• Theming makes them look native to the platform, and tokenization keeps sensitive card data (and PCI scope) off the platform’s servers.
• Platforms typically use components for standard flows and the API directly for anything they want to differentiate on.
• The approach scales across a platform’s growth, from launching fast to a mature mix of components and custom UI.
• Payabli Creator is Payabli’s embedded component library, with a broad catalog, native React components, deep theming, and API access underneath.

The payment UX problem

The payment UX surface is larger than it looks. A full payments program has dozens of distinct UI moments:

• Onboarding and approval: application forms, KYB document upload, approval status screens
• Consumer payment: payment method entry, saved-card management, 3DS challenge flows, decline recovery
• Post-transaction: refund requests, dispute response forms
• Merchant dashboard: transaction dashboards, balance views, settlement history, statements
• Configuration: user management, API key management, webhook configuration, team settings

...And yet, each has to exist, be accessible, be mobile-responsive, and meet regulatory standards.

What are embedded components?

Embedded components are ready-made UI elements that each handle a specific payment flow, so a platform can drop them in and run them without building the interface from scratch. They drop into the platform’s application as first-class components, render natively, and are theme-able to the platform’s brand.

What makes them “embedded?”

They run inside the platform’s application rather than on a separate redirect page, so the flow never breaks out to a processor-hosted screen. The user’s experience stays on the platform’s domain, and the platform controls the surrounding page, navigation, and branding end to end.

The security model

Sensitive data (card numbers, bank account numbers) is captured directly by the component and tokenized before ever hitting the platform’s servers, so the platform never touches raw PCI data and keeps its obligations light.

The component catalog

A complete embedded component library typically covers the full payment surface. It breaks down across six areas:

• Consumer-facing payment entry: card entry fields, bank account (ACH) entry, saved payment method selectors, wallet connectors (Apple Pay, Google Pay), 3DS authentication handlers, tokenization and handoff, amount and fee display
• Merchant onboarding: business information forms, beneficial owner entry, KYB document upload, bank account verification, terms-of-service acceptance, application status views with step-by-step progress
• Merchant dashboard: transaction list with filtering, transaction detail views, settlement history, balance and funds-in-flight views, reports and statement generation, chart components for volume, trend, and cohort views
• Dispute management: dispute list and detail views, evidence upload, response submission forms, status tracking, deadline countdowns
• Refunds and voids: refund initiation forms with full vs. partial controls, void confirmations, transaction-level action menus
• Settings and configuration: user management, API key management, webhook configuration, bank account update flows, brand and tax information management

Theming and brand control

Theming is how embedded components stop looking like someone else’s software and start looking like the platform’s own. Good libraries make that control layered:

• Token-based theming
• Component slot overrides
• Full CSS override where needed

...This layered control helps maintain a continuous brand identity across the payment surface.

The developer experience

For the engineers integrating them, embedded components should behave like any other library in the stack:

• Installation: Standard package install via npm or equivalent.
• Using a component: Import it, place it in the JSX, provide props (merchant ID, transaction ID, event handlers). The component manages its own state and fires events back.
• Event handling: Clear callbacks (onSuccess, onError) let the platform react without inspecting internals.
• Testing: Components work in standard tools and should have a test mode that renders without hitting production APIs.
• TypeScript support: Types for every prop, event, and return value, enabling autocomplete-driven development.

Compliance offloaded by default

The compliance dimension is what makes embedded components strategically valuable. Each area the library handles is one that the platform doesn’t:

• PCI scope: Components tokenize payment data before it reaches the platform’s servers.
• Accessibility: Compliance with WCAG 2.1 AA is often maintained by the library.
• Regulatory disclosures: Good components maintain specific disclosures as the landscape changes.

How Payabli Creator helps

Payabli Creator is designed as a comprehensive embedded component library:

• Broad component catalog covering the full payment surface.
• Token-based theming with deep customization.
• Native React components offering real props, event handlers, and full testability.
• Security offloaded ensuring a minimal PCI scope.
• Accessibility and regulatory compliance maintained.
• Full TypeScript support and documentation available.

Creator supports every crawl-walk-run stage, allowing for a flexible approach to payment UX.