Flutterwave Checkout v3 Case Study

I worked on Flutterwave Checkout v3 to improve the card payment experience by making important checkout states more visible and providing users with immediate feedback while completing their payments.

The work focused on two areas of the checkout flow: session timeout handling and real-time card validation.

Checkout sessions are valid for 15 minutes. Previously, the session timeout was handled in the background, and once the 15-minute window elapsed, the checkout was replaced by a full-screen session timeout state.

While this correctly prevented an expired session from continuing, users had no visibility into how much time remained on their session while completing their payment. This created an opportunity to make the session lifecycle more transparent and give users an indication of the time available to complete their transaction.

Card validation also happened later in the payment flow. A user could enter an incomplete or invalid card number and would only discover the problem after clicking the Pay button. This meant that errors which could be identified while the user was entering their details were only surfaced when they attempted to submit the payment.

I introduced a real-time session countdown banner that displays the remaining time on the checkout session.

The countdown runs throughout the 15-minute session, giving users a clear indication of how much time they have left to complete their payment. When the session expires, the countdown is replaced with a "Your session has expired" banner.

Once the session has expired, payment transactions can no longer be processed against that session. This ensures that the UI clearly reflects the state of the underlying payment session.

The change also introduced a more visible session lifecycle: instead of users only discovering that their session had expired after the fact, they could see the remaining time throughout the checkout process.

I improved the card input experience by introducing client-side validation for card details.

Previously, users could enter an incomplete or invalid card number, CVV, or expiry date and only receive feedback after attempting to make a payment.

I implemented real-time validation so the checkout could provide feedback while users were entering their details. Card numbers are validated using the Luhn algorithm, while the card number, CVV, and expiry fields are checked for valid and complete input.

This allows users to identify and correct card-detail errors before submitting the payment rather than discovering them only after clicking Pay.

I added and updated unit tests around the session timeout and card validation logic to cover the different states and edge cases introduced by the changes.

For the session lifecycle, this included testing the countdown behaviour, session expiry, and the behaviour of the checkout once a session was no longer valid.

For card validation, the tests covered valid and invalid card numbers, Luhn validation, incomplete input, CVV and expiry validation, and the different validation states presented to the user.

This helped ensure that the new behaviour remained predictable and that future changes to the checkout logic would not unintentionally break the payment flow.

The session countdown was introduced based on a product hypothesis: giving users a visible indication of the remaining session time could encourage them to complete their payments more quickly.

Following the introduction of the countdown, we began tracking payment success rate to measure its impact on the checkout experience.

This gave us a measurable way to evaluate the effect of the change rather than relying solely on user feedback or assumptions about the new experience.

The changes made Checkout v3 more transparent and responsive during card payments.

Users can now see how much time remains in their payment session and receive immediate feedback when their card details are incomplete or invalid. At the same time, the payment flow continues to enforce the 15-minute session lifecycle and prevents transactions from being processed against expired sessions.