> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Bookings Quick Start

## Article: Bookings Quick Start

## Article Link: https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/bookings-quick-start.md

## Article Content:

# Bookings Quick Start

The SDK `bookings` module allows you to take advantage of Wix Bookings business services in a site or app you build on any platform. This means you can allow your clients to book and pay for services online.
This tutorial shows you how to use the `bookings` module to create a flow where a visitor can select a service from your Wix Bookings service list, pick an available time slot, and check out.

> **Note:** If you're using the [Wix CLI](https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/about-the-wix-cli-for-headless.md), you don't need to handle OAuth setup or create a client because it's done automatically. 

The tutorial is based on this [example site](https://wix-headless-example.vercel.app/booking). To get the code, fork the [Headless Templates repo](https://github.com/wix/headless-templates). The site code is under [minimal examples](https://github.com/wix/headless-templates/tree/main/nextjs/minimal-examples).

This implementation focuses on simplicity and understandability, rather than feature richness, performance, or completeness. For details about additional functionality, see [Wix Bookings](https://dev.wix.com/docs/api-reference/business-solutions/bookings/services/introduction.md) in the API Reference.

Looking for a more comprehensive example site integrating Wix Headless APIs for bookings management? Check out our [starter templates](https://dev.wix.com/docs/go-headless/get-started/templates/self-managed-templates/next-js-templates.md).

> **Note:** The code in this tutorial is written in [JSX](https://react.dev/learn/writing-markup-with-jsx), but you can use the SDK in any JavaScript environment.

Implementing the booking flow includes the following steps:

1. Set up the Wix Headless environment.
1. Import the SDK modules and create an SDK client.
1. Create your services.
1. Fetch your services and available slots.
1. Implement checkout.
1. Display the UI.

## Step 1: Set up the Wix Headless environment

Before using the SDK, there are a few things you need to set up on your Wix account and in your external site or app's coding environment.

To set up the Wix Headless environment, follow these steps:

1. If you haven't already, [create a project](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/create-a-project.md).
   When prompted to add functionalities to your new project, select **Bookings**.
1. Set up authorization for your site by [creating and configuring](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/about-authentication.md) an OAuth app.
1. Set a [domain to be used by Wix-managed pages](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/set-a-wix-pages-domain.md).
1. Set a [domain that Wix can redirect to](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/add-allowed-redirect-domains.md) after completing a Wix-managed process.
1. Install the API client and relevant SDK module packages by running the following commands:
   For NPM:

   ```
   npm install @wix/sdk
   npm install @wix/bookings
   npm install @wix/redirects
   ```

   For Yarn:

   ```
   yarn add @wix/sdk
   yarn add @wix/bookings
   yarn add @wix/redirects
   ```

1. Install the `react` package to handle UI rendering and the `js-cookie` package to handle session cookies. Run the following commands:
   For NPM:
   ```
   npm install react
   npm install js-cookie
   ```
   For Yarn:
   ```
   yarn add react
   yarn add js-cookie
   ```

## Step 2: Import the SDK modules and create an SDK client

The next step is to set up your code file to run the SDK functions. To set up the code file, follow these steps:

1. Add the following import statements to the top of your code file:
   ```javascript
   import Cookies from 'js-cookie';
   import { useEffect, useState } from 'react';
   import { createClient, OAuthStrategy } from '@wix/sdk';
   import { availabilityCalendar, services } from '@wix/bookings';
   import { redirects } from '@wix/redirects';
   ```
2. Create an SDK client by adding the following code to your code file. Replace the value for `clientId` with your OAuth app's client ID. You can find the ID in your project's [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings).
   The value for `tokens` is the `'session'` cookie on the site visitor's browser. It's used to make calls to the Wix API. This way, you can maintain previous visitor sessions. For information about managing session cookies, see [Session Token Management](https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/quick-start.md).
   ```js
   const myWixClient = createClient({
      modules: { services, availabilityCalendar, redirects },
      auth: OAuthStrategy({
        clientId: `<YOUR-CLIENT-ID>`,
        tokens: JSON.parse(Cookies.get('session') || '{"accessToken": {}, "refreshToken": {}}')
    })
   });
   ```

## Step 3: Create your services

Create the [services](https://support.wix.com/en/article/creating-the-right-booking-service-for-your-business) your visitors will book. It's important to also define your [bookings forms](https://support.wix.com/en/article/wix-bookings-creating-and-setting-up-your-booking-forms).

## Step 4: Fetch your services and available slots

Define functions to fetch your Wix Bookings services and availability.
These functions use the [`queryServices()`](https://dev.wix.com/docs/api-reference/business-solutions/bookings/services/services-v2/query-services.md) function to find the services and the [`queryAvailability()`](https://dev.wix.com/docs/api-reference/business-solutions/bookings/time-slots/availability-calendar/query-availability.md) function to find the available slots for a given service and date.

1. Fetch your Wix Bookings services.
   Use the `useEffect` hook to make sure this code runs after the component is rendered. This ensure that your bookings data is available when the component mounts.

```js
async function fetchServices() {
  const serviceList = await myWixClient.services.queryServices({});
  setServiceList(serviceList.items);
}

useEffect(() => {
  fetchServices();
}, []);
```

2. Fetch the service's related slots:

```js
async function fetchAvailability(service) {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);

  const availability = await myWixClient.availabilityCalendar.queryAvailability(
    {
      filter: {
        serviceId: [service._id],
        startDate: today.toISOString(),
        endDate: tomorrow.toISOString(),
      },
    },
    { timezone: 'UTC' }
  );
  setAvailabilityEntries(availability.availabilityEntries);
}
```

**Note:** Start and end dates are ISO formatted objects.

## Step 5: Implement checkout

Once a slot is selected, the visitor can initiate Wix’s secure checkout and complete the booking process.

Define a function called `createRedirect()` that's called when the checkout button in your UI is clicked. The function uses the [`createRedirectSession()`](https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md) to create a checkout URL for a given bookings slot. The visitor is then redirected to the checkout URL to complete the checkout. A visitor can choose to log in to your site or app during the Wix checkout process.

**Note:** When redirecting from Wix to an external site, Wix validates that the provided URL is registered under an allowed domain for the given client ID. Therefore, you must [add your domain to the OAuth app](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/add-allowed-redirect-domains.md).

```js
async function createRedirect(slotAvailability) {
  const redirect = await myWixClient.redirects.createRedirectSession({
    bookingsCheckout: { slotAvailability, timezone: 'UTC' },
    callbacks: { postFlowUrl: window.location.href },
  });
  window.location = redirect.redirectSession.fullUrl;
}
```

## Step 6: Display the UI

Create a dynamic services list page and connect the elements on your site or app to the relevant fields from your Wix Bookings services.

Use each services's slug or service ID as an identifier and present more information related to each service, such as its name.

1. The example below uses ID for simplicity, but it's common practice to create friendly urls, using the `service.mainSlug.name` value instead of service ID:

```tsx
<div>
  <h2>Choose Service:</h2>
    {serviceList.map((service) => {
      return <div key={service._id} onClick={() => fetchAvailability(service)}>{service.name}</div>;
    }
</div>
```

2. Display the slots on a calendar, given a date range, for the selected service:

```tsx
<div>
  <h2>Choose Slot:</h2>
  {availabilityEntries.map((entry) => {
    return <div key={entry.slot.startDate} onClick={() => createRedirect(entry)}>{entry.slot.startDate}</div>;
  }
</div>
```

## Complete code example

You can use the following full code example as a starting point for developing your own site:

```js

import { useEffect, useState } from 'react';

import { createClient, OAuthStrategy } from '@wix/sdk';
import { availabilityCalendar, services } from '@wix/bookings';
import { redirects } from '@wix/redirects';

const myWixClient = createClient({
    modules: { services, availabilityCalendar, redirects },
    auth: OAuthStrategy({
      clientId: `<YOUR-CLIENT-ID>`,
      tokens: JSON.parse(Cookies.get('session') || '{"accessToken": {}, "refreshToken": {}}')
  })
});

export default function Booking() {
  const [serviceList, setServiceList] = useState([]);
  const [availabilityEntries, setAvailabilityEntries] = useState([]);

  async function fetchServices() {
    const serviceList = await myWixClient.services.queryServices({});
    setServiceList(serviceList.items);
  }

  async function fetchAvailability(service) {
    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);

    const availability = await myWixClient.availabilityCalendar.queryAvailability({
      filter: { serviceId: [service._id], startDate: today.toISOString(), endDate: tomorrow.toISOString() }
    }, { timezone: 'UTC' });
    setAvailabilityEntries(availability.availabilityEntries);
  }

  async function createRedirect(slotAvailability) {
    const redirect = await myWixClient.redirects.createRedirectSession({
      bookingsCheckout: { slotAvailability, timezone: 'UTC' },
      callbacks: { postFlowUrl: window.location.href }
    });
    window.location = redirect.redirectSession.fullUrl;
  }

  useEffect(() => { fetchServices(); }, []);

  return (
    <>
      <div>
        <h2>Choose Service:</h2>
        {serviceList.map((service) => {
          return (
            <div key={service._id} onClick={() => fetchAvailability(service)}>
              {service.name}
            </div>
          );
        })}
      </div>
      <div>
        <h2>Choose Slot:</h2>
        {availabilityEntries.map((entry) => {
          return (
            <div
              key={entry.slot.startDate}
              onClick={() => createRedirect(entry)}
            >
              {entry.slot.startDate}
            </div>
          );
        })}
      </div>
    </>
  );
}
```