Checkout is the classic pattern when dealing with online clients orders. This generic version offers Finastra branding and a four steps process. It ensures a good customer experience from order to confirmation.


checkout preview


To make the checkout experience fast and intuitive, we divided it in four steps:

  1. Order review
    order review screen

    This first step typically includes a navigation, stepper, tables and buttons.

  2. Billing form
    billing form screen

    In the billing step you'll use navigation, stepper and text input.

  3. Payment
    payment screen

    Payment screen allows the customer to choose his preferred method of payment. It's a form containing mostly inputs.

  4. Confirmation
    confirmation screen

    Last step confirms that the order was placed. It closes the checkout process. An illustration comfort the customer that payment was processed as expected.


Checkout layout is based on a 12 columns grid. You can start using a similar layout if you need to create more steps or customize your checkout experience.

checkout layout Download starter kit