Booking Engine Plus custom payment gateway and gift card support

1. Go to the Settings page of your Account Menu and click on the Booking Engine section
2. Click on Customize
3. Add the custom JavaScript to the JavaScript field
4. Click Save

The custom JavaScript must subscribe to the on-booking-engine-ready event. This event is dispatched when the Booking Engine is ready to trigger and listen to events.

The script must also dispatch the custom-payment-option-change event to notify the Booking Engine that a custom payment option is available.

<script>
window.addEventListener('on-booking-engine-ready', (e) => {
  const { eventSystem } = e.detail;

  eventSystem.dispatchEvent("custom-payment-option-change", {
    id: "%PAYMENT_OPTION_ID%",
    instructions: "Your default text for the instructions goes here.",
    name: "Your default text for the label goes here.",
  });
});
</script>

Use eventSystem.dispatchEvent() to dispatch the custom-payment-option-change event with the following payload:

• id [string]: Required. Must have a length greater than 0 and must be valid to use as a CSS id. Do not use spaces, semicolons, or special characters that are not valid in CSS selectors. The suggested format is kebab-case. Replace %PAYMENT_OPTION_ID% with the id for the custom payment gateway. This id is also used by CSS selectors to customize the UI.
• instructions [string]: Optional. Shows instructions or a description when the guest expands the custom payment option (expanded as an accordion). This value needs to be defined if the property wants to show that text and will act as a fallback if language-specific text is not customized with CSS.
• name [string]: Required. Must have a length greater than 0.

• You can specify language-based texts for the labels:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
  content: "Your lang-specific text for the label goes here.";
}

• Instructions can also be configured language-based:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
  content: "Your lang-specific text for the instructions goes here.";
}

• And you can add a custom logo/icon as well:

// To hide the default SVG icon
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// To customize the icon by setting it as a background image
[data-id="%PAYMENT_OPTION_ID%-icon"] {
  background-image: url(PAYMENT_OPTION_ICON_URL);
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
}

• At this point, you have added and customized the payment option to use the Custom Payment Option. When a guest makes a reservation using the Custom Payment Option, the reservation will be created on Cloudbeds PMS with an e-banking payment method, and no payment will be collected by Cloudbeds.
• Using the EventSystem, you can listen to the reservation-created event to get the data about the created booking and redirect the user to the payment gateway to complete the payment (for integrations with third-party payment gateways).

eventSystem.addEventListener('reservation-created', (data) = {
  // Your code to execute after a booking is created...
})

• The data exposed by the reservation-created event has the following shape:

interface CreatedReservation {
  booking_id?: `${number}`;
  booking_total?: number;
  checkin_date?: string;
  checkout_date?: string;
  city?: string;
  currency_code?: string;
  hotel_name?: string;
  real_booking_total?: number;
  resRooms?: {
    adults: `${number}`;
    id: `${number}`;
    kids: `${number}`;
    package: `${number}`;
    package_name: string | null;
    rate_id: `${number}`;
    room_total: `${number}`;
    room_type_id: `${number}`;
    room_type_name: string;
    room_type_photos: ({
      TYPE?: string;
      alt: string;
      cropParam: string | null;
      croppedImage: string;
      fullPath: string;
      galleryPath?: string | null;
      id: string;
      imageHeight: string;
      imageWidth: string;
      mime?: string;
      originalName: string;
      ownerId?: string;
      ownerType?: string;
      parentId: string;
      path: string;
      section?: string;
      size?: string;
      thumbPath: string;
      uploadedAt?: string;
      utype?: string;
    } & {
      featured: number;
      featuredPath: string | null;
    })[];
  }[];
  rooms?: Record<string, {="{" adults:="adults:" number;="number;" amount:="amount:" bookedid:="bookedId:" string[];="string[];" kids:="kids:" name:="name:" string;="string;" packageid?:="packageId?:" packagename?:="packageName?:" picture?:="picture?:" price?:="price?:" rateid:="rateId:" roomid:="roomId:" unit?:="unit?:" }="}">;
  state?: string;
  total_tax?: number;
  widget_property?: number;
};</string,>

Check the following:

• Confirm that the Bank Transfer option is enabled in Cloudbeds PMS.
• Confirm that the custom JavaScript is added to the Booking Engine Customize tab.
• Confirm that the custom-payment-option-change event payload includes a valid id and name.
• Confirm that the id does not include spaces, semicolons, or invalid CSS selector characters.
• Confirm that only one custom payment gateway is configured.

If the event payload does not meet all requirements, the custom payment option will not be registered, and the Bank Transfer option will continue to display.

Check the following:

• Confirm that the custom script listens for the reservation-created event.
• Confirm that the script does not rely only on page-specific click listeners, accordion button clicks, or UI selectors.
• Confirm that the third-party payment gateway URL and redirect parameters are valid.

Cloudbeds can confirm expected Booking Engine behavior. Custom JavaScript changes must be completed by the property’s web developer, reseller, or integration partner.