Optimizing payment interfaces

Mondu is Europe's leading B2B Buy Now Pay Later (BNPL) payments platform for sellers & buyers. Upon integeration, businesses will be able to offer Buy Now Pay Later options to its customers via their website.

Mondu was embeddable as a payment option on the checkout page of the business and upon selection, customers were taken to either of Mondu's payment interfaces - The Widget or The Hosted Checkout.

Mondu's payments needed the following details from the customer making the purchase:

The payment widget was initially the default way of paying, in an modal with limited screen space. And then we worked on launching the Hosted Checkout interface. We kept improving on the Hosted Checkout page, because there was a lot of conversion opportunities for the screen space that the interface provided.

Similar to Klarna's Hosted Payment Page, Mondu's Hosted Checkout Page was introduced to provide an even more personalized payment experience.

Unlike the widget, the Hosted Checkout Page loads in a new tab. We used modals to gather missing details from the customer. For this, we reused components from Mondu's checkout widget while tweaking it as required for the Hosted page.

The Hosted Checkout page is also very mobile-friendly and it works much better than the widget on smaller screens. The team also constantly monitors the usage, time spent, etc. via PostHog recordings.

The Mondu BNPL checkout flow is a modal triggered inside the Merchant/Seller's website. The buyer goes through a flow where they provide more information about them and their business. After a credit/risk check, the order is successfully placed.

The widget being the primary offering of Mondu, was always analysed and improved by the Payments team. Along with the researcher and product manager, I created multiple improvements to the widget over time to improve user experience and enable a smoother payment process.

Apart from monitoring the payment integration interfaces I also worked on some explorations that allowed for more space and better structure. Below is one example mimicking Klarna's payment modal.

Payment infrasctructure needs constant care and has to be optimized for conversion. In B2B payments, edge cases need to be accounted for as well, because the stakes are high with business payments. There needs to be a lot of trust because the order volumes and amounts are higher than B2C payments.

As a part of our ongoing optimizations, my PM Giulia and I created many iterations such as adding modal shadows so that the user never misses something hidden under a scroll, and exit surveys on clicking close or cancel.