Cloudbeds Booking Engine - How to Add Your Own Payment Gateway

Follow

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.

1.1 - Set up the Bank Transfer option
  1. Go to the Manage tab
  2. Go to the Payment Options
  3. Click on the Bank Transfer tab
  4. Activate the option by toggling the switch to the green box
  5. Enable the option Booking Engine in Where do you want to allow this payment type?
  6. Click on the image icon
  1. Host the payment gateway image online to make it clickable in the booking engine by following this guide
  2. Paste the online link generated in the pop up Insert Image
  3. 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 in Step 2.2.

2.1 - Access the Customize Booking Engine tab
  1. Click on the Manage tab
  2. Open Customize the Booking Engine
2.3 - Custom header for your hotel booking page section

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>
2.4 - Custom Meta Tags section
  1. Paste this code in Gallery Design tab.
  2. Personalize the highlighted text to your property's payment method.
  3. 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>
  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.

Powered by Zendesk