Designing a checkout experience that never pulls customers away from the store
2024
Payphone
Services
UX Strategy
Design Systems
Interaction Design
Client
Payphone
Location
Ecuador
Year
2024
Cajita de Pago is Payphone's embedded payment gateway for ecommerce — a checkout widget that lives natively inside a merchant's online store without redirecting customers to an external page. It integrates with WooCommerce and PrestaShop through a plugin designed for developers who need to add payment processing without building custom infrastructure. I designed the full checkout experience: the widget itself, the customization system that lets merchants apply their own brand colors, and the plugin interface that developers use to configure and deploy it. The goal was to make payment acceptance feel like a natural extension of any store, not a third-party interruption.
The standard pattern for online payments in Ecuador was a redirect — the customer clicks pay, leaves the store, completes the transaction on an external page, and returns. Every redirect is a moment where the customer can leave and not come back. Every redirect also strips the brand experience from the most important moment in the purchase journey. Merchants on Payphone Business were asking for something different. They wanted their customers to pay inside their store, with their colors, their fonts, their identity. They also wanted a solution that their developers could implement in hours, not weeks. The tension was real: the more customizable the widget, the more complex the configuration. The simpler the developer experience, the less control merchants had over the visual output. Finding the right balance between flexibility and simplicity was the core design problem.
I started by talking to two different users — merchants and developers — because their needs pulled in opposite directions. Merchants cared about brand consistency and conversion. Developers cared about implementation speed and documentation clarity. A solution that served one without serving the other would fail in the market regardless of how well it was designed. For the widget itself, I kept the checkout structure as close to convention as possible — card number, expiry, CVV, pay button — because familiarity reduces hesitation at the moment of payment. The customization layer sat on top of that structure: primary color, background, and button style, controlled through a configuration panel in Payphone Business. Enough flexibility to feel branded, not enough rope to break the experience. For the plugin, I worked closely with the development team to define what configuration should happen in code versus what should happen in the Payphone Business dashboard. The goal was to reduce the decisions a developer had to make at integration time to as few as possible. A developer who can get from installation to first successful transaction in under an hour is a developer who recommends the product to the next developer.
Cajita de Pago became the primary checkout solution for Payphone Business merchants on WooCommerce and PrestaShop. The platform reached 20,000 business users with a 17 percent recurring usage rate — which in a B2B context indicates that merchants were actively processing transactions, not just trying the product. The most important outcome was not a number. It was seeing the widget live on real Ecuadorian ecommerce stores with their own colors, their own branding, their own identity — and Payphone invisible in the background doing its job. That is what good embedded infrastructure looks like. Looking back, the customization system could have gone further. Merchants wanted more control over typography and layout than we gave them in the initial release. We scoped it conservatively to ship on time, which was the right call then. It is something I would revisit earlier in a second version.
