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 following code to the JavaScript field to subscribe to the on-booking-engine-ready event (which will be dispatched once the Booking Engine is ready to start triggering and listening to events) and notify the Booking Engine about the use of a custom payment option using the EventSystem with the code below
4. Click Save

<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 eventStytem.dispatch() to dispatch the custom-payment-option-change  event with the following payload:

  • id [string] must be defined with a length greater than 0, and valid to use as a CSS id (no spaces, no semicolons, etc..). Suggested id format: kebab-case. Replace %PAYMENT_OPTION_ID% with the id you want to use for your custom payment gateway, this id is the value to be used by the CSS selectors to customize the UI.

  • instructions [string] optional - to show instructions (or a description) when user clicks on 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 it's not customized with CSS for specific languages.

  • name [string] must be defined with a length greater than 0.

• Important:

  • If the event's payload doesn't meet all of the requirements, the Custom Payment Option will not be registered, and the Bank Transfer option will still be shown.

  • Save the changes on Cloudbeds PMS and access the Booking Engine. On the Payment page, your custom payment gateway will be shown as a payment option, with a default card icon.

  • You can add custom CSS to customize how the Custom Payment option looks by adding custom meta tags on Cloudbeds PMS.

• 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 us.
• 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,>