Web components

When you need the checkout inside your own interface — fully themed and part of your layout — drop in one of the payment web components. They embed the Mediquo payment portal, poll until the payment resolves, and report the outcome through the same events. You pick the one that matches how the charge is created.

If you'd rather not build any UI, the hosted checkout is the shorter path.

Choose a component

If the charge is an appointment, an immediate videocall or a chat consultation, reach for the matching wrapper first — it's the shortest path. Drop down to <mq-checkout> when you need full control over how the payment session is created.

Charge for an appointment

Give the component a slot-id and a service-id. It creates the payment session for you and runs the rest of the flow.

<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>"
  ></mq-appointment-checkout>
</mq-theme-provider>

See the <mq-appointment-checkout> reference for every attribute and event.

Charge for an immediate videocall

Give the component a video-call-schedule-id. It creates the Addon Payments session for you and runs the rest of the flow. No coupons on this path.

<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>

See the <mq-immediate-videocall-checkout> reference for every attribute and event.

Charge for a chat consultation

Give the component a professional-hash. It creates the Addon Payments session for you and runs the rest of the flow. No agenda slot is reserved and you send no price — the backend prices the consultation from the professional's specialty. No coupons on this path.

<mq-theme-provider theme="mediquo">
  <mq-chat-consultation-checkout
    env="production"
    api-key="<your-api-key>"
    token="<your-token>"
    professional-hash="<professional-hash>"
    locale="es_ES"
  ></mq-chat-consultation-checkout>
</mq-theme-provider>

This component has a second happy path: a patient already entitled to consult that professional for free is not charged, no portal is rendered, and it emits consultation-granted instead of payment-success. Listen for both.

See the <mq-chat-consultation-checkout> reference for every attribute and event.

Charge for a custom session

Create the session on your backend and return it from a provideSession callback. The component handles the portal, polling, and retries.

<mq-theme-provider theme="mediquo">
  <mq-checkout id="checkout" env="production" api-key="<your-api-key>" token="<your-token>"></mq-checkout>
</mq-theme-provider>

<script type="module">
  const checkout = document.getElementById("checkout");

  // Called on the initial load and again on every retry.
  checkout.provideSession = async () => {
    const res = await fetch("https://your-backend.example/payments", { method: "POST" });
    return res.json(); // { sessionId, paymentUrl }
  };
</script>

See the <mq-checkout> reference for the full provideSession contract.

Handle the outcome

The components emit the same outcome events, so your success and failure handling is identical regardless of which one you use — only the success detail shape changes.

checkout.addEventListener("payment-success", (e) => {
  // e.detail.appointmentId  for mq-appointment-checkout
  // e.detail.videoCallId    for mq-immediate-videocall-checkout
  // e.detail.consultationId for mq-chat-consultation-checkout
  // e.detail.reference      for mq-checkout
  console.log("paid", e.detail);
});

Retries are automatic — when the portal asks to try again, the component requests a fresh session on its own. You don't need to handle payment-retry.