Configure the package purchase widget
The MedosPackagePurchase init method, every option with its type, the onComplete handler, and the PackageWidgetOptions TypeScript type.
The smallest surface of the four widgets: a key, a container, theming, and one handler. Want to try it before writing code? Use the playground.
init(options)
MedosPackagePurchase.init(options: PackageWidgetOptions): voidMounts the purchase flow into containerId immediately. This is the only
method — there is no open() and no close(), because there is no modal mode.
Required: apiKey, containerId.
To show it in a dialog, bring your own
Put the container inside your own modal and call init() when you open it.
Because there is no close(), tear it down by clearing the container's HTML
yourself — see Mounting it on demand.
Options
Core
| Option | Type | Required | Description |
|---|---|---|---|
apiKey | string | Yes | Your Medos publishable key. See API keys. |
containerId | string | Yes | DOM id of the element to mount into. |
baseUrl | string | No | Override the API endpoint. Leave it unset — the production endpoint is compiled into the bundle. |
onComplete | () => void | No | A button handler, not a purchase event. See onComplete. |
Appearance
The package widget takes the same theming options as every other Medos widget.
| Option | Type | Default | Description |
|---|---|---|---|
theme | "default" | "modern" | MedosTheme | PartialTheme | "default" | Built-in name, full theme object, or partial override. See Theming. |
primaryColor | string | From theme | Brand colour. Hover and active shades are derived automatically. |
secondaryColor | string | From theme | Secondary brand colour. |
borderRadius | string | number | From theme | Corner radius. A number means px. |
fontFamily | string | From theme | CSS font stack applied across the widget. |
fontUrl | string | — | Stylesheet URL (e.g. Google Fonts) loaded so fontFamily resolves. |
fontSize | "small" | "medium" | "large" | "medium" | Scales every font size proportionally. |
Not accepted
There is no mode (inline only), no maxWidth or maxHeight, no
otpChannels, and no onError.
Phone verification only
Unlike the booking widget and the patient portal, this widget verifies on a
phone number and has no email channel — which is why otpChannels is not part
of its config.
onComplete
onComplete?: () => voidPassing onComplete adds a Close button to the confirmation screen and
fires when the patient clicks it.
`onComplete` is not a 'purchase succeeded' callback
A patient who lets the five-second countdown run out, or who clicks Book Another, never triggers it. Use it to dismiss your own surrounding UI — not to record the sale, redirect, or fire a conversion event. There is no client-side event that reliably marks a completed purchase; read the sale from your backend instead.
PackageWidgetOptions type
interface PackageWidgetOptions {
/** Required. Your publishable key. */
apiKey: string;
/** Required. DOM id of the mount element. There is no modal mode. */
containerId: string;
/** Override the API endpoint. Leave unset in production. */
baseUrl?: string;
// appearance
theme?: "default" | "modern" | MedosTheme | PartialTheme;
primaryColor?: string;
secondaryColor?: string;
borderRadius?: string | number;
fontFamily?: string;
fontUrl?: string;
fontSize?: "small" | "medium" | "large";
/** A Close-button handler on the confirmation screen — not a sale event. */
onComplete?: () => void;
}Package purchase widget
window.MedosPackagePurchase — sell a multi-session package on its own page, outside the booking flow.
Package purchase widget errors
The package purchase widget logs failures to the console instead of throwing or calling back — what it logs, and how to guard for a missing container.