mq-appointment-checkout

Appointment-specific checkout. Creates a payment session from a slot and service, then delegates the full payment UX to mq-checkout.

<mq-appointment-checkout> is the appointment-aware counterpart of <mq-checkout>. You give it a slot-id and a service-id; it creates the payment session via the Mediquo API and hands the rest of the flow — embedding the portal, polling, retries — to <mq-checkout> internally.

Use this component when you already have a booked slot and a service to charge for. If you need to drive the payment from a session created by your own backend, use <mq-checkout> directly.

Dependencies

Must be rendered inside an <mq-theme-provider> ancestor. No other providers are required.

Installation

npm install @mediquo/web-components

import "@mediquo/web-components/mq-appointment-checkout";
import "@mediquo/web-components/mq-theme-provider";

Usage

HTML

<mq-theme-provider theme="mediquo">
  <mq-appointment-checkout
    env="production"
    api-key="<your-api-key>"
    token="<your-token>"
    slot-id="<slot-uuid>"
    service-id="<service-uuid>"
    consultation-reason="Dolor de cabeza"
    locale="es_ES"
  ></mq-appointment-checkout>
</mq-theme-provider>

React / Next.js

"use client";
import { useEffect, useRef } from "react";

export function AppointmentCheckout({ apiKey, token, slotId, serviceId }) {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    import("@mediquo/web-components/mq-appointment-checkout");
    import("@mediquo/web-components/mq-theme-provider");
  }, []);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const onSuccess = (e: Event) =>
      console.log("appointment", (e as CustomEvent).detail.appointmentId);
    el.addEventListener("payment-success", onSuccess);

    return () => {
      el.removeEventListener("payment-success", onSuccess);
    };
  }, []);

  return (
    <div style={{ height: "700px" }}>
      {/* @ts-expect-error — custom element */}
      <mq-theme-provider theme="mediquo">
        {/* @ts-expect-error — custom element */}
        <mq-appointment-checkout
          ref={ref}
          env="production"
          api-key={apiKey}
          token={token}
          slot-id={slotId}
          service-id={serviceId}
          locale="es_ES"
        />
      </mq-theme-provider>
    </div>
  );
}

Attributes & properties

Name	Kind	Type	Required	Description
`env`	attribute	`string`	No	Backend environment: `"development"` or `"production"`. Applied once at mount.
`api-key`	attribute	`string`	Yes	API key for the Mediquo platform.
`token`	attribute	`string`	Yes	Mediquo user token.
`slot-id`	attribute	`string`	Yes	UUID of the booked slot to pay for.
`service-id`	attribute	`string`	Yes	UUID of the service being purchased.
`consultation-reason`	attribute	`string`	No	Free-text reason recorded on the consultation.
`locale`	attribute	`string`	No	Locale code: `es_ES`, `en_US`, `pt_PT`, `de_DE`, `ca_ES`. Defaults to `es_ES`.
`preconsultationDocuments`	property	`Array<{ file_path: string; file_name: string }>`	No	Documents attached to the consultation. Must be set as a JS property.

Events

All events bubble and cross shadow boundaries (composed: true).

Event	Detail	Description
`payment-success`	`{ appointmentId: string }`	Payment confirmed. `appointmentId` is the created consultation id.
`payment-denied`	`{ sessionId: string }`	Payment was rejected. Forwarded from `<mq-checkout>`.
`payment-error`	`{ reason: "auth" \| "session" \| "timeout" }`	Authentication failed, the session could not be created, or polling timed out. Forwarded from `<mq-checkout>`.

const checkout = document.querySelector("mq-appointment-checkout");

checkout.addEventListener("payment-success", (e) => {
  console.log("appointment paid", e.detail.appointmentId);
});

Environment, CSP & theming

These behave identically to <mq-checkout>: select the backend with the env attribute (set once at mount), allowlist the payment-portal origin under your CSP frame-src, and theme via <mq-theme-provider>.

mq-appointment-checkout

On this page