Building a Direct-Booking Platform for a Vacation Rental

Not leaving it all to OTAs: the full picture of an official site where search-to-payment completes in one flow

vacation rentaldirect bookingbooking sitewhole-house rentalNext.js
6 min read

Introduction

When people start a vacation rental, most of them register on booking platforms like Airbnb (OTAs) and call it a day. OTAs really are a powerful way to fill your calendar. But their commission can eat 10-20% of your revenue, and every conversation with your guests is locked inside the OTA's messaging system.

In this article, we walk through the full picture of a direct-booking platform on the property's own official site, built for a private rental villa in Japan's Seto Inland Sea area. This is not just a pretty brochure site: everything from availability search to payment to post-stay support happens inside the official site.

Building a place where booking actually completes, not a brochure

Mapping out what a direct-booking site really needs

To let people complete a booking on your own site, you have to line up the machinery behind the scenes before you worry about how it looks. Once we sorted it out, it came down to five building blocks.

Overall structure of the direct-booking platform
Official site (Next.js)

Property intro, availability search, booking form, blog, area guide

Query inventory & rates / register bookings
Booking management system (Beds24)

Source of truth for inventory, rates, and reservations. Also connected to OTAs

Payments (Stripe)

Card registration plus automatic charging on a later date

After the booking is confirmed
Guest-only portal

Entry instructions, house guide, AI assistant

Email notifications (Resend)

Booking confirmations, payment receipts, alerts for the operator

The key point is that the official site itself holds no inventory. The single source of truth for availability and pricing lives in the booking management system, and the site always goes there to ask. That division of labor is what keeps things consistent even while selling the same nights through OTAs.

Designing on the assumption that OTAs stay in the picture

Building a direct-booking site doesn't mean walking away from OTAs. And once you sell the same room on both, the thing that keeps you up at night is double bookings.

So we put Beds24 — a booking management system (channel manager) that both the OTAs and our own site connect to — at the center. A booking made on an OTA immediately shows up as unavailable on our own site, and a booking made on our site is deducted from OTA inventory through Beds24. We go deeper into this in "Syncing your own site with a booking management system (Beds24)."

Designing payments the way hospitality actually works

Unlike e-commerce, a stay isn't something you buy today and receive today. You accept bookings up to nearly a year out, and everything has to line up with your cancellation policy.

For this project we settled on: register the card at booking time without charging it, then charge automatically 14 days before check-in, the point where cancellation fees kick in. It lowers the barrier to booking while limiting the risk of no-shows — a comfortable middle ground for hospitality. We dig into the details in the "Stripe payment design for stay bookings" series.

Designing the experience before and after the booking

Before booking — search and page structure that never leave people guessing

We put a booking card with a date picker right where people land on the home page, and on mobile a booking button pinned to the bottom of the screen. Property intro, amenities, area guide, FAQ — every page is laid out so the path eventually merges back into the booking flow.

The site supports four languages (Japanese, English, Traditional Chinese, and Korean), so guests from overseas can book directly too. We cover our thinking on page structure in "Site Structure That Leads Straight to Booking."

After booking — a guest-only portal and an AI assistant

At a property with unattended check-in, the communication after booking is what determines the quality of the stay. Opening the private URL included in the confirmation email brings up a portal page for that guest only, covering entry instructions, Wi-Fi, the house guide, and even self-service cancellation.

We also built an AI assistant into the portal that answers questions about appliances and the surrounding area in all four languages. We cover that in detail in the series starting with "The big picture of an AI assistant for staying guests."

For the operator — an admin panel they can run themselves

We also built the admin panel in-house: updating the blog and announcements, checking booking and payment status, and managing guest portal issuance. No monthly fee to an external CMS service, and the operator can grow the content themselves.

Even a non-engineer can build this much

AI coding as a real option

A system of this size is the kind of thing you'd once have commissioned from a development agency for several million yen. This time, using AI coding tools such as Claude Code, I handled the design and implementation myself — as a non-engineer.

Recording your decisions is what holds quality together

Throughout development, we kept a written record of every decision: why we chose card registration instead of an authorization hold, why we don't hold inventory ourselves. That record pays off later, when you're second-guessing a spec or handing context back to an AI.

Wrapping up

We've walked through the big picture of a direct-booking platform for a private rental property.

  1. Keep the source of truth in the booking management system — the official site holds no inventory and coexists with OTAs
  2. Payments that fit hospitality — card registration only at booking, automatic charge on the day cancellation fees begin
  3. Design the post-booking experience too — a guest-only portal and AI assistant make unattended operation work

Each building block is covered in detail in the articles below.