Skip to main content
PrescriptionForm is a structured data-entry widget for creating and editing medication prescriptions. Clinicians can search for medications by RxNorm code, fill in dosage instructions, set refill quantities, toggle generic substitution, and add pharmacist notes — all from within your React application. Every submission is routed through a backend proxy that you control, keeping your API key off the browser.
Never expose your ClinikAPI API key in client-side code. The PrescriptionForm widget sends all data to your proxyUrl. Your backend proxy validates the input and calls ClinikAPI with your secret key.

​
Props

​
props.proxyUrl
string
required
URL of your backend proxy endpoint. The widget sends GET requests to load an existing prescription for editing and POST requests to create a new one. Supply a prescription-specific path (e.g. /api/clinik/prescriptions/rx-id) to load an existing record.
​
props.className
string
CSS class name applied to the widget’s root element for layout and theming control.
​
props.onError
(error: Error) => void
Callback invoked when a fetch or submission request to your proxy fails. Use this to surface error messages to the clinician.

​
Proxy setup

Your proxy endpoint needs to handle POST requests to create prescriptions. Add a GET handler if you want to support loading an existing prescription for editing: 
// app/api/clinik/prescriptions/route.ts
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

// POST: create a new prescription
export async function POST(req: Request) {
  const body = await req.json();
  const { data } = await clinik.prescriptions.create(body);

  return Response.json(data);
}
For editing an existing prescription, add a dynamic route: 
// app/api/clinik/prescriptions/[id]/route.ts
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

export async function GET(
  req: Request,
  { params }: { params: { id: string } }
) {
  const { data } = await clinik.prescriptions.read(params.id);
  return Response.json(data);
}

export async function PATCH(
  req: Request,
  { params }: { params: { id: string } }
) {
  const body = await req.json();
  const { data } = await clinik.prescriptions.update(params.id, body);
  return Response.json(data);
}
Restrict your POST handler to authenticated clinicians with prescribing authority. Your proxy is the right place to enforce this — check the user’s role before calling ClinikAPI.

​
Usage

import { PrescriptionForm } from '@clinikapi/react';

// Create a new prescription
export default function NewPrescriptionPage() {
  return (
    <PrescriptionForm
      proxyUrl="/api/clinik/prescriptions"
      onError={(err) => console.error('Prescription form error:', err)}
    />
  );
}

// Edit an existing prescription
export default function EditPrescriptionPage({ rxId }: { rxId: string }) {
  return (
    <PrescriptionForm
      proxyUrl={`/api/clinik/prescriptions/${rxId}`}
      onError={(err) => console.error('Prescription form error:', err)}
    />
  );
}

​
Features

  • Medication search with RxNorm code lookup
  • Structured dosage input: dose amount, frequency, and route of administration
  • Refill and supply fields: quantity and days supply
  • Substitution toggle: allow or disallow generic substitution
  • Pharmacist notes: free-text instructions for the dispensing pharmacist
The form submits a FHIR MedicationRequest resource. All fields map to standard FHIR elements, so data is immediately interoperable with other systems that consume ClinikAPI data.