How Shopify Rebuilt Checkout for One-Click Conversions

Lucas: If you run an online store, or even if you just buy stuff online, the moment of truth is the checkout page. That few seconds between clicking 'buy' and getting a confirmation - it's where revenue actually happens, or where it leaks away. Luna: And Shopify powers about ten percent of US e-commerce, right? So when they rebuilt their checkout last year, it mattered to a lot of people.

Lucas: Exactly. And the headline number is that they cut the average checkout time from eighteen seconds down to under four seconds. That's a massive improvement, and it wasn't just a front-end polish - they fundamentally rethought how the checkout state is computed and served. Luna: So walk me through the old architecture.

Why was it taking eighteen seconds? Lucas: The old checkout was a classic server-side rendered app. Every time a user entered their email, selected a shipping option, or applied a coupon, the page would do a full round-trip to Shopify's origin servers. The server would recalculate taxes, inventory, shipping rates - all of that - and send back a new HTML page.

On a good day, each step took a couple of seconds. But across the whole flow - email, shipping address, payment method, review - you could easily hit fifteen to twenty seconds. Luna: And that's with a decent internet connection, I assume. On mobile or slower networks, it was even worse.

Lucas: Right. Their data showed that for every additional second of checkout time, conversion dropped by about two percent. So a slow checkout was literally costing merchants millions in lost revenue. Luna: So what was the architectural shift?

They didn't just add a loading spinner, I'm guessing. Lucas: No. The core insight was that most of the checkout state can be precomputed. Shopify's engineering team realized that for the vast majority of checkouts, the product, the customer's location, and the shipping options are known before the user even clicks 'buy'.

So they moved the state computation to the edge - a global network of edge nodes running JavaScript - that can assemble the checkout page in under fifty milliseconds. Luna: So instead of hitting a central server in Virginia or wherever, the user's request goes to the nearest edge node, which already has the product catalog and pricing rules cached locally? Lucas: Exactly. But it's not just caching.

They built a lightweight checkout runtime that runs on each edge node. That runtime can compute taxes, validate coupon codes, and calculate shipping rates using a preloaded set of rules. Only when the user actually submits the payment does the edge node talk to the payment processor - and even then, it does so asynchronously, without blocking the user from seeing a confirmation. Luna: That sounds great for conversion, but what about the complexity of supporting over a hundred different payment gateways?

Each one has its own API, its own fraud checks, its own latency profile. Lucas: That's the tricky part. Shopify built an abstraction layer they call the 'payment gateway runtime' - a sandboxed WebAssembly module that runs on the edge node for each gateway. So when a merchant uses Stripe or PayPal or a local Brazilian bank, the corresponding Wasm module is loaded on the edge node.

That module contains the validation logic, not the full gateway SDK, which keeps the footprint small. Luna: WebAssembly on the edge - that's interesting. Wasm is usually associated with compute-heavy tasks, not payment validation. Lucas: Right, but the team found that Wasm gave them deterministic, sandboxed execution with near-native speed.

And because the modules are small - typically under one hundred kilobytes - they can be loaded on the edge node in milliseconds. It also helps with PCI compliance, because the actual card data never touches the edge node. The Wasm module only sees tokenized payment information. Luna: So the edge node never sees raw credit card numbers?

That's a smart way to reduce the compliance scope. Lucas: Exactly. Shopify's PCI scope is now limited to the payment gateway runtime and the connection to the processor. The rest of the checkout is considered out-of-scope because it never handles sensitive data.

Luna: I want to talk about the one-click experience. How does that work technically? Is it storing payment tokens in a cookie? Lucas: It's more sophisticated than that.

Shopify introduced what they call 'express checkout tokens' - encrypted payloads that contain the customer's shipping address, payment method token, and a timestamp. These tokens are stored securely - not in cookies, but in a dedicated key-value store that's replicated across edge nodes. When a returning customer clicks 'buy', the edge node retrieves the token, decrypts it, validates it hasn't expired, and then precomputes the entire checkout page. Luna: And the token is tied to the device or the account?

Lucas: Both. The token is bound to the customer's account ID and a device fingerprint. So if someone tries to use the token from a different device, it's rejected and the user has to re-authenticate. That adds a layer of security without adding friction for the legitimate user.

Luna: I can see how this would dramatically cut down on cart abandonment. Do they have numbers on how much conversion improved? Lucas: Yeah, in their internal A/B tests, the new checkout lifted completed purchases by six point two percent. That's across all merchants.

For mobile users, the lift was even higher - around nine percent. And for merchants who adopted the one-click flow, the average checkout time dropped to under two seconds. Luna: Those are big numbers. But I imagine not every merchant could use the one-click flow right away - some have custom checkout logic, like subscription products or complex shipping rules.

Lucas: That's the challenge. Shopify's approach was to make the new checkout the default for all new stores, but give existing merchants a migration path. They built a compatibility checker that scans the merchant's checkout customizations and flags any that aren't supported by the new architecture. Things like custom JavaScript injections that modify the DOM - those break because the checkout is now served from the edge and rendered statically.

Luna: So merchants who had heavily customized their checkout with third-party apps had to rewrite those integrations? Lucas: In many cases, yes. Shopify worked with the top app developers to update their apps to use the new checkout APIs. But for long-tail customizations, the merchant had to either remove them or work with a developer.

That was contentious for some, but the trade-off was a dramatically faster experience for everyone - and higher conversion. Luna: I'm curious about the edge infrastructure. How many nodes are we talking about, and what kind of compute do they run? Lucas: Shopify uses a combination of their own edge nodes and a CDN partner.

They have about two hundred points of presence globally. Each node runs a lightweight JavaScript runtime - similar to what you'd see with Cloudflare Workers or Fastly Compute@Edge. The checkout runtime is about two megabytes of JavaScript, which is preloaded on every node. For the payment gateway modules, those are loaded on-demand.

Luna: Two megabytes is quite lean for something that handles taxes, shipping, and coupons across a hundred countries. How do they keep the codebase small? Lucas: They wrote the runtime from scratch - it's not a framework. The team stripped away everything not essential to the checkout flow.

No React, no Vue, just vanilla JavaScript with a small state-management library they built in-house. The entire checkout logic is expressed as a set of pure functions that take the checkout state and return a new state. That makes it easy to test and also easy to run on the edge. Luna: And the state - that's not persisted on the edge, right?

So if a user refreshes the page, they don't lose their cart? Lucas: Right - the checkout state is stored in a fast key-value store that the edge node can access. When the page loads, the edge node retrieves the state from the store, recomputes any dynamic values like shipping rates, and renders the page. The store is globally replicated, so even if the user moves to a different edge node, the state is there.

Luna: This is a great example of rethinking a fundamental user experience from the ground up. But it also required a huge engineering investment - how many people were on the team? Lucas: About sixty engineers over eighteen months. That includes the edge runtime team, the payment gateway abstraction team, the security team for PCI compliance, and the migration team that worked with merchants.

It was a major initiative, but the ROI in terms of conversion lift probably paid for itself within a few months. Luna: It's worth noting that this is the kind of deep tech work that often goes unnoticed by end users - they just see a faster checkout. But for operators and builders, understanding how they pulled it off is really valuable. Lucas: Absolutely.

And that's exactly the kind of conversation we like to have on this show - where operators and builders can learn from each other. If these deep dives are useful for what you're building or running, that's the whole point. We keep the show ad-free because we believe the content should stand on its own, not be interrupted by sponsorships. If you'd like to support that choice, you can find us at buy me a coffee dot com slash fexingo.

Luna: Yeah, it's a small way to keep the conversations focused on the architecture and the trade-offs, not on selling something. And we really appreciate the listeners who chip in. Lucas: Alright, back to the checkout. One more thing I want to touch on is how they handled the fallback for merchants with complex customizations.

They built a 'compatibility mode' that runs the old server-side checkout, but that's clearly not ideal because it's slow. So they're actively working on expanding the express checkout APIs to cover more use cases. Luna: So the migration is still ongoing? It's not like everyone is on the new checkout yet.

Lucas: No, as of mid-2026, about seventy percent of Shopify merchants have been migrated. The remaining thirty percent are either on the compatibility mode or have custom setups that the team is still building support for. The goal is to get to ninety-five percent by the end of the year. Luna: That's a realistic target.

It's a good reminder that even with a great architecture, migration at scale takes time and careful coordination. Lucas: Exactly. The technology is only half the story - the other half is how you roll it out without breaking your merchants' businesses. Shopify did a phased rollout, starting with a small percentage of traffic, then gradually increasing as they found and fixed edge cases.

Luna: So what's next? Any hints about what they're working on for the checkout in 2027? Lucas: A couple of things. They're exploring using WebGPU on the edge to accelerate tax calculations, which are surprisingly compute-intensive.

And they're looking at integrating biometric authentication - like Face ID or fingerprint - directly into the one-click flow, so returning customers don't even need to enter a password. Luna: That would be next-level frictionless. Imagine just opening the app, glancing at your phone, and the payment goes through. Lucas: Right.

That's the direction. But for now, the four-second checkout is already a massive leap from where they were. And it's a great case study in how rethinking the architecture - not just optimizing the front end - can have a direct impact on revenue.