---
title: Custom booking flow
description: Learn how to intercept a booking to introduce your custom flow and then submit the booking.
---

If you want to have a custom payment flow or any other custom action before the booking happens, you can intercept the booking
once the user clicks book in the [Booker atom](https://cal.com/docs/platform/atoms/booker), run whatever custom code you need and then finally
submit the booking with the intercepted booking data.

In your component that renders the Booker atom create a `interceptBooking` function that will be passed to the Booker atom `handleCreateBooking` hook. See [Booker atom](https://cal.com/docs/platform/atoms/booker) docs on how to use it - in this tutorial
we focus on the `handleCreateBooking` hook.

```
import { Booker, UseCreateBookingInput } from "@calcom/atoms";


export function BookingPage(props: { calUsername: string; calEmail: string }) {
    ...
    const interceptBooking = useCallback((data: UseCreateBookingInput) => {
        console.log(data);
    }, []);
  
  return (
    <Booker
        handleCreateBooking={interceptBooking}
        ...
    />
  );
}
```

1. When user clicks "Book" in the Booker atom the booking will not happen. Instead, the `interceptBooking` function will be called and will receive all the booking data.
2. Then, you can hide the Booker component and instead render another component, show a modal, redirect to a new page or whatever you want to do.
3. After your custom action is finished, extract the necessary information from the booking data passed to `interceptBooking` and make a POST request to
[create booking](https://cal.com/docs/api-reference/v2/bookings/create-a-booking) endpoint to actually create the booking.