You can add a custom payment option (such as a payment link) to your booking engine using JavaScript. Follow the steps below:
🔧 Step 1: Add JavaScript Code
Go to your Cloudbeds Booking Engine settings and follow this path:
Settings → Booking Engine → Customize → Scroll to the bottom → Add the following JavaScript code in the Javascript field:
<script>
window.addEventListener('on-booking-engine-ready', (e) => {
const { eventSystem } = e.detail;
eventSystem.dispatchEvent("custom-payment-option-change", {
id: "payment-link", // Unique identifier for this payment option
instructions: "A link will be sent to your email to complete the precheck-in and complete the payment required.",
name: "Make a payment with Payment link", // This is the display name for the payment option
});
});
</script>
This script adds a new payment option labeled "Make a payment with Payment link" and provides instructions to the guest.
🧾 Step 2: Configure Bank Transfer in Cloudbeds
Navigate to Settings → Payments in Cloudbeds and ensure:
Bank Transfer is activated.
Do not add any text to the Bank Transfer field.
Select only the checkboxes for Booking Engine and Direct Booking.
💳 Step 3: Enable Credit Card Payments
Still under Settings → Payments, make sure the following are configured:
Activate Credit Card payment method.
Select at least two card brands (e.g., Visa and MasterCard).
Make sure that Cloudbeds PMS and Booking Engine are not checked (i.e., leave them unchecked for this setup).
By completing these steps, you’ll successfully enable a custom "Payment Link" option that your guests can select during the booking process.
If you have questions, feel free to reach out to our support team.