Package purchase widget
window.MedosPackagePurchase — sell a multi-session package on its own page, outside the booking flow.
The package purchase widget sells a session package on its own — a block of consultations a patient buys up front and redeems later. Once a package is active, the booking widget offers it at the summary step instead of charging for the appointment.
This is the smallest of the four widgets, and the least configurable. It mounts inline, takes a container and a key, and drives its own three-step flow.
<script src="https://widgets.medos.one/v2/packages.js"></script>
<div id="medos-packages"></div>
<script>
MedosPackagePurchase.init({
apiKey: "mk_your_publishable_key",
containerId: "medos-packages",
});
</script>The bundle is self-contained and exposes one global,
window.MedosPackagePurchase, with a single init() method.
Install › CDN covers deferring the tag
and loading it on demand.
The flow
Choose a package — the packages configured on your workspace, with session count, validity, price, and any discount.
Verify contact — name, email, country code and phone number, then a six-digit code sent to the phone. Resend is rate-limited to once every 30 seconds.
Payment — pay at clinic. The package is activated and recorded against the patient.
Done — a confirmation screen that resets itself back to step one after five seconds.
Online payment is disabled in this release
The payment step shows Pay online as a visibly disabled option and only lets the patient continue with Pay at clinic. The money is collected at the desk; the package is active immediately either way. This is a limitation of the package widget specifically — the booking widget does take online payment, see Online payment.
Phone verification only
Unlike the booking widget and the patient portal, this widget verifies on a
phone number and has no email channel. otpChannels is not accepted here.
Try it
Configure it below and copy the snippet. The playground has no appearance controls for this widget, but it does accept the theming options.
Package purchase
Sells a session package. Inline only, no theming, and `init()` is the only method.
window.MedosPackagePurchase
Custom theme
The package widget takes no theme options at all — it renders with the default theme. Colour and font controls would generate config it ignores, so they aren't offered here.
View
Inline only. This widget has no mode option and no open() — to show it in a dialog, put its container inside your own.
Sizes the preview frame only. This widget takes no maxHeight, so the value never reaches the snippet.
<div id="medos-packages" style="min-height: 600px"></div>
<script src="https://widgets.medos.one/v2/packages.js"></script>
<script>
MedosPackagePurchase.init({
apiKey: "mk_your_publishable_key",
containerId: "medos-packages",
onComplete: () => console.log("Closed by patient"),
});
</script>`onComplete` is not a 'purchase succeeded' callback
Passing onComplete adds a Close button to the confirmation screen and
fires when the patient clicks it. Use it to dismiss your own surrounding UI —
not to record the sale. See onComplete.
Mounting it on demand
Because init() mounts immediately and there's no close(), mount it when the
container exists and clear the container yourself to tear it down:
const host = document.getElementById("medos-packages");
function openPackages() {
host.innerHTML = "";
MedosPackagePurchase.init({
apiKey: "mk_your_publishable_key",
containerId: "medos-packages",
onComplete: () => {
host.innerHTML = "";
},
});
}Packages the patient already has
This widget only sells packages. To let a patient see the session credits they already hold — how many remain and when they expire — embed the patient portal, which shows them on its wallet card. Redemption happens inside the booking widget.
In this section
Enquiry form errors
How MedosEnquiry reports failures — config mistakes that throw, start-up and submission failures that reach onError, and inline field validation.
Configure the package purchase widget
The MedosPackagePurchase init method, every option with its type, the onComplete handler, and the PackageWidgetOptions TypeScript type.