Cloudbeds

Prev Next

Cloudbeds Booking Engine is an all-in-one solution for hotels, hostels, vacation rentals, and homestays. Cloudbeds platforms provide a seamless booking experience for guests. It provides a customizable interface and a streamlined booking experience for guests, encouraging direct bookings to increase revenue.

Important Note: Xendit is only compatible with the Cloudbeds Booking Engine (direct website). It does not work with bookings made through Cloudbeds Channel Manager (e.g., Agoda, Traveloka, Booking.com).

Installation guide

You can initiate the Xendit integration with Cloudbeds using two methods:

Method 1: From Xendit Dashboard

  1. Go to your Xendit dashboard

  2. Navigate to Integrations > Cloudbeds

  3. Click Install

Method 2: From Cloudbeds Account

  1. Log in to your Cloudbeds account

  2. Go to Apps & Marketplace

  3. Search for Xendit

  4. Click Learn more, then click Connect App

    Xendit payment app overview, highlighting features for accepting various payment methods.

Prerequisite: Ensure your Xendit account has Developer permissions to perform this integration.

How to install

  1. Grant Cloudbeds Access

    After initiating the integration (from either method above), you will be redirected to the Cloudbeds consent page. Ensure you are logged into your Cloudbeds account, then click Allow access

    Instructions to allow access by clicking the 'Allow Access' button on the screen.

  2. Grant Xendit Access

    Next, you will be redirected to the Xendit consent page. Click Allow to proceed. You will then be redirected back to Cloudbeds.

    Prompt to click 'Allow' for Cloudbeds integration access on Xendit dashboard.

  3. Verify Payment Method

    Xendit should now automatically appear under Payments > Payment Options > Additional and Custom Payment Methods in your Cloudbeds account.

    Payments section showing options to add additional payment methods for transactions.

  4. Configure Custom Field

    • Go to the Guests tab

    • Locate is_xendit under Custom Field Name in the custom fields table.

    • Click Edit on the right side of the table

    • Under "Where would you like this field to display?", ensure Internet Booking Engine is checked

      Custom fields section showing the 'is_xendit' input field for guest reservations.

      Custom fields setup for guest reservations in a booking engine interface.

  5. Add CSS & JavaScript:

    • Navigate to Booking Engine > Customize.

    • Copy and paste the following CSS and JavaScript code into the Booking Engine Header:

      <link rel="stylesheet" href="https://tpi-assets.xendit.co/cloudbeds/css/checkout.min.css" />
      <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
      <script src="https://tpi-assets.xendit.co/cloudbeds/js/checkout.min.js"></script>

      Instructions for adding CSS/JS code to the hotel booking page header.

  6. Activate Bank Transfer

    • Go to Payments > Payment Options > Bank Transfer

    • Toggle the switch to activate this payment method

      Instructions for enabling bank transfer payment option in the partner account settings.

  7. Set default reservation status

    • Go to Property > Profile > Confirmation Pending

    • Change "What status should direct reservations have by default?" to Confirmation Pending

      Instructions to change reservation status to Confirmation Pending in Xendit Partner Account.

Testing the Xendit Checkout

  1. Go to Booking Engine > Summary

    Instructions for accessing the booking engine and social media integration options.

  2. Click on your Booking Page link

  3. On the checkout page, Online Payments via Xendit should now be displayed under Payment Method

    Reservation page showing Xendit payment option and user contact information fields.

  4. Click Pay Now to be redirected to the Xendit payment page

    Instructions to click 'Pay now' for Xendit invoice creation on reservation page.

Additional Settings

Changing Deposit Amount

You can customize the deposit amount charged to your customers. This amount will be reflected on both the Cloudbeds and Xendit checkout pages.

  • Here's how deposit amount looks like on Cloudbeds checkout page:

    Reservation summary showing deposit amount and payment details for Andy Nguyen's booking.

  • Here's how deposit amount looks like on Xendit checkout page:

    Order summary showing total amount due and payment details for a deluxe queen room.

How to change default deposit amount:

  1. Go to Property Settings

    Navigate to Property settings in the Xendit Partner Account interface for profile management.

  2. Navigate to Policies

  3. Enter your desired deposit amount. To charge the full amount, set it to 100%.

  4. Click Save

Voiding Transactions in Cloudbeds

If you need to void a transaction made in error, refer to the detailed instructions on voiding transactions within Cloudbeds here.

Installation for Cloudbeds Booking Engine Plus (V3)

If you are using Cloudbeds Booking Engine Plus, follow the initial installation steps, and then proceed with the additional steps below:

  1. Delete Custom Field:

    • Go to Cloudbeds Dashboard > Settings > Guests tab > Custom Fields.

    • Delete the is_xendit custom field from the table.

  2. Add CSS CDN:

    • Go to Booking Engine tab > Customize.

    • Copy and paste the following CSS CDN into the Custom Meta Tags input:

      HTML

      <link rel="stylesheet" href="https://tpi-assets.xendit.co/cloudbeds/css/checkout-v3.min.css" />
      
  3. Add JavaScript CDN:

    • Copy and paste the following JavaScript CDN into the Javascript input:

      HTML

      <script src="https://tpi-assets.xendit.co/cloudbeds/js/checkout-v3.min.js" type="text/javascript"> </script>
      

Limitation

Cloudbeds Booking Engine Plus (V3) can only accept one payment method. When using Xendit with V3, ensure it is the only active payment channel option on your checkout page. Avoid using other payment provider integrations simultaneously.