How to receive payment for the booking before creation of the booking.

Short answer to this question, it does not possible. But you can configure auto cancellation of unpaid bookings, and auto approving of paid bookings during specific times.

Booking is created before payment process in any case. You need to activate the auto approve / cancel bookings at the Booking > Settings > Payment page in Stripe or PayPal section, etc..

Also you can activate auto cancellation of pending bookings that have no successfully paid status after a specific amount of time. You can activate this option at the Booking > Settings General page in the "Auto cancellation / approving" section.

It means that if the booking is not approved, and does not have the successfully paid status, this booking can be auto canceled after a specific amount of time.

Or you can even activate to show the "Pending bookings as available dates" - you can activate this option at the Booking > Settings General page in Advanced section.

Important info about payment status and auto-cancellation of bookings.
But you need to be sure that all "good" bookings have to be approved or have successfully paid status.

Because if you are using the PayPal standard integration and your visitors make the payment for the booking, but do not click on the "return link" on PayPal site to your site, so Booking Calendar does not know that the payment is successful, and this booking can be auto canceled with that feature.
Stripe has to auto redirect to booking page automatically.

So sometimes it's possible that the successfully paid bookings will not have this status and that's why it can be auto-canceled, if you do not approve them.

Ideally (for PayPal) you will need to activate and correctly configure the PayPal IPN system, at the Booking > Settings > Payment page and in the PayPal account. So in this case the PayPal has to send the messages directly to your booking system.

When auto cancellation starts work ?

The Auto cancellation starts work when someone opens the front end side of your website. Please open the page with your booking form, and then check your booking at the Booking Listing page, relative Auto cancellation.
Also please recheck your timezone configuration at the WordPress > Settings General page. It can be an issue relative to the not right time of auto-cancellation.

So please note, auto-cancellation can execute every 1 hour (or other period), if you have configured CRON at your website or if some visitor has visited your website, and cancellation time exceeds that specific "auto cancellation " time duration from last cancellation .

If nobody visit website during "1 hour" (or other period of time), so system just does not start script for initializing checking about (auto cancellation, etc... ) some bookings. In this case, you need to configure CRON script at your server. Please check more about configuration of CRON.

In pure WordPress system it working with pseudo-cron functionality:

WordPress Cron is what many people refer to as a “pseudo-cron system.” The difference is in how UNIX cron and WordPress Cron take action. A typical UNIX cron system runs in this order:
- A time tied to an action occurs.
- Cron runs the action tied to that time.

With WordPress Cron, it works a little differently:

- A visitor comes to any page on your WordPress website.
- WordPress Cron checks each cron event to see whether the scheduled time has passed.
- If the scheduled time for that event has passed, then WordPress Cron executes any actions tied to that event.