Add your own payment gateway to your Cloudbeds Booking Engine

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
  • 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 Bank Transfer 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.

1.1 - Add payment gateway details
  1. Once the Bank Transfer option is correctly setup in your Cloudbeds PMS, stay in the Bank Transfer tabs and click on the image icon within the editor section.
  2. Host the payment gateway image online to make it clickable in the booking engine. Learn more here.
  3. Paste the online link generated in the pop up Insert Image
  4. Click on Insert image to complete
  1. The image will be displayed in the text field
  2. Click on Save, at the bottom of the page and proceed to the next step
1.2 - Set up the Deposit Policy

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 below

2.1 - Custom your Booking Engine footer
  1. In the Settings page, go to the Booking Engine section
  2. Click on Customize
  3. 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
<!-- ----------------  ---------------- 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>

Example:

2.2 - Custom your Booking Engine header

Copy and paste this code in the Custom header section for your Booking Engine:

<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>
Click to copy
2.3 - Custom Meta Tags section
  1. Paste the code below in the Custom Meta Tags section
  2. Personalize the text in red below to your property's payment method
  3. Save the changes
<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>

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.

  1. 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.

Was this article helpful?
2 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.