How to add your own payment gateway in mybookings booking engine

Follow

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 mybookings page.

Step 1 - Set up the payment option in myfrontdesk

Since 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 in myfrontdesk
  2. Open 'Payment Options' under 'Property Configuration'
  3. Click on the 'Bank Transfer' tab
  4. Activate the option by toggling the switch to the green box
  5. Enable the option 'Mybookings Booking Engine' in the option "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 mybookings by following this guide
  2. Insert the online link generated in the pop up 'Insert Image'
  3. Click on 'Insert image' to complete

The image will be displayed in the text field.

Make sure to click on 'Save' in the bottom of the page and proceed to the next step.

1.2 Set up the deposit policy

Mybookings will only display the bank transfer option if the deposit policy is configured to collect a determined amount in advance. In order to configure the deposit policy, please follow the instructions in this guide

Step 2 - Add the customization code to mybookings

Open your payment gateway and copy the URL of the payment page where guests should be directed

  1. Go to myfrontdesk 'Manage' tab
  2. Open 'Customize Mybookings' page

Add the following codes to the corresponding sections below:

Custom header for your hotel booking page

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>

Custom Meta Tags

  1. In case you have 'Gallery Design' enabled, paste this code in the first tab
  2. If you use the 'List Design', paste the code in the second tab
  3. Personalize the highlighted text to your property's payment method
  • We recommend properties to use the "Gallery Design" for a better user experience, since the pictures are larger and the rate plans are grouped together. For more information, please check Mybookings - Gallery vs List Design
  • 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, 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