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

# Booking checkout

# Checkout

Secure payment processing where guests complete their booking with personal details and payment information.

<Note>
  💳 **Step 2 of 3** | **Component:** `<checkout>` | **URL:** `/booking-checkout`
</Note>

## What Guests Complete

<CardGroup cols={3}>
  <Card title="Guest Details" icon="id-card" color="#0ea5e9">
    Name, email, phone, and special requests
  </Card>

  <Card title="Payment Info" icon="credit-card" color="#10b981">
    Secure card processing with multiple options
  </Card>

  <Card title="Booking Summary" icon="receipt" color="#8b5cf6">
    Final price breakdown and policies
  </Card>
</CardGroup>

## Basic Implementation

```html theme={null}
<div data-mirai-component="checkout"></div>
```

## Complete Page Template

<Accordion title="View full HTML template">
  ```html theme={null}
  <!DOCTYPE html>
  <html>
  <head>
      <title>Complete Your Booking</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="robots" content="noindex, nofollow" />
      <link rel="stylesheet" href="https://static.mirai.com/core/index.css" type="text/css" media="all" />
  </head>
  <body>
      <div data-mirai-id="YOUR_HOTEL_ID"></div>
      <div data-mirai-component="checkout"></div>
      <script type="module" defer src="https://static.mirai.com/core/index.js" 
              data-cookieconsent="necessary"></script>
  </body>
  </html>
  ```
</Accordion>

<Warning>
  ⚠️ **Important:** Use this component on a dedicated page without additional content. Adding navigation bars or widgets may interrupt the booking experience.
</Warning>

## Page Requirements

| Requirement | Value               | Purpose                     |
| ----------- | ------------------- | --------------------------- |
| URL         | `/booking-checkout` | Standard booking flow URL   |
| Meta robots | `noindex, nofollow` | Prevent search indexing     |
| SSL         | Required            | Secure payment processing   |
| Component   | `<checkout>` only   | Focused checkout experience |

## Security Features

<Tabs>
  <Tab title="PCI Compliance">
    Payment processing meets PCI DSS standards with tokenized card handling
  </Tab>

  <Tab title="Data Protection">
    Guest information encrypted and processed according to GDPR requirements
  </Tab>
</Tabs>

***

<Info>
  **Next Step →** [View Confirmation](/booking-process/booking-confirmation)
</Info>
