Skip to main content

​
Checkout

Secure payment processing where guests complete their booking with personal details and payment information.
💳 Step 2 of 3 | Component: <checkout> | URL: /booking-checkout

​
What Guests Complete

Guest Details

Name, email, phone, and special requests

Payment Info

Secure card processing with multiple options

Booking Summary

Final price breakdown and policies

​
Basic Implementation

<div data-mirai-component="checkout"></div>

​
Complete Page Template

<!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>
⚠️ Important: Use this component on a dedicated page without additional content. Adding navigation bars or widgets may interrupt the booking experience.

​
Page Requirements

RequirementValuePurpose
URL/booking-checkoutStandard booking flow URL
Meta robotsnoindex, nofollowPrevent search indexing
SSLRequiredSecure payment processing
Component<checkout> onlyFocused checkout experience

​
Security Features

  • PCI Compliance
  • Data Protection
Payment processing meets PCI DSS standards with tokenized card handling
Next Step → View Confirmation
⌘I