mq-immediate-videocall-checkout

Immediate-videocall checkout. Creates a payment session for a paid immediate videocall, then delegates the full payment UX to mq-checkout.

<mq-immediate-videocall-checkout> is the immediate-videocall counterpart of <mq-checkout>. You give it a video-call-schedule-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 have a scheduled paid videocall the patient must pay for before joining. When the payment is confirmed, the videocall is created by the payment provider's webhook and the component emits payment-success with the created videocall id so you can continue your flow (for example, entering the room).

You can also open the same flow through the hosted checkout shell at /immediate-videocall — see Hosted checkout.

This flow uses Addon Payments only. Discount codes, slots, services and pre-consultation documents do not apply — if you need those, use <mq-appointment-checkout>. 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-immediate-videocall-checkout";
import "@mediquo/web-components/mq-theme-provider";

Usage

HTML

<mq-theme-provider theme="mediquo">
  <mq-immediate-videocall-checkout
    env="production"
    api-key="<your-api-key>"
    token="<your-token>"
    video-call-schedule-id="<video-call-schedule-id>"
    locale="es_ES"
  ></mq-immediate-videocall-checkout>
</mq-theme-provider>

React / Next.js

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

export function ImmediateVideocallCheckout({
  apiKey,
  token,
  videoCallScheduleId,
}) {
  const ref = useRef<HTMLElement>(null);

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

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

    const onSuccess = (e: Event) =>
      console.log("videocall", (e as CustomEvent).detail.videoCallId);
    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-immediate-videocall-checkout
          ref={ref}
          env="production"
          api-key={apiKey}
          token={token}
          video-call-schedule-id={videoCallScheduleId}
          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.
`video-call-schedule-id`	attribute	`string`	Yes	Identifier of the videocall schedule to pay for.
`locale`	attribute	`string`	Yes	Locale code: `es_ES`, `en_US`, `pt_PT`, `de_DE`, `ca_ES`.

Events

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

Event	Detail	Description
`payment-success`	`{ videoCallId: string }`	Payment confirmed. `videoCallId` is the created videocall 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-immediate-videocall-checkout");

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

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-immediate-videocall-checkout

On this page