@pradip1995/segment-jewelry-checkout-form 0.1.1

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@pradip1995/segment-jewelry-checkout-form",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./src/jewelry-checkout-form.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts",
+    "./payment-block": "./src/payment-block.tsx"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "@medusajs/types": "^2.8.0",
+    "@pradip1995/segment-analytics": "^0.2.2",
+    "@pradip1995/segment-primitives": "^0.4.2",
+    "@pradip1995/segment-tokens": "^0.3.7"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/address-fields.tsx

@@ -0,0 +1,495 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { SplitPhoneInput } from "@pradip1995/commerce-core/components/split-phone-input"
+import { updateAddressSilently } from "@pradip1995/commerce-core/client/actions/cart"
+import { useShiprocketDeliveryEstimate } from "@pradip1995/commerce-core/hooks/use-shiprocket-delivery-estimate"
+import {
+  CHECKOUT_SYNC_EVENTS,
+  dispatchCheckoutSyncEvent,
+} from "@pradip1995/commerce-core/util/checkout-sync-events"
+import { isValidEmail, isValidIndianPhone, toFormPhoneValue } from "@pradip1995/commerce-core/util/phone"
+import type { HttpTypes } from "@medusajs/types"
+import { useRouter } from "next/navigation"
+import DeliveryInfo from "./delivery-info"
+import FloatingInput from "./floating-input"
+import { fetchPincodeLocation } from "./pincode-location"
+
+export type CheckoutFormValues = {
+  fullName: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  address1: string
+  postalCode: string
+  city: string
+  province: string
+  countryCode: string
+}
+
+const NEW_ADDRESS_ID = "__new__"
+
+function splitFullName(fullName: string): { firstName: string; lastName: string } {
+  const trimmed = fullName.trim()
+  if (!trimmed) return { firstName: "", lastName: "." }
+  const parts = trimmed.split(/\s+/)
+  if (parts.length === 1) return { firstName: parts[0], lastName: "." }
+  return {
+    firstName: parts[0],
+    lastName: parts.slice(1).join(" ") || ".",
+  }
+}
+
+function formatAddressName(address: HttpTypes.StoreCustomerAddress): string {
+  return [address.first_name, address.last_name === "." ? "" : address.last_name]
+    .filter(Boolean)
+    .join(" ")
+    .trim()
+}
+
+function addressToFormValues(
+  address: HttpTypes.StoreCustomerAddress,
+  fallback?: Partial<CheckoutFormValues>
+): CheckoutFormValues {
+  const fullName = formatAddressName(address)
+  return {
+    fullName,
+    firstName: address.first_name || "",
+    lastName: address.last_name || ".",
+    email: fallback?.email || "",
+    phone: toFormPhoneValue(address.phone || fallback?.phone),
+    address1: address.address_1 || "",
+    postalCode: address.postal_code || "",
+    city: address.city || "",
+    province: address.province || "",
+    countryCode: address.country_code || fallback?.countryCode || "in",
+  }
+}
+
+function pickPreferredAddress(
+  customer?: HttpTypes.StoreCustomer | null
+): HttpTypes.StoreCustomerAddress | undefined {
+  const addresses = customer?.addresses ?? []
+  return (
+    addresses.find((a) => a.is_default_shipping) ||
+    addresses.find(
+      (a) =>
+        a.is_default_billing ||
+        a.metadata?.is_default === true ||
+        a.metadata?.is_default === "true"
+    ) ||
+    addresses[0]
+  )
+}
+
+function findMatchingSavedAddress(
+  cart: HttpTypes.StoreCart | undefined,
+  addresses: HttpTypes.StoreCustomerAddress[]
+): HttpTypes.StoreCustomerAddress | undefined {
+  const shipping = cart?.shipping_address
+  if (!shipping?.address_1 || !addresses.length) return undefined
+
+  return addresses.find(
+    (address) =>
+      (address.address_1 || "").trim().toLowerCase() ===
+        (shipping.address_1 || "").trim().toLowerCase() &&
+      (address.postal_code || "") === (shipping.postal_code || "") &&
+      (address.city || "").trim().toLowerCase() === (shipping.city || "").trim().toLowerCase()
+  )
+}
+
+function buildInitialValues(
+  cart?: HttpTypes.StoreCart,
+  customer?: HttpTypes.StoreCustomer | null
+): CheckoutFormValues {
+  const shipping = cart?.shipping_address
+  const preferred = !shipping?.address_1 ? pickPreferredAddress(customer) : undefined
+  const source = shipping?.address_1 ? shipping : preferred
+
+  const fullName = source?.first_name
+    ? `${source.first_name} ${source.last_name === "." ? "" : source.last_name || ""}`.trim()
+    : customer?.first_name
+      ? `${customer.first_name} ${customer.last_name || ""}`.trim()
+      : ""
+
+  return {
+    fullName,
+    firstName: source?.first_name || customer?.first_name || "",
+    lastName: source?.last_name || customer?.last_name || "",
+    email: cart?.email || customer?.email || "",
+    phone: toFormPhoneValue(source?.phone || customer?.phone),
+    address1: source?.address_1 || "",
+    postalCode: source?.postal_code || "",
+    city: source?.city || "",
+    province: source?.province || "",
+    countryCode:
+      source?.country_code || cart?.region?.countries?.[0]?.iso_2 || "in",
+  }
+}
+
+function resolveInitialSelectedId(
+  cart?: HttpTypes.StoreCart,
+  customer?: HttpTypes.StoreCustomer | null
+): string {
+  const addresses = customer?.addresses ?? []
+  if (!addresses.length) return NEW_ADDRESS_ID
+
+  const matched = findMatchingSavedAddress(cart, addresses)
+  if (matched?.id) return matched.id
+
+  if (!cart?.shipping_address?.address_1) {
+    const preferred = pickPreferredAddress(customer)
+    if (preferred?.id) return preferred.id
+  }
+
+  return NEW_ADDRESS_ID
+}
+
+type AddressFieldsProps = {
+  cart: HttpTypes.StoreCart
+  customer?: HttpTypes.StoreCustomer | null
+  onValuesChange?: (values: CheckoutFormValues) => void
+}
+
+export default function AddressFields({ cart, customer, onValuesChange }: AddressFieldsProps) {
+  const router = useRouter()
+  const savedAddresses = customer?.addresses ?? []
+  const [values, setValues] = useState(() => buildInitialValues(cart, customer))
+  const [selectedAddressId, setSelectedAddressId] = useState(() =>
+    resolveInitialSelectedId(cart, customer)
+  )
+  const [phoneError, setPhoneError] = useState(false)
+  const [isSyncingPincode, setIsSyncingPincode] = useState(false)
+  const [isSelectingAddress, setIsSelectingAddress] = useState(false)
+  const lastPincodeSyncRef = useRef("")
+  const didPrefillDefaultRef = useRef(false)
+
+  const firstVariantId = cart.items?.[0]?.variant_id ?? null
+  const { deliveryEstimate, formatDeliveryDate, fallbackDeliveryDate } =
+    useShiprocketDeliveryEstimate({
+      postalCode: values.postalCode,
+      variantId: firstVariantId,
+      cartMetadata: cart.metadata,
+    })
+
+  useEffect(() => {
+    onValuesChange?.(values)
+  }, [values, onValuesChange])
+
+  useEffect(() => {
+    if (didPrefillDefaultRef.current) return
+    if (cart.shipping_address?.address_1) return
+    if (selectedAddressId === NEW_ADDRESS_ID) return
+
+    const selected = savedAddresses.find((address) => address.id === selectedAddressId)
+    if (!selected) return
+
+    didPrefillDefaultRef.current = true
+    void applySavedAddress(selected, { refresh: true })
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- run once on mount for default address prefill
+  }, [])
+
+  const updateField = (key: keyof CheckoutFormValues, next: string) => {
+    setSelectedAddressId(NEW_ADDRESS_ID)
+    setValues((prev) => {
+      const updated = { ...prev, [key]: next }
+      if (key === "fullName") {
+        const { firstName, lastName } = splitFullName(next)
+        updated.firstName = firstName
+        updated.lastName = lastName
+      }
+      return updated
+    })
+  }
+
+  const syncAddressToCart = async (
+    nextValues: CheckoutFormValues,
+    options?: { assignShipping?: boolean }
+  ) => {
+    const result = await updateAddressSilently({
+      email: nextValues.email || undefined,
+      shipping_address: {
+        first_name: nextValues.firstName,
+        last_name: nextValues.lastName,
+        address_1: nextValues.address1,
+        postal_code: nextValues.postalCode,
+        city: nextValues.city,
+        province: nextValues.province,
+        country_code: nextValues.countryCode || "in",
+        phone: nextValues.phone,
+      },
+      same_as_billing: true,
+      assignShipping: options?.assignShipping !== false,
+    })
+
+    if (result?.success) {
+      lastPincodeSyncRef.current = `${nextValues.postalCode}|${nextValues.city}|${nextValues.province}`
+      dispatchCheckoutSyncEvent(CHECKOUT_SYNC_EVENTS.ADDRESS_UPDATED_SILENT, {
+        syncType: "shipping",
+      })
+    }
+
+    return result
+  }
+
+  const applySavedAddress = async (
+    address: HttpTypes.StoreCustomerAddress,
+    options?: { refresh?: boolean }
+  ) => {
+    const nextValues = addressToFormValues(address, {
+      email: values.email || cart.email || customer?.email || "",
+      phone: values.phone || customer?.phone,
+      countryCode: values.countryCode,
+    })
+
+    setSelectedAddressId(address.id!)
+    setValues(nextValues)
+    setIsSelectingAddress(true)
+
+    try {
+      const result = await syncAddressToCart(nextValues)
+      if (result?.success && options?.refresh !== false) {
+        router.refresh()
+      }
+    } finally {
+      setIsSelectingAddress(false)
+    }
+  }
+
+  const syncPincodeToCart = async (postalCode: string, city: string, province: string) => {
+    const syncKey = `${postalCode}|${city}|${province}`
+    if (lastPincodeSyncRef.current === syncKey) return
+
+    setIsSyncingPincode(true)
+    try {
+      const result = await updateAddressSilently({
+        shipping_address: {
+          postal_code: postalCode,
+          city,
+          province,
+          country_code: values.countryCode || "in",
+        },
+        same_as_billing: true,
+        assignShipping: true,
+      })
+
+      if (result?.success) {
+        lastPincodeSyncRef.current = syncKey
+        dispatchCheckoutSyncEvent(CHECKOUT_SYNC_EVENTS.ADDRESS_UPDATED_SILENT, {
+          syncType: "shipping",
+        })
+        router.refresh()
+      }
+    } finally {
+      setIsSyncingPincode(false)
+    }
+  }
+
+  const handlePostalCodeChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const sanitized = e.target.value.replace(/\D/g, "").slice(0, 6)
+    updateField("postalCode", sanitized)
+
+    if (sanitized.length !== 6) {
+      lastPincodeSyncRef.current = ""
+      return
+    }
+
+    const location = await fetchPincodeLocation(sanitized)
+    const city = location?.city || values.city
+    const province = location?.province || values.province
+
+    setValues((prev) => ({
+      ...prev,
+      postalCode: sanitized,
+      city: location?.city || prev.city,
+      province: location?.province || prev.province,
+    }))
+
+    await syncPincodeToCart(sanitized, city, province)
+  }
+
+  const handleSelectNewAddress = () => {
+    setSelectedAddressId(NEW_ADDRESS_ID)
+  }
+
+  return (
+    <div className="checkout-page__form space-y-4">
+      {savedAddresses.length > 0 && (
+        <div className="space-y-3">
+          <p className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted">
+            Saved addresses
+          </p>
+          <ul className="space-y-2">
+            {savedAddresses.map((address) => {
+              const isSelected = selectedAddressId === address.id
+              const isDefault = !!(address.is_default_shipping || address.is_default_billing)
+              const label = formatAddressName(address) || "Saved address"
+              const line = [
+                address.address_1,
+                [address.city, address.province, address.postal_code].filter(Boolean).join(", "),
+              ]
+                .filter(Boolean)
+                .join(" · ")
+
+              return (
+                <li key={address.id}>
+                  <button
+                    type="button"
+                    onClick={() => applySavedAddress(address)}
+                    disabled={isSelectingAddress}
+                    aria-pressed={isSelected}
+                    className={[
+                      "w-full text-left rounded-lg border px-4 py-3 transition-colors duration-200",
+                      "disabled:opacity-60",
+                      isSelected
+                        ? "border-brand-accent bg-brand-accent/5"
+                        : "border-cart-border hover:border-brand-accent/50",
+                    ].join(" ")}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0 space-y-1">
+                        <p className="text-sm font-semibold text-heading truncate">{label}</p>
+                        <p className="text-xs text-muted leading-relaxed">{line}</p>
+                        {isDefault && (
+                          <p className="text-xs text-brand-accent font-medium">Default</p>
+                        )}
+                      </div>
+                      <span
+                        className={[
+                          "mt-1 size-4 shrink-0 rounded-full border",
+                          isSelected
+                            ? "border-brand-accent bg-brand-accent"
+                            : "border-cart-border bg-surface",
+                        ].join(" ")}
+                        aria-hidden
+                      />
+                    </div>
+                  </button>
+                </li>
+              )
+            })}
+            <li>
+              <button
+                type="button"
+                onClick={handleSelectNewAddress}
+                aria-pressed={selectedAddressId === NEW_ADDRESS_ID}
+                className={[
+                  "w-full text-left rounded-lg border px-4 py-3 transition-colors duration-200",
+                  selectedAddressId === NEW_ADDRESS_ID
+                    ? "border-brand-accent bg-brand-accent/5"
+                    : "border-cart-border hover:border-brand-accent/50",
+                ].join(" ")}
+              >
+                <p className="text-sm font-semibold text-heading">Use a new address</p>
+                <p className="text-xs text-muted mt-1">Enter shipping details below</p>
+              </button>
+            </li>
+          </ul>
+        </div>
+      )}
+
+      <FloatingInput
+        label="Full name"
+        name="shipping_address.full_name"
+        id="shipping_full_name_field"
+        value={values.fullName}
+        onChange={(e) => updateField("fullName", e.target.value)}
+        required
+        maxLength={60}
+      />
+      <input type="hidden" name="shipping_address.first_name" value={values.firstName} />
+      <input type="hidden" name="shipping_address.last_name" value={values.lastName} />
+
+      <FloatingInput
+        label="Address"
+        name="shipping_address.address_1"
+        id="shipping_address_1_field"
+        value={values.address1}
+        onChange={(e) => updateField("address1", e.target.value)}
+        required
+      />
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <FloatingInput
+          label="Postal code"
+          name="shipping_address.postal_code"
+          id="shipping_postal_code_field"
+          value={values.postalCode}
+          onChange={handlePostalCodeChange}
+          required
+          maxLength={6}
+        />
+        <FloatingInput
+          label="City"
+          name="shipping_address.city"
+          id="shipping_city_field"
+          value={values.city}
+          onChange={(e) => updateField("city", e.target.value)}
+          required
+        />
+        <FloatingInput
+          label="State / Province"
+          name="shipping_address.province"
+          id="shipping_province_field"
+          value={values.province}
+          onChange={(e) => updateField("province", e.target.value)}
+          required
+        />
+      </div>
+
+      <input type="hidden" name="shipping_address.country_code" value={values.countryCode} />
+      <input type="hidden" name="same_as_billing" value="on" />
+
+      <DeliveryInfo
+        postalCode={values.postalCode}
+        city={values.city}
+        province={values.province}
+        shippingTotal={cart.shipping_total}
+        currencyCode={cart.currency_code}
+        deliveryEstimate={deliveryEstimate}
+        formatDeliveryDate={formatDeliveryDate}
+        fallbackDeliveryDate={fallbackDeliveryDate}
+        isSyncing={isSyncingPincode || isSelectingAddress}
+      />
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <FloatingInput
+          label="Email"
+          name="email"
+          id="shipping_email_field"
+          type="email"
+          value={values.email}
+          onChange={(e) => updateField("email", e.target.value)}
+          required
+        />
+        <SplitPhoneInput
+          value={values.phone}
+          onChange={(phone) => {
+            updateField("phone", phone)
+            if (isValidIndianPhone(phone)) setPhoneError(false)
+          }}
+          label="Phone"
+          required
+          error={phoneError}
+          numberInputId="shipping_phone_field"
+          hiddenInputId="shipping_phone_field_internal"
+          hiddenInputName="shipping_address.phone"
+        />
+      </div>
+
+      <input
+        type="hidden"
+        name="__phone_valid"
+        value={isValidIndianPhone(values.phone) ? "1" : "0"}
+      />
+      <input
+        type="hidden"
+        name="__email_valid"
+        value={isValidEmail(values.email) ? "1" : "0"}
+      />
+    </div>
+  )
+}
+
+export { splitFullName, isValidIndianPhone, isValidEmail }

package/src/delivery-info.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import type { ShiprocketDeliveryEstimate } from "@pradip1995/commerce-core/util/shiprocket"
+
+type DeliveryInfoProps = {
+  postalCode: string
+  city: string
+  province: string
+  shippingTotal?: number | null
+  currencyCode?: string
+  deliveryEstimate?: ShiprocketDeliveryEstimate
+  formatDeliveryDate?: (etd?: string | null) => string
+  fallbackDeliveryDate?: () => string
+  isSyncing?: boolean
+}
+
+export default function DeliveryInfo({
+  postalCode,
+  city,
+  province,
+  shippingTotal,
+  currencyCode = "inr",
+  isSyncing,
+}: DeliveryInfoProps) {
+  if (postalCode.length !== 6) return null
+
+  return (
+    <div className="checkout-delivery-info">
+      <div className="checkout-delivery-info__head">
+        <span className="checkout-delivery-info__title">Delivery details</span>
+        {(city || province) && (
+          <span className="checkout-delivery-info__location">
+            {[city, province].filter(Boolean).join(", ")}
+          </span>
+        )}
+      </div>
+
+      <div className="checkout-delivery-info__rows">
+        <div className="checkout-delivery-info__row">
+          <span className="checkout-delivery-info__label">Pincode</span>
+          <span className="checkout-delivery-info__value">{postalCode}</span>
+        </div>
+
+        <div className="checkout-delivery-info__row">
+          <span className="checkout-delivery-info__label">Shipping charge</span>
+          <span className="checkout-delivery-info__value checkout-delivery-info__value--accent">
+            {isSyncing ? (
+              <span className="checkout-delivery-info__loading">Calculating…</span>
+            ) : shippingTotal != null && shippingTotal > 0 ? (
+              formatPrice(shippingTotal, currencyCode)
+            ) : shippingTotal === 0 ? (
+              "Free"
+            ) : (
+              "—"
+            )}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/floating-input.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+type FloatingInputProps = {
+  label: string
+  name: string
+  id?: string
+  type?: string
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  required?: boolean
+  maxLength?: number
+  autoComplete?: string
+  readOnly?: boolean
+  className?: string
+}
+
+export default function FloatingInput({
+  label,
+  name,
+  id,
+  type = "text",
+  value,
+  onChange,
+  required,
+  maxLength,
+  autoComplete = "off",
+  readOnly,
+  className = "",
+}: FloatingInputProps) {
+  const inputId = id || name
+
+  return (
+    <div className={`checkout-field ${className}`.trim()}>
+      <input
+        type={type}
+        id={inputId}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        maxLength={maxLength}
+        autoComplete={autoComplete}
+        readOnly={readOnly}
+        placeholder=" "
+        className="checkout-field__input peer"
+      />
+      <label htmlFor={inputId} className="checkout-field__label">
+        {label}
+        {required && <span className="text-red-500">*</span>}
+      </label>
+    </div>
+  )
+}

package/src/hosted-checkout.ts

@@ -0,0 +1,278 @@
+"use client"
+
+import {
+  initiatePaymentSession,
+  placeOrder,
+  retrieveCart,
+} from "@pradip1995/commerce-core/client/actions/cart"
+import {
+  findPaymentSession,
+  getPaymentButtonLabel,
+  getPaymentGatewayKind,
+  getProviderInitAttempts,
+} from "@pradip1995/commerce-core/util/payment-providers"
+import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
+import type { HttpTypes } from "@medusajs/types"
+
+type CartLike = HttpTypes.StoreCart & {
+  payment_collection?: {
+    payment_sessions?: HttpTypes.StorePaymentSession[]
+  } | null
+}
+
+const CART_PAYMENT_FIELDS =
+  "*payment_collection,*payment_collection.payment_sessions,*shipping_address,*billing_address,*shipping_methods,email,+total"
+
+async function retrieveCartWithPayments(cartId: string): Promise<CartLike | null> {
+  return (await retrieveCart(cartId, CART_PAYMENT_FIELDS)) as CartLike | null
+}
+
+async function initiatePaymentSessionWithFallback(
+  cart: CartLike,
+  providerId: string
+): Promise<CartLike> {
+  const attempts = getProviderInitAttempts(providerId)
+  let lastError: unknown
+
+  for (const attemptId of attempts) {
+    try {
+      await initiatePaymentSession(cart, { provider_id: attemptId })
+      const fresh = await retrieveCartWithPayments(cart.id)
+      if (fresh) return fresh
+    } catch (error) {
+      lastError = error
+    }
+  }
+
+  if (lastError instanceof Error) {
+    throw lastError
+  }
+
+  throw new Error(`Could not initialize ${getPaymentButtonLabel(providerId)}`)
+}
+
+function loadScript(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      resolve()
+      return
+    }
+
+    const script = document.createElement("script")
+    script.src = src
+    script.onload = () => resolve()
+    script.onerror = () => reject(new Error(`Failed to load ${src}`))
+    document.body.appendChild(script)
+  })
+}
+
+async function openRazorpayCheckout(options: {
+  cart: CartLike
+  session: HttpTypes.StorePaymentSession
+  shopName?: string
+  onDismiss?: () => void
+}): Promise<void> {
+  const { cart, session, shopName = "Store", onDismiss } = options
+  const data = (session.data ?? {}) as Record<string, unknown>
+  const orderId =
+    (data.razorpay_order_id as string | undefined) ||
+    (data.order_id as string | undefined) ||
+    (typeof data.id === "string" && data.id.startsWith("order_") ? data.id : undefined)
+  const razorpayKey =
+    process.env.NEXT_PUBLIC_RAZORPAY_KEY?.trim() ||
+    (typeof data.key_id === "string" ? data.key_id.trim() : "")
+
+  if (!razorpayKey) {
+    throw new Error(
+      "Razorpay key is missing. Set NEXT_PUBLIC_RAZORPAY_KEY (same as RAZORPAY_KEY_ID) in storefront env."
+    )
+  }
+
+  if (!orderId) {
+    throw new Error(
+      "Razorpay order was not created. Check RAZORPAY_KEY_ID / RAZORPAY_KEY_SECRET on the Medusa backend."
+    )
+  }
+
+  await loadScript("https://checkout.razorpay.com/v1/checkout.js")
+
+  const razorpayOptions = {
+    key: razorpayKey,
+    amount: session.amount,
+    order_id: orderId,
+    currency: (cart.currency_code ?? "inr").toUpperCase(),
+    name: shopName,
+    description: "Secure checkout for your order",
+    handler: async () => {
+      await placeOrder().catch((err: Error) => {
+        if (isNextRedirect(err)) throw err
+        throw err
+      })
+    },
+    prefill: {
+      name: `${cart.billing_address?.first_name || ""} ${cart.billing_address?.last_name || ""}`.trim(),
+      email: cart.email,
+      contact: cart.shipping_address?.phone || cart.billing_address?.phone || undefined,
+    },
+    theme: { color: "var(--color-brand-accent, #8B5AB1)" },
+    modal: {
+      ondismiss: () => {
+        onDismiss?.()
+      },
+    },
+  }
+
+  const razorpay = new (window as any).Razorpay(razorpayOptions)
+  razorpay.on("payment.failed", () => {
+    onDismiss?.()
+  })
+  razorpay.open()
+}
+
+async function openCashfreeCheckout(options: {
+  session: HttpTypes.StorePaymentSession
+  onDismiss?: () => void
+}): Promise<void> {
+  const { session, onDismiss } = options
+  const paymentSessionId =
+    (session.data?.payment_session_id as string | undefined) ||
+    (session.data?.paymentSessionId as string | undefined)
+
+  if (!paymentSessionId) {
+    throw new Error(
+      "Cashfree session was not created. Check CASHFREE_CLIENT_ID / CASHFREE_CLIENT_SECRET on the Medusa backend and restart it."
+    )
+  }
+
+  await loadScript("https://sdk.cashfree.com/js/v3/cashfree.js")
+
+  const CashfreeCtor = (window as any).Cashfree
+  if (typeof CashfreeCtor !== "function") {
+    throw new Error("Cashfree SDK failed to load.")
+  }
+
+  const mode =
+    process.env.NEXT_PUBLIC_CASHFREE_ENVIRONMENT === "production" ? "production" : "sandbox"
+  const cashfree = CashfreeCtor({ mode })
+
+  const result = await cashfree.checkout({
+    paymentSessionId,
+    redirectTarget: "_modal",
+  })
+
+  if (result?.error) {
+    onDismiss?.()
+    throw new Error(result.error.message || "Cashfree payment was cancelled or failed.")
+  }
+
+  if (result?.paymentDetails || result?.redirect === false) {
+    await placeOrder().catch((err: unknown) => {
+      if (isNextRedirect(err)) throw err
+      throw err
+    })
+    return
+  }
+
+  // Redirect checkout: Cashfree navigates away; order is finalized on return.
+}
+
+export async function openHostedCheckout(options: {
+  cart: CartLike
+  providerId: string
+  shopName?: string
+  onDismiss?: () => void
+}): Promise<void> {
+  const { cart, providerId, shopName, onDismiss } = options
+  const kind = getPaymentGatewayKind(providerId)
+
+  const updatedCart = await initiatePaymentSessionWithFallback(cart, providerId)
+  const session = findPaymentSession(updatedCart, providerId) as
+    | HttpTypes.StorePaymentSession
+    | undefined
+
+  if (!session) {
+    throw new Error(`Could not initialize ${getPaymentButtonLabel(providerId)}`)
+  }
+
+  if (kind === "razorpay") {
+    await openRazorpayCheckout({ cart: updatedCart, session, shopName, onDismiss })
+    return
+  }
+
+  if (kind === "cashfree") {
+    await openCashfreeCheckout({ session, onDismiss })
+    return
+  }
+
+  throw new Error(`Unsupported payment provider: ${providerId}`)
+}
+
+export async function placeCodOrder(options: {
+  cart: CartLike
+  providerId: string
+}): Promise<void> {
+  const { cart, providerId } = options
+
+  await initiatePaymentSessionWithFallback(cart, providerId)
+  await placeOrder().catch((err: unknown) => {
+    if (isNextRedirect(err)) throw err
+    throw err
+  })
+}
+
+export function partitionPaymentProviders(
+  providers: Array<{ id: string }> | null | undefined
+) {
+  const manual: Array<{ id: string }> = []
+  const hosted: Array<{ id: string }> = []
+
+  for (const provider of providers ?? []) {
+    const kind = getPaymentGatewayKind(provider.id)
+    if (kind === "manual") {
+      manual.push(provider)
+    } else if (kind === "razorpay" || kind === "cashfree") {
+      hosted.push(provider)
+    }
+  }
+
+  return { manual, hosted }
+}
+
+export function pickHostedPaymentProvider(
+  providers: Array<{ id: string }> | null | undefined
+): string | null {
+  const { hosted } = partitionPaymentProviders(providers)
+  const preferred = process.env.NEXT_PUBLIC_PAYMENT_PROVIDER?.trim().toLowerCase()
+
+  if (preferred === "razorpay") {
+    const razorpay = hosted.find((provider) => getPaymentGatewayKind(provider.id) === "razorpay")
+    if (razorpay) return razorpay.id
+  }
+
+  if (preferred === "cashfree") {
+    const cashfree = hosted.find((provider) => getPaymentGatewayKind(provider.id) === "cashfree")
+    if (cashfree) return cashfree.id
+  }
+
+  const cashfree = hosted.find((provider) => getPaymentGatewayKind(provider.id) === "cashfree")
+  if (cashfree) return cashfree.id
+
+  const razorpay = hosted.find((provider) => getPaymentGatewayKind(provider.id) === "razorpay")
+  if (razorpay) return razorpay.id
+
+  if (hosted.length > 0) return hosted[0].id
+
+  if (process.env.NEXT_PUBLIC_RAZORPAY_KEY) {
+    return "pp_razorpay_razorpay"
+  }
+
+  return null
+}
+
+export function pickManualPaymentProvider(
+  providers: Array<{ id: string }> | null | undefined
+): string | null {
+  const { manual } = partitionPaymentProviders(providers)
+  if (manual.length > 0) return manual[0].id
+  return "pp_system_default"
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/jewelry-checkout-form.css

@@ -0,0 +1,36 @@
+.jewelry-checkout-form {
+  height: 100%;
+}
+
+.jewelry-checkout-payment__btn {
+  min-height: 3.15rem;
+  border-radius: 0.5rem !important;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.jewelry-checkout-payment__btn--cod {
+  background: #ffffff !important;
+  color: #1a1224 !important;
+  border: 1px solid rgba(59, 31, 78, 0.28) !important;
+}
+
+.jewelry-checkout-payment__btn--cod:hover:not(:disabled) {
+  border-color: #3b1f4e !important;
+  color: #3b1f4e !important;
+  background: #ffffff !important;
+}
+
+.jewelry-checkout-payment__btn--online {
+  background: #3b1f4e !important;
+  border: 1px solid #3b1f4e !important;
+  color: #ffffff !important;
+}
+
+.jewelry-checkout-payment__btn--online:hover:not(:disabled) {
+  background: #55306c !important;
+  border-color: #55306c !important;
+  color: #ffffff !important;
+}

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "jewelry-checkout-form",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "checkout",
+}
+
+export default manifest

package/src/payment-block.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { useState, useTransition } from "react"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
+import type { HttpTypes } from "@medusajs/types"
+import {
+  openHostedCheckout,
+  pickHostedPaymentProvider,
+  pickManualPaymentProvider,
+  placeCodOrder,
+} from "./hosted-checkout"
+import { prepareCheckoutFromForm } from "./prepare-checkout"
+import { trackAddPaymentInfo } from "@pradip1995/segment-analytics/ecommerce-events"
+import { mapCartToEcommercePayload } from "@pradip1995/commerce-core/analytics/mappers"
+import { getPaymentGatewayKind } from "@pradip1995/commerce-core/util/payment-providers"
+import "./jewelry-checkout-form.css"
+
+type PaymentBlockProps = {
+  cart: HttpTypes.StoreCart
+  paymentProviders?: Array<{ id: string }>
+  disabled?: boolean
+  shopName?: string
+}
+
+export default function PaymentBlock({ cart, paymentProviders, disabled, shopName }: PaymentBlockProps) {
+  const [error, setError] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+
+  const providerList = paymentProviders ?? cart.region?.payment_providers ?? []
+  const onlineProviderId = pickHostedPaymentProvider(providerList)
+  const codProviderId = pickManualPaymentProvider(providerList)
+  const totalLabel = formatPrice(cart.total, cart.currency_code)
+  const onlineKind = getPaymentGatewayKind(onlineProviderId ?? undefined)
+  const onlineHint =
+    onlineKind === "cashfree"
+      ? `Your delivery address is saved when you pay. Online payments use Cashfree (${
+          process.env.NEXT_PUBLIC_CASHFREE_ENVIRONMENT === "production" ? "live" : "test"
+        } mode).`
+      : onlineKind === "razorpay"
+        ? "Your delivery address is saved when you pay. Online payments use Razorpay (test mode)."
+        : "Your delivery address is saved when you pay."
+
+  const runCheckout = (mode: "online" | "cod") => {
+    setError(null)
+    startTransition(async () => {
+      try {
+        const freshCart = await prepareCheckoutFromForm(cart.id)
+        trackAddPaymentInfo(mapCartToEcommercePayload(freshCart))
+
+        if (mode === "cod") {
+          await placeCodOrder({ cart: freshCart, providerId: codProviderId! })
+          return
+        }
+
+        if (!onlineProviderId) {
+          throw new Error("Online payment is not configured.")
+        }
+
+        await openHostedCheckout({ cart: freshCart, providerId: onlineProviderId, shopName })
+      } catch (err) {
+        if (isNextRedirect(err)) throw err
+        setError(err instanceof Error ? err.message : "Payment could not be started.")
+      }
+    })
+  }
+
+  const onlineLabel =
+    onlineKind === "razorpay"
+      ? "Pay with Razorpay"
+      : onlineKind === "cashfree"
+        ? "Pay with Cashfree"
+        : "Pay online"
+
+  return (
+    <div className="checkout-payment jewelry-checkout-payment">
+      <div className="checkout-payment__actions">
+        {codProviderId ? (
+          <button
+            type="button"
+            onClick={() => runCheckout("cod")}
+            disabled={disabled || pending}
+            className="checkout-page__btn checkout-page__btn--outline checkout-page__btn--block jewelry-checkout-payment__btn jewelry-checkout-payment__btn--cod"
+          >
+            {pending ? "Processing…" : `Cash on delivery · ${totalLabel}`}
+          </button>
+        ) : null}
+
+        {onlineProviderId ? (
+          <button
+            type="button"
+            onClick={() => runCheckout("online")}
+            disabled={disabled || pending}
+            className="checkout-page__btn checkout-page__btn--primary checkout-page__btn--block jewelry-checkout-payment__btn jewelry-checkout-payment__btn--online"
+          >
+            {pending ? "Processing…" : onlineLabel}
+          </button>
+        ) : null}
+      </div>
+
+      <p className="checkout-payment__hint text-xs text-muted mt-3 text-center">{onlineHint}</p>
+
+      {error && <p className="checkout-payment__error text-sm text-red-600 mt-2">{error}</p>}
+    </div>
+  )
+}

package/src/pincode-location.ts

@@ -0,0 +1,31 @@
+import { loaderBus } from "@pradip1995/commerce-core/util/loader-bus"
+
+export type PincodeLocation = {
+  city: string
+  province: string
+}
+
+export async function fetchPincodeLocation(pincode: string): Promise<PincodeLocation | null> {
+  if (pincode.length !== 6 || !/^\d{6}$/.test(pincode)) {
+    return null
+  }
+
+  try {
+    loaderBus.begin()
+    const response = await fetch(`https://api.postalpincode.in/pincode/${pincode}`)
+    const data = await response.json()
+    if (data?.[0]?.Status === "Success" && data[0].PostOffice?.[0]) {
+      const postOffice = data[0].PostOffice[0]
+      return {
+        city: postOffice.District || postOffice.Name || "",
+        province: postOffice.State || "",
+      }
+    }
+  } catch {
+    // ignore network errors
+  } finally {
+    loaderBus.end()
+  }
+
+  return null
+}

package/src/prepare-checkout.ts

@@ -0,0 +1,81 @@
+import {
+  assignDefaultShippingMethod,
+  retrieveCart,
+  setAddresses,
+} from "@pradip1995/commerce-core/client/actions/cart"
+import type { HttpTypes } from "@medusajs/types"
+import { isValidEmail, isValidIndianPhone } from "./address-fields"
+
+const CART_CHECKOUT_FIELDS =
+  "*payment_collection,*payment_collection.payment_sessions,*shipping_address,*billing_address,*shipping_methods,email,+total,+shipping_total"
+
+export function validateCheckoutForm(form: HTMLFormElement): boolean {
+  const phoneInput = document.getElementById("shipping_phone_field_internal") as HTMLInputElement | null
+  const phone = phoneInput?.value || ""
+
+  if (!isValidIndianPhone(phone)) {
+    form.reportValidity()
+    return false
+  }
+
+  const emailInput = form.querySelector('[name="email"]') as HTMLInputElement | null
+  if (emailInput && !isValidEmail(emailInput.value)) {
+    emailInput.setCustomValidity("Enter a valid email address")
+    emailInput.reportValidity()
+    emailInput.setCustomValidity("")
+    return false
+  }
+
+  if (!form.checkValidity()) {
+    form.reportValidity()
+    return false
+  }
+
+  return true
+}
+
+export async function prepareCheckoutFromForm(
+  cartId: string
+): Promise<HttpTypes.StoreCart> {
+  const form = document.getElementById("checkout-address-form") as HTMLFormElement | null
+  if (!form) {
+    throw new Error("Checkout form not found.")
+  }
+
+  if (!validateCheckoutForm(form)) {
+    throw new Error("Please complete all required delivery fields.")
+  }
+
+  const saveError = await setAddresses(null, new FormData(form))
+  if (saveError) {
+    throw new Error(saveError)
+  }
+
+  const shippingResult = await assignDefaultShippingMethod(cartId)
+  if (!shippingResult?.success) {
+    throw new Error(
+      "Could not calculate shipping. Enter a valid 6-digit pincode and try again."
+    )
+  }
+
+  const freshCart = await retrieveCart(cartId, CART_CHECKOUT_FIELDS)
+  if (!freshCart) {
+    throw new Error("Cart not found.")
+  }
+
+  if (!freshCart.email?.trim()) {
+    throw new Error("Email is required.")
+  }
+
+  if (!freshCart.shipping_address?.phone?.trim()) {
+    throw new Error("Phone number is required.")
+  }
+
+  if ((freshCart.shipping_methods?.length ?? 0) < 1) {
+    throw new Error(
+      "Shipping is not set. Enter a valid pincode and wait for delivery options."
+    )
+  }
+
+  return freshCart
+}

package/src/segment.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import type { HttpTypes } from "@medusajs/types"
+import AddressFields from "./address-fields"
+import "./jewelry-checkout-form.css"
+
+export default function JewelryCheckoutForm({
+  cart,
+  customer,
+  formTitle = "Contact & shipping",
+}: {
+  cart?: HttpTypes.StoreCart
+  customer?: HttpTypes.StoreCustomer | null
+  formTitle?: string
+  shippingMethods?: HttpTypes.StoreCartShippingOption[]
+  paymentProviders?: Array<{ id: string }>
+  shopName?: string
+}) {
+  if (!cart?.items?.length) {
+    return (
+      <div className="card-surface rounded-lg p-6">
+        <p className="text-muted text-sm">Your cart is empty.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="jewelry-checkout-form checkout-page__address-panel card-surface rounded-lg p-6 space-y-6">
+      <h2 className="checkout-page__title text-sm font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading">
+        {formTitle}
+      </h2>
+
+      <form id="checkout-address-form" className="space-y-4" autoComplete="off">
+        <AddressFields cart={cart} customer={customer} />
+      </form>
+    </div>
+  )
+}