Monite · Mar 2021 – Aug 2024 · Desktop

Payment gateway

I designed several versions of Monite's payment page — one layout that adapts to multiple payment processors, many payment methods and different screen sizes, and that partners can brand as their own.

The problem

Monite’s partners needed one payment page their clients could use to pay invoices — whichever payment processor was behind it and whichever method the payer preferred.

Challenges

  • Flexible layout. It had to fit everything from cards and ACH bank transfers to BNPL and digital wallets, from several processors.
  • Customisable. Partners had to be able to integrate it seamlessly into their own platforms.
  • Trustworthy. Online payments are sensitive: the page has to feel clear and comfortable, and it has to look safe.
Figma board with the payment page variants

The payer’s side

Invoice summary with a choice of payment methods
Paying by card
Choosing a bank for a bank transferChoosing an authentication method
Authorising the transaction with an SMS code
Payment states: initiated, successful, postponed, cancelled and failed

Paying bills in bulk

Review and pay several bills in one go
Choosing how each vendor receives the funds
Payment options per invoice: bank transfer or paper check, with fees and timing
Bulk payment flow across steps