Build with HTML - Cancel Book Form Component

General Discussion
1

Hello,

We are implementing the cancel booking page and would like to use the cancel-booking-form component (https://developer.nylas.com/docs/reference/ui/cancel-booking-form/).

We were able to render the element successfully; however, the cancel booking action does not trigger any request. We can see logs from the cancelBookingFormSubmitted event, but no API call is made.

When using the full flow from nylas-scheduling, we noticed that the request is triggered using the bookingRef.

Could you clarify how the cancel-booking-form is expected to trigger the cancellation request, and what we might be missing in our implementation?

Note: We are replacing the cancel link in the email confirmation with a link to our custom page.

Code Sample that we are using for testing.

<!DOCTYPE html>
<html>
<head>
<title>Cancel Booking</title>
</head>
<body>
<nylas-cancel-booking-form id="scheduler"></nylas-cancel-booking-form>

<script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@2.5.4/dist/cdn/nylas-scheduling/nylas-scheduling.es.js";

defineCustomElement();

// Read booking reference from URL: /cancel?bookingRef=abc123
const params = new URLSearchParams(window.location.search);
const bookingRef = params.get("bookingRef");
const bookingId = params.get("bookingId");

const scheduler = document.getElementById("scheduler");


scheduler.configurationId = "YOUR_CONFIGURATION_ID";   
scheduler.cancelBookingId = bookingId;
scheduler.schedulerApiUrl =  "https://api.us.nylas.com";

// Listen for cancel events
scheduler.addEventListener("cancelBookingFormSubmitted", (event) => {
const { bookingId, action, reason } = event.detail;

console.log(`Booking ${bookingId} ${action}ed. Reason: ${reason}`);

});


scheduler.addEventListener("cancelBookedEventError", (event) => {
console.error("Cancellation error:", event.detail);
});

</script>




</body>

</html>
2

Hi,

The behavior you’re seeing is expected. nylas-cancel-booking-form is a child component that does not make API calls on its own. It only emits a cancelBookingFormSubmitted custom event when the form is submitted. The actual cancellation API call (DELETE /v3/scheduling/bookings/{bookingId}) is handled by the parent nylas-scheduling component, which internally wires that event to its API connector. When you use nylas-cancel-booking-form outside of nylas-scheduling, there’s nothing listening for that event to trigger the API request — which is why you see the event fire but no network call.

Recommended Approach: Use nylas-scheduling with cancelBookingRef

Instead of rendering nylas-cancel-booking-form directly, use nylas-scheduling and pass it the cancelBookingRef. This is exactly how our hosted cancel page works. The cancelBookingRef is a compact string (included in the cancel link in booking confirmation emails) that encodes both the configurationId and bookingId, so you don’t need to set those separately.

<!DOCTYPE html>
<html>
<head>
  <title>Cancel Booking</title>
</head>
<body>
  <nylas-scheduling id="scheduler" mode="app"></nylas-scheduling>

  <script type="module">
    import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@2.5.4/dist/cdn/nylas-scheduling/nylas-scheduling.es.js";
    defineCustomElement();

    const params = new URLSearchParams(window.location.search);
    const bookingRef = params.get("bookingRef");

    const scheduler = document.getElementById("scheduler");
    scheduler.cancelBookingRef = bookingRef;
    scheduler.schedulerApiUrl = "https://api.us.nylas.com";
  </script>
</body>
</html>

With this setup, nylas-scheduling will automatically render the cancel form, decode the booking reference, and handle the cancellation API call when the user submits the form — including loading states and error handling.

Alternative: Handle the API Call Yourself

If you need full control over the page and prefer to keep nylas-cancel-booking-form as a standalone component, you’ll need to make the API call yourself inside your cancelBookingFormSubmitted event listener:

scheduler.addEventListener("cancelBookingFormSubmitted", async (event) => {
  const { bookingId, reason } = event.detail;

  const response = await fetch(
    `https://api.us.nylas.com/v3/scheduling/bookings/${bookingId}?configuration_id=${configurationId}`,
    {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        action: "cancel",
        cancellation_reason: reason,
      }),
    }
  );

  if (response.ok) {
    // Show success UI or redirect
  } else {
    const error = await response.json();
    console.error("Cancellation failed:", error);
  }
});

Note that with this approach you’ll need to supply the configurationId yourself (e.g., as a URL parameter), since the standalone component doesn’t have access to the connector that normally resolves it from the bookingRef.

We’d recommend Option 1 (nylas-scheduling + cancelBookingRef) as it handles the full lifecycle out of the box.

Let us know if you have any questions!

3

It worked perfectly. Thank you, Samuel.