This article explains how to add the payment gateway option to your Cloudbeds Booking Engine.
In case your payment gateway is not listed in our Payment Gateways currently supported list, this article will guide you through how to add your own gateway to your booking engine page.
Before Getting Started
Current limitations:
- Once the reservation is complete using your payment method/custom gateway, the final booking completion page and the confirmation email will show Bank Transfer as the payment method. This cannot be amended in any way.
- Since the custom gateway is not integrated or supported by Cloudbeds PMS, the payment confirmation and transaction will not be auto-updated/posted in the reservation folio. The payment of the reservation will need to be recorded manually by the property.
- The following workaround is for the external/custom payment gateway not connected to the Cloudbeds PMS system, meaning that there is no way of confirming the payment made. This will need to be confirmed manually at your end. Guests will need to make the payment on the link that will pop-up after clicking on the image; and once this payment is made, they will need to exit the window of payment and click the Confirm Reservation button to proceed.
Step 1 - Set up the Payment Option in Cloudbeds PMS
The payment gateway that will be used is not listed in the credit card section. This workaround will show you how to adapt the bank transfer option to redirect your guests to the gateway.
- Go to the Manage tab
- Go to the Payment Options
- Click on the Bank Transfer tab
- Activate the option by toggling the switch to the green box
- Enable the option Booking Engine in Where do you want to allow this payment type?
- Click on the image icon
- Host the payment gateway image online to make it clickable in the booking engine by following this guide
- Paste the online link generated in the pop up Insert Image
- Click on Insert image to complete
- The image will be displayed in the text field.
- Click on Save, at the bottom of the page and proceed to the next step.
The booking engine will only display the bank transfer option if the deposit policy is configured to collect a determined amount in advance. To configure the deposit policy, follow the instructions in this guide.
Step 2 - Add the Customization Code to your Booking Engine in Cloudbeds PMS
Before accessing the Customize Booking Engine section on Cloudbeds PMS, open your payment gateway and copy the URL of the payment page where guests should be directed to. This information will be required to Custom footer for your hotel booking page section in Step 2.2.
- Click on the Manage tab
- Open Customize the Booking Engine
In the above-mentioned section, copy and paste the following code replacing the text ADD_YOUR_PAYMENT_GATEWAY_URL_HERE with the URL of the page your guests must be directed in your payment gateway (Step 2.1)
Example:
<!-- ---------------- ---------------- Pop-up Payment Website ---------------- ---------------- -->
<div id="popupmodal" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h2 class="modal-title">Make your payment and return to Complete Reservation</h2>
</div>
<div class="modal-body">
<iframe src="ADD_YOUR_PAYMENT_GATEWAY_URL_HERE" width="100%" height="100%" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- ---------------- ---------------- Pop-up Payment Website Ends here ---------------- ---------------- -->
<style>
.modal-open .modal {
z-index: 99999;
margin: 2%;
}
@media (min-width: 767px) {
.modal-body { height: 500px; width: 500px;}
.modal-dialog { width: 500px; }
div.row.margin-top-10 > div > img { width: 100%; cursor: pointer; }
}
@media (max-width: 450px) {
.modal-body { height: 500px; width: 350px;}
.modal-dialog { width: 100%; }
div.row.margin-top-10 > div > img { width: 100%; cursor: pointer; }
}
</style>
<script>
$('div.row.margin-top-10 > div > img').on('click', function(){
$('#popupmodal').modal('show');
});
</script>
Copy and paste this code to the above-mentioned section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- Paste this code in Gallery Design tab.
- Personalize the highlighted text to your property's payment method.
- Save the changes.
If there is an apostrophe in your text (for example, the "'s" in Africa's) always add a backward slack \ before the single quote so the code can skip the single quote and move forward.
<style>
label[for=ebanking] > a {font-size: 0;}
label[for=ebanking] > a:after {content: 'Click on image to Pay Advance Amount and return to Complete Reservation '; font-size: 20px;}
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div {
font-size: 0;
}
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div:after {
content: 'We use Africa\'s leading online payment processor, Direct Pay Online. The payments made are safe and secure, in compliance to PCI DSS. Upon completion of payment, return to click on COMPLETE RESERVATION, submitting for confirmation';
font-size: 13px;
}
</style>
- Your Payment Gateway is now ready! The guest will be able to click on your gateway image after completing the reservation details, and will be redirected to complete the payment in the URL configured.
If the guest selects the Credit Card option in the left side, the credit card details will be saved and displayed at the reservation credit card tab as usual, and the property will need to charge it manually.
