Migrate from Elements

Photon Elements will be deprecated on January 1, 2027, and fully sunset by mid-2027. Migrate to Prescribe before then.

Prescribe replaces Photon Elements (@photonhealth/elements, with <photon-client> and <photon-prescribe-workflow>). It covers the same prescribing workflow, runs on the Network API, and lets the patient choose their pharmacy by default. Most migrations change one component. Patients you synced before keep their pat_… ids.

1. Choose how to add Prescribe

Your frontend	Use
React	Prescribe’s React components
Angular, Vue, or anything else	Prescribe’s iframe, with its URL built by the JavaScript client
A link from another tool	A deep link, which replaces the `/prescriptions/new` link

2. Replace the client

<photon-client id="YOUR_CLIENT_ID" org="YOUR_ORG_ID" dev-mode="true" redirect-uri="https://example.com">
  <photon-prescribe-workflow patient-id="pat_01M3WQQHRB1T0K1469KD18BAWX" />
</photon-client>

<PhotonProvider clientId="YOUR_CLIENT_ID" organization="YOUR_ORG_ID" environment="neutron">
  <PhotonOrder patient="pat_01M3WQQHRB1T0K1469KD18BAWX" />
</PhotonProvider>

`<photon-client>`	Prescribe
`id`	`clientId`. It’s the same Application credential.
`org`	`organization`
`dev-mode="true"`	`environment="neutron"`. Prescribe defaults to production.
`redirect-uri`, `redirect-path`	Not needed. Sign-in returns to the page it started on.
`auto-login`	Not needed. Prescribe signs in on its own when it can, and otherwise shows Sign in to Photon.

The iframe takes the same client_id in its URL. Build the URL with frame() from photon({ environment: "neutron", auth: { clientId: "YOUR_CLIENT_ID" }, organization: "YOUR_ORG_ID" }), and add https://rx.neutron.health to the credential’s allowed URLs, beside every domain that shows the iframe.

3. Replace the workflow

<photon-prescribe-workflow> becomes <PhotonOrder>. In an iframe, it becomes the URL from ph.order.frame(…), which takes the same records.

`<photon-prescribe-workflow>`	Prescribe
`patient-id`	`patient="pat_…"`, or `ph.order.frame({ patient: { id: "pat_…" } })` for an iframe. Prescribe takes Photon ids only. To pass your own patient to the React component, give their details (`patient={{ demographic: { … } }}`) and Photon matches them. An iframe URL carries ids only, so sync the patient from your backend first and pass the id.
`template-ids`	`order={{ patient: { id }, prescriptions: { add: [{ templateId: "…" }] } }}`
`prescription-ids`	`order={{ prescriptions: { add: [{ id: "rx_…" }] } }}`. Prescribe puts the draft itself on the order rather than copying it.
`initial-prescriptions`, `template-overrides`, `prescription-overrides`	Draft the prescriptions from your backend with the values you want (prescription sync), then pass their ids. See One-click orders.
`enable-order`, `enable-send-to-patient`	Always on. Sending texts the patient, who chooses their pharmacy.
`pharmacy-id`	Set the pharmacy on the draft order from your backend (`pharmacy`), then open the order by id
`external-order-id`	Set `externalId` on the order from your backend
`hide-patient-card`	`fixed` keeps the patient visible but removes Change patient

Events

Elements event	Prescribe
`photon-order-created`	`onSent(order)`, or the `PhotonOrder.onSent` message from an iframe
`photon-prescriptions-created`, `photon-draft-prescription-created`	`onOrder(order)`, which fires as each prescription is saved or signed. Read them from `order.prescriptions`. A standalone `PhotonPrescription` has `onPrescription(rx)` and `onSigned(rx)`.
`photon-prescriptions-error`, `photon-order-error`	No event. The card shows the error to the prescriber.

Prescribe events pass the live object: order.id and order.state. They don’t pass a raw GraphQL payload. For what happens after sending, use webhooks. They haven’t changed.

4. Replace deep links

Before	After
`app.neutron.health/prescriptions/new?patientId=pat_…`	`rx.neutron.health/order?patient=pat_…`
`…&templateIds=tmp_…`	Build the link with `ph.order.url({ patient: { id }, prescriptions: { add: [{ templateId }] } })`. See Deep links.

Not in Prescribe yet

These Elements features don’t have a Prescribe equivalent yet. If you rely on one, talk to your Photon contact before you migrate.

Prescriber-chosen pharmacy in the UI: enable-local-pickup, enable-delivery-pharmacies and mail-order-ids. Your backend can still set the pharmacy on a draft order.
Catalog limits: disable-list and allow-off-catalog-search
Coverage checks: enable-coverage-check. Benefits are coming to Prescribe as pharmacy offers.
Patient context in the workflow: weight, weight-unit, address, and the supervisor for an order
additional-notes, hide-templates and hide-submit
Recent prescriptions: <photon-med-history>, enable-med-history* and enable-combine-and-duplicate
Opening a patient by your own external id

​1. Choose how to add Prescribe

​2. Replace the client

​3. Replace the workflow

​Events

​4. Replace deep links

​Not in Prescribe yet

1. Choose how to add Prescribe

2. Replace the client

3. Replace the workflow

Events

4. Replace deep links

Not in Prescribe yet