Please take note on the following before proceeding with integration steps:
-
only compatible with Cloudbeds Booking Engine (direct website)
-
This means that Xendit is not compatible with Cloudbeds Channel Manager (posting through Agoda, Traveloka, Booking, etc)
Steps on how to integrate Cloudbeds with Xendit
1. Install Cloudbeds for Xendit first via:
-
Xendit Dashboard
-
Go to Integrations
-
Choose Cloudbeds
-
Click Install
-
-
Cloudbeds account
-
Go to Apps & Marketplace
-
Search for Xendit
-
Click Learn more
-
Click Connect App
-
Before proceeding to next steps, kindly make sure you're logged in to your Cloudbeds account
2. After installation step (doesn't matter which installation way you choose), you'll be redirected to Cloudbeds consent page
-
Click "Allow Access"
3. Next, you will be redirected to Xendit consent page
-
Click "Allow" and then you will be redirected back to Cloudbeds
4. On Cloudbeds settings, Xendit should be automatically displayed in Payments
-
To verify, click Payments
-
Choose Payment Options Tab
-
Click Additional and Custom Payment Methods
-
You will then be able to see Xendit (which you can click to active or inactive)
5. Confirm that is_xendit is found under Custom Field Name in Guests
-
Click Guests
-
Choose Custom Fields Tab
-
Look for is_xendit
-
Then click Edit (pencil icon) on the right side of the Custom Fields Table
-
On the "Where would you like this field to display"
-
Click on Internet Booking Engine
-
6. Go to Booking Engine
-
Click Customize
-
Then, copy and paste this CSS and JS to 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>
-
7. Go back to Payments
-
Choose Payment Options Tab
-
Click the option Bank Transfer
-
Toggle the Active/Deactive switch to activate the payment method
8. Now, go to Property
-
Click Profile Tab
-
Choose Confirmation Pending
-
Then, change "What status should direct reservations have by default" to Confirmation Pending
9. You may now test Xendit checkout by
-
Clicking Booking Engine
-
Choose Summary Tab
-
Click on the booking page link
-
Confirm that "Online Payments via Xendit" is displayed under Payment method in the checkout page
-
Click "Pay now" and you should be redirected to Xendit payment page
Additional steps if you're using Cloudbeds Booking Page V3
1. Go to Cloudbeds Dashboard
-
Afterwards, go to Settings
-
Click on Guests
-
Choose Custom Fields Tab
-
Then, delete is_xendit from the table
2. Now, go to Booking Engine
-
Click Customize
-
Copy this CSS CDN in Custom Meta Tags input
-
<link rel="stylesheet" href="https://tpi-assets.xendit.co/cloudbeds/css/checkout-v3.min.css" />
-
-
Copy this Javascript CDN in Javascript input
-
<script src="https://tpi-assets.xendit.co/cloudbeds/js/checkout-v3.min.js" type="text/javascript"> </script>
-
Please take note on the Limitation for Cloudbeds Booking Page V3
-
-
Cloudbeds Booking Page V3 can only use one payment method. In this case, Xendit payment method should be the only channel option in checkout page.
-
Please refrain to use other integration for payment provider
-
-
If you encounter any problems or issues during integration, please get in touch with us at help@xendit.co.