Stripe × Xero
Helping launch Stripe Apps with a real, working integration between Xero and Stripe.
Tech stack
- React
- Ruby on Rails
- Postgres
- Redis
- Stripe Apps SDK
Collaborators
We partnered with Stripe and Xero to design and build one of the first apps on the Stripe Apps platform. The result was an embedded finance experience that unified invoice and cashflow data inside the Stripe Dashboard.
Alongside our engineering work, our design studio XXIX developed the brand identity for Stripe Apps itself, helping seed the ecosystem and shape its launch.
Project overview
- 1.
As one of the first developers brought in to build a Stripe App, we helped define what was possible for the platform, collaborating closely with Stripe and Xero to launch a real, working example.
- 2.
We designed and engineered a contextual UI integration that lets Stripe users view Xero invoice and cash flow data directly inside the Stripe Dashboard.
- 3.
With a brand-new SDK evolving at the same time, we built a flexible, performant Rails + React app, expanding the Stripe Apps SDK in its earliest phase.
Seeding the Ecosystem
Stripe brought us in at the very beginning of its Stripe Apps initiative to build one of the first apps in the ecosystem and set the bar for user experience. We partnered with Stripe and Xero to concept, design, and implement an app that would integrate Xero financial data directly into Stripe’s user dashboard.
At the same time, our sister studio XXIX developed the brand identity and launch visuals for Stripe Apps itself, contributing to a cohesive story across both platform and product.
An Embedded Finance Experience
The Xero app for Stripe provides users with a unified view of invoices and cash flow, bridging two critical pieces of the finance stack without forcing users to toggle platforms.
Stripe users can view relevant Xero transaction data, such as outstanding invoices, from directly within the Stripe Dashboard. This allows them to understand their cash position and receivables at a glance. By embedding this functionality contextually, the app minimizes the need for users to switch between Stripe and their accounting software.
We worked closely with Xero to ensure data was displayed clearly, securely, and contextually. The interface needed to feel native to the Stripe Dashboard but remain consistent with Xero’s patterns: a delicate balance we achieved through thoughtful product design and UI integration.
Engineering Through Ambiguity
Stripe Apps was a moving target when we began development. The SDK was still evolving, and best practices were being shaped in real time. Our team was among the first to implement real, working apps, and we helped surface critical implementation feedback as the platform matured.
To keep the build nimble and resilient, we engineered the app using Ruby on Rails for backend logic, Postgres and Redis for data storage and caching, React for frontend UI components, and Stripe Apps SDK as the integration layer.
Over the course of development, we adapted to shifting SDK capabilities, at one point even replacing a server-based integration with a lighter SDK-native approach. Our flexibility ensured we could deliver a stable, performant product without waiting for the platform to settle.
Today, Stripe Apps has grown into a robust ecosystem, with hundreds of integrations enhancing the Stripe Dashboard experience.
Our work on the Xero app helped lay that foundation, streamlining Stripe’s Auto Pay system and simplifying life for thousands of business owners and accountants.