Handle events

Your integration could be considered complete now that you have the feature loaded on the page. However, there’s more you can do to create a seamless user experience.

Fullscript Embed fires events when actions happen that your app may want to know about. For example, an event is fired when a practitioner finishes creating a treatment plan for a patient. The event includes data about the treatment plan that your app can store. When receiving this event, you’ll also know the user is done with the feature and you can choose to unmount it.

Lab practitioner-pay checkout is different. It fires order.checkoutStarted (Fullscript Embed 3.3.0 or later) while the plan is still a draft and before anything is charged. Supplement practitioner-pay checkout still fires treatmentPlan.activated.

fyi

Unmounting is optional. It removes the feature from your page, but you can also leave it there, or navigate away if that makes sense for your use case.

Take a moment to review the available events for your feature.

Begin listening for events

To listen for the events fired by the embedded feature, subscribe with platformFeature.on().

Listen for patient.selected (event)

Create a function to call when the patient.selected event is triggered. Connect this to the event with platformFeature.on().

function handlePatientSelected(data) {
  console.log("data", data);
  // Use this as an opportunity to save the Fullscript patient id,
  // unmount the feature, change page etc
}

platformFeature.on("patient.selected", handlePatientSelected);
Copy

Or, use TypeScript (if using NPM version) to add the EventListener:

const handlePatientSelected = (data: EventListenerPayload<"patient.selected">) => {
  console.log(data);
  // Use this as an opportunity to save the Fullscript patient id,
  // unmount the feature, change page etc
};
Copy

Listen for treatmentPlan.activated (event)

Create a function to call when the treatmentPlan.activated event is triggered. Connect this to the event with platformFeature.on().

function handleTreatmentPlanActivated(data) {
  console.log("data", data);
  // Use this as an opportunity to store data about the plan,
  // unmount the feature, change page etc
}

platformFeature.on("treatmentPlan.activated", handleTreatmentPlanActivated);
Copy

Alternately, use TypeScript (if using NPM version):

const handleTreatmentPlanActivated = (data: EventListenerPayload<"treatmentPlan.activated">) => {
  console.log("data", data);
  // Use this as an opportunity to store data about the plan,
  // unmount the feature, change page etc
};
Copy

Listen for order.checkoutStarted (event)

Create a function to call when the order.checkoutStarted event is triggered. Connect this to the event with platformFeature.on().

This event is for lab practitioner-pay checkout only, and requires Fullscript Embed 3.3.0 or later. The plan is still a draft and nothing has been charged. Save data.data.order.id and match it to the later order.placed webhook.

function handleOrderCheckoutStarted(data) {
  const orderId = data.data.order.id;
  console.log("order id", orderId);
  // Match orderId to the later order.placed webhook.
  // The plan is still a draft and nothing has been charged.
}

platformFeature.on("order.checkoutStarted", handleOrderCheckoutStarted);
Copy

Or, use TypeScript (if using NPM version):

const handleOrderCheckoutStarted = (data: EventListenerPayload<"order.checkoutStarted">) => {
  const orderId = data.data.order.id;
  console.log("order id", orderId);
  // Match orderId to the later order.placed webhook.
  // The plan is still a draft and nothing has been charged.
};
Copy

Stop listening for events

If desired, you can also stop listening to an event:

platformFeature.off("treatmentPlan.activated", handleTreatmentPlanActivated);

platformFeature.off("patient.selected", handlePatientSelected);

platformFeature.off("order.checkoutStarted", handleOrderCheckoutStarted);
Copy