Create a booking website in WordPress for free, with Stripe and Jomres

Requirements

None. Nada.

No, I’m not kidding, there aren’t any requirements. You don’t need to pay anything to follow the steps in this guide, not even give away your email address, everything here is completely free.

Every page I've reviewed where it says that X plugin is free really should have in the small-print "actually, this article is bait and switch, and paid for by the developers of the plugin we're writing about". I find it incredibly frustrating. Jomres isn't like that. If I say something is free, I mean it.

It is the only free WordPress booking plugin with payment built in, so without further ado I will show you how to make a booking website with WordPress at zero cost to you.

Installation

I will not cover installing WordPress or Jomres here, it’s covered extensively in the documentation. You won't be able to download a Quickstart, but you can follow the Install From Web instructions to install Jomres into WordPress.

We’ll start right at the point of Jomres having been installed and activated and guide you through the steps on how to set your site up to take bookings.

Jomres has been installed and activated

Before you can start using Jomres, we need to know a few things about how you intend to use the system.

All of these settings can be changed later in Administrator > Jomres > Settings > Site Configuration.

The first question you’ll see asked is about data collection.

Currently Jomres doesn’t actually collect any information, however if that should change, this setting will be used to determine if we should collect it or not.

Jomres is designed to be used as a booking portal, however it can be used to manage just one property too, and that’s how we’re going to use it in this tutorial.

On this page you need to click “Just one property”

When you select that option some settings in the property management section are hidden from you. This makes it easier to use when you have just one property that you want to take bookings for.

In this tutorial we will be using the WordPress 6.x Twenty Twenty Two theme, so here you need to select “No Bootstrap in theme”.

You should only use one of the other settings if you are running a theme that has the Bootstrap framework already included in it.

Administrator Dashboard

Once you have clicked that button wait a moment, and you’ll be taken to your administrator dashboard.

During Installation Jomres does several things.

  • It creates a Property Manager in the database using the administrator user’s details. This user is a type of user called a Super Property Manager.
  • It also creates a new page in your WordPress site called Bookings. You should not delete this page because it’s the main page of your Jomres installation.
  • It creates sample data in the frontend. As you follow this tutorial you will end up changing this sample data.

In that page it simply puts this WordPress Shortcode :

[jomres:en-US]

As mentioned previously, the admin user is added as a Super Property Manager. You shouldn’t change this user right now. Later you can add more users, make some normal property managers but for now don’t make any changes.

The Plugin Manager

If you want you can visit the Jomres Plugin Manager page. The first time you visit this page you are prompted to install the Plugin Manager, so go ahead and click the “Let’s do this” button.

Once the manager has installed itself you will be shown this page. You don’t need to install any plugins for the purpose of this tutorial, but if you want to use Jomres Shortcodes later you will need to install the “Alternative Init” and the “Jomres Shortcodes” plugins (you’ll find the latter right at the bottom).

Property Management

There is a very clear boundary in Jomres between what can be referred to as site level resources, and property level resources.

Some site level resources would be

  • Site relevant settings which can be found in Administrator > Jomres > Settings > Site Configuration.
  • Room types are changed in Administrator > Jomres > Settings > Room types.
  • Most label translation is done in Administrator > Jomres > Translations > Translate lang file strings.

Site level resources are managed in the administrator area of your site.

Property level resources would be

  • Property images
  • Payment gateway settings
  • Prices/tariffs
  • Property specific translations

Properties level resources are all managed in the frontend of your site.

Right at the top of the Administrator > Jomres pages you’ll see a button marked “Manage Properties”. Click it.

A new tab in your browser will open and you’ll be taken to the public area of your Jomres installation.

Because you are (or, should be) logged in as the administrator user who is set as a Property Manager you will see a toolbar of property management options. If you’re not a property manager you will not see any of these options.

Because Jomres is mainly used as a portal the link takes you to the list properties page, but because you have set the site up to be a single property site, you can't add more properties. Instead you should go to the Control Panel.

 

Click on the Dashboard menu section and choose Control Panel.

This is where you can get an overview of your property. Once there are bookings they will appear in the calendar, and you’ll be able to drag and drop them to move them around, cancel them etc.

What a guest sees

Let’s have a look and see what the page looks like when you’re logged out.

Using the WordPress menu bar, log out of your WordPress Installation.

Click on the link at the bottom of the login form to be taken back to your site’s homepage.

Now, when you click on Bookings in the main menu, you’ll be automatically directed to the property’s booking form.

 

Ok, so we’ve seen what it looks like to a regular user. Let's start getting the property setup up as a villa.

Modify the sample property

Log back in as your admin user, go to the Bookings page in the frontend and we’ll start to set up your property.

The first thing we need to do is change the way your property is booked.

Jomres is capable of taking bookings for hotels, as well as apartments. When a booking is made for a hotel, you book rooms in the hotel. When you book a villa or apartment then you book out the entire property.

Change the booking process

First, we need to change the default property Hotel Valle from a hotel to a villa.

In the Settings menu on the Bookings page, click on Property Details.

On the next page you will need to change the first dropdown from “Hotel - rooms in the property” to “Villa - The entire property”

Rename the property too to “My Villa”

If you want, later you can change the property description, its terms and conditions etc but for now we will just save our changes.

Follow the on-page links to be taken to pages you need to setup your property

When you change your property from a Hotel type property to a Villa type property Jomres does some magic in the background and when the page reloads you’ll see some prompts at the top of the page. Click on the buttons in these prompts to be taken to the next step in the process of setting up your property.

Set the property sub type

When I click on the “Give your property a sub-type” button I’m taken to a page that looks like this:

Click on the Save button when you’ve set this page, and you’ll then be taken to the Occupancy Levels page.

Occupancy levels

You must click Save. Make any changes you need.

The next button in the setup guide will take you to the Tariffs page, but if you need to revisit it you will find it under Settings > Tariffs in the toolbar across the top.

Here you can set the price for individual days, and the minimum number of nights a booking needs to be for. For now, don’t make any changes, just click Save.

Upload the main property image

The next setup prompt will take you to the Jomres Media Centre.

Until you upload a main image for the property, this prompt will continue to nag you to do it, so let’s upload an image now.

Images can be uploaded for most resources of the property.

Make sure that “Property main image” is selected in the “Choose your resources…” dropdown.

On the right hand side you can either drag and drop an image to upload, or click the

"Add images" button to browse for some images. When the button appears to upload the image, go ahead and do so.

When you revisit this page later you can change the “Choose your resources…” dropdown to slideshow images and then upload slideshow images, but for now just upload the one main image.

Preview your property

Because your site is set up as a single property site, visitors to the Bookings page who aren’t property managers are automatically redirected to the booking form. As a result the Preview/Property Details page wouldn’t normally be seen by site visitors, however you as the property manager can still view this page, if you wish.

Later on you may choose to use shortcodes for displaying elements of your property in different pages (for example lists of rooms, or prices or reviews). Many of those elements can be seen in the Property Details page so it’s still handy to use the Preview button to see your property.

Make a test booking

Ok, we won’t spend any more time on that page, it’s time to move forward with making a test booking.

In the menu bar, click New booking.

When you click the New Booking option in the manager’s toolbar, you’ll see a warning about storage of data.

Switch off GDPR settings

Return to the other tab in your browser where you should still be logged into the administrator area of WordPress.

Jomres collects data in accordance with the GDPR, but for the purpose of testing and development we don’t need to worry about this so for now we’ll switch this functionality off.

Before we can do that, however, we need to change a setting in Site Configuration.

Remember, to find that go to Administrator > Jomres > Settings > Site Configuration.

In the first tab, called Misc, you’ll see a dropdown called “Admin options level”. Change it from Basic to Everything, and click Save.

Once you’ve done that you will see many more options in Site Configuration.

Go to the “GDPR policies” tab, change the “Enable GDPR compliant functionality” switch to No and click Save.

Now we can go back to the Property Management tab where we saw the “Your Data” message and just hit F5 to reload the page.

When you do that, you’ll now see the Booking form. Go ahead and make some selections and fill in your data.

When the form is satisfied that it has enough information to continue, the Review Booking button will appear.

The next page is the Booking Confirmation page.

We’re not going to go ahead with this booking yet, because we need to configure our payment gateway so that we can take payments online through our site.

Remember, your installation needs to be discoverable on the web, so you can’t take test payments on “localhost”. Either use a web service like ngrok to make your workstation discoverable to other servers, or run your Jomres installation on a live server that’s accessible through a FQDN (fully qualified domain name).

Setting up your payment gateway

Go back to the top of the page and click on Settings in the manager’s toolbar, and then “Payment Gateways”.

Jomres comes with the Stripe Standard payment gateway already installed, and you’ll see it on the Payment Gateways page.

Click the Settings button, you need to add your Stripe accounts API keys

Make sure that you set Active to Yes

And also make sure that you have enabled Test Mode for this payment gateway

Don’t click Save yet, there’s more to do.

Open a new tab in your browser and go to your Stripe account (there’s a link on the gateway settings page, if you need it) and make sure you’ve chosen Test Mode at the top right.

Click Developers next to the Test Mode button. You will see a new menu on the left.

Use the “API keys” and “Webhooks” options in the menu to see your Test API keys. Copy them into the fields in the gateway settings tab of your browser.

When you go to add the webhook url (it’s at the top of the payment gateway settings page), you’ll need to save the Signing secret from the Stripe webhooks page, so don’t forget to go to Webhooks > Add Endpoint and paste in the “Webhook URL”  from the payment gateways settings page and save it. Once you have saved it you can click on that url in the Webhooks page to see the Signing Secret.

Click on the word “Reveal” to see the secret, and paste that into your payment gateway settings page.

When everything is done your payment gateway settings should look something like this.

Don’t try using the keys that you can see in this screenshot, I’ve already rolled them, they won’t work any more.

Remember to Submit your settings.

Make a test booking with payment

 

Go back to your booking form.

And proceed with the booking as you did before. When you get to the booking confirmation page click the “I confirm that the above information….etc” button. When you’ve done that then the “Confirm Booking” will become active. Click it.

Enter test card details to simulate payment

Next you will be redirected to Stripe’s checkout page.

Make sure that near the price it says TEST MODE

Fill in the test credit card details. You can use the test card number

4242 4242 4242 4242

When you click the Pay button Stripe will call your server in the background and your Jomres installation will handle the webhook call to confirm that the payment has been made. When it does then the booking is added.

Once that’s all done you’ll be redirected to the payment confirmation page.

That’s it, that’s all you need to do to set up a property in Jomres, set up the payment gateway, and make a test payment.

This tutorial showed you how to setup a Jomres installation to take bookings for a property like a villa or cottage or apartment.

I used Twenty Twenty Two theme here to show you how you can use vanilla settings in WordPress and Jomres to achieve your goal. I can't show you how to edit the theme itself, that's well outside the scope of this article but there are gazillions of articles on the web that you can read that will help you with that.

Setting up a hotel/pension/guest house/b&b, where you rent out rooms in the property instead of renting out the entire property is approximately the same. Whereas here you set up the property to be "2 Bedroom", in a hotel you would create individual rooms, and the booking form behaves a little differently, but in general it looks more or less the same.

If you decide you want to add more properties to your site later on, you can. In Site Configuration > Portal Functionality tab set "Is this a single property installation?" to No and hey presto, you can add more properties, still for free.