Pay by Bank

Technology

Apple Pay and Google Pay both ship as Web Components — open web standards, drop-in install, self-contained so they don’t tangle with the merchant’s own code. Banked’s checkout embeds already used Web Components, which made the choice obvious.

I built the button in React with a styling engine that compiled the same source to three targets. React served the web and native mobile apps, and lightweight Web Components, via Preact, covered any site not built on React.

One codebase, three integration paths at launch, and no forks or complex multi-repository setups to maintain.

The design ran in parallel. Working with Francis O Donnell Smith, Banked’s lead designer, I helped formalise a series of design system tokens. This was used first on the button itself and later adopted across the rest of Banked’s products.

Guidelines

A button component library on its own isn’t enough. Merchants need to see it working in context and have documentation on integration. I built an e-commerce demo store that showed the different integration approaches, each with its own shareable link so the sales teams could send a merchant straight to the variant relevant to them.

I wrapped a guideline site around the demo store, walking through the checkout step by step. As the user moved through the flow, the page overlaid the implementation notes for that moment. Merchants could then see the button’s behaviour in a real checkout flow and read the integration detail exactly where it applied.

Generator

I also added an interactive asset generator. Merchants can pick from the 106 possible variations of the core components, watch the button update in real time as they tweak appearance and state for their specific use case, and then copy a code snippet ready to paste directly into their site.

The snippet itself is self-documenting. Every component property is named in the generated markup, so the developer pulling it in can read exactly what the button supports without having to refer back to the documentation.