.png?width=365&height=122&name=BTLogo%20(1).png)
Since when was a second too long to wait?
That's the story of every checkout page on the internet.
As a checkout flow loads, the customer is already deciding—enter payment information, or leave. A few hundred milliseconds can directly impact conversion rates, which means the SDKs powering those payment forms need to always perform. Every time.
Basis Theory calls those checkout forms Elements. They're how developers collect sensitive data—card numbers, bank details, PII—without that data ever touching their own systems, keeping PCI compliance scope narrow and manageable. Elements are a core part of how Basis Theory works, and our engineering team has completely rebuilt them to be faster and easier to work with.
What Slowed Down Elements
Thousands of integrations are supported by Elements. But as the codebase matured, technical debt accumulated in ways that created real costs for both our customers, and our own teams.
- Bundle sizes were larger than they needed to be. For end users on mobile networks, spotty Wi-Fi, or with slower connections in international markets, that extra weight translated into slower load times on checkout pages.
- Architecture maintenance had grown too difficult to navigate. Adding new features required more context than it should. Bug surface areas became larger and more complex.
Every Element was styled individually, meaning if a checkout had four separate card fields, developers needed to write four separate style configurations with the same fonts, colors, and spacing duplicated in each. There was no global theming. We were unintentionally adding friction to the implementation process, and generating support burdens that didn’t need to exist.
The short version: older versions of Elements were hand-styling every input.
What Was Built
Elements v3 is a rebuild of a foundational part of the Basis Theory Platform. And the rebuild produced measurable gains with internal benchmarks and beta usage:
- 2x faster time to interactive: 803ms to 402ms.
- 85% fewer network requests: 52 to 8.
- 93% smaller total transfer size: 3,473 KB to 239 KB.
- Zero iframe sub-requests: down from 44 to 0.
Styling went from a per-elements CSS to a design token system. The internal architecture was rethought so that any engineer can open, understand, and contribute to it quickly. This wasn’t just about the developer experience—simpler code means faster feature development, and an SDK that can evolve without accumulating tech debt.
Elements have faster load times because of less JavaScript to download. Every kilobyte adds up. For international end users, a leaner Elements is one less thing working against your checkout. The lighter footprint is what can make a difference between a form that feels instant and one that is late.
By introducing a design token system, the Elements updates allow you to define your colors, typography, spacing, borders, and shadows once at initialization. From that point on, every Element inherits them—including dark mode.
The cleaner structure makes Elements easier to navigate, and modify, which matters for teams using AI-assisted tooling to move faster and with more confidence.
Elements follow the OS preference automatically, and can be toggled at runtime. The per-element style option layers on top and is the difference between configuring a design system, and hand-styling every input.
What This Means for Implementations
For our customers using Elements v2, the upgrade path was intentionally designed to deliver value based on real usage patterns—core workflows should map cleanly to Elements v3.
Developers shouldn’t have to choose between moving fast and handling sensitive data responsibly. Secure iframes, PCI compliance support, and data isolation should be simple to understand—not a project unto themselves.
V3 of Elements makes this easier.
In practice, that means an SDK that becomes interactive 2x faster, making 85% fewer network requests, and 93% less total transfer size. Your end users’ checkout flow will move faster—as will your team.
Try Elements in our test portal, and reach out to our team to talk through your use case.
