> ## Documentation Index
> Fetch the complete documentation index at: https://cal.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom booking flow

> 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](/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](/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](/api-reference/v2/bookings/create-a-booking) endpoint to actually create the booking.