@pradip1995/segment-jewelry-checkout-form 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-jewelry-checkout-form",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/checkout-bag-items.tsx

@@ -40,8 +40,8 @@ export default function CheckoutBagItems({
                     src={thumbnail}
                     alt={line.title}
                     fill
-                    className="object-cover"
-                    sizes="88px"
+                    className="jewelry-checkout-bag__img"
+                    sizes="120px"
                     unoptimized
                   />
                 ) : (
@@ -50,7 +50,21 @@ export default function CheckoutBagItems({
               </div>
               <div className="jewelry-checkout-bag__meta">
                 <p className="jewelry-checkout-bag__name">{line.title}</p>
-                {line.variantLabel ? (
+                {line.variantOptions.length > 0 ? (
+                  <ul className="jewelry-checkout-bag__variants">
+                    {line.variantOptions.map((option) => (
+                      <li
+                        key={`${item.id}-${option.label ?? "option"}-${option.value}`}
+                        className="jewelry-checkout-bag__variant-chip"
+                      >
+                        {option.label ? (
+                          <span className="jewelry-checkout-bag__variant-label">{option.label}</span>
+                        ) : null}
+                        <span>{option.value}</span>
+                      </li>
+                    ))}
+                  </ul>
+                ) : line.variantLabel ? (
                   <p className="jewelry-checkout-bag__variant">{line.variantLabel}</p>
                 ) : null}
                 <p className="jewelry-checkout-bag__qty">

package/src/checkout-line.test.ts

@@ -3,9 +3,11 @@ import { describe, it } from "node:test"
 import {
   checkoutItemCount,
   checkoutLineView,
+  checkoutVariantOptions,
   isPlaceholderVariant,
   type CheckoutLineItemInput,
   type CheckoutLineView,
+  type CheckoutVariantOption,
 } from "./checkout-line.ts"
 
 const LINE_CASES: Array<{
@@ -26,6 +28,7 @@ const LINE_CASES: Array<{
       id: "li_1",
       title: "Pendants demo 3",
       variantLabel: null,
+      variantOptions: [],
       quantity: 1,
       quantityLabel: "Qty 1",
       unitPrice: 869,
@@ -44,6 +47,7 @@ const LINE_CASES: Array<{
       id: "li_2",
       title: "Gold hoop",
       variantLabel: null,
+      variantOptions: [],
       quantity: 3,
       quantityLabel: "Qty 3",
       unitPrice: 500,
@@ -65,6 +69,10 @@ const LINE_CASES: Array<{
       id: "li_3",
       title: "Emerald ring",
       variantLabel: "18K Gold / 6",
+      variantOptions: [
+        { label: null, value: "18K Gold" },
+        { label: null, value: "6" },
+      ],
       quantity: 2,
       quantityLabel: "Qty 2",
       unitPrice: 1200,
@@ -85,6 +93,7 @@ const LINE_CASES: Array<{
       id: "li_4",
       title: "Pendants demo 2",
       variantLabel: null,
+      variantOptions: [],
       quantity: 1,
       quantityLabel: "Qty 1",
       unitPrice: 846,
@@ -98,6 +107,7 @@ const LINE_CASES: Array<{
       id: "",
       title: "Product",
       variantLabel: null,
+      variantOptions: [],
       quantity: 1,
       quantityLabel: "Qty 1",
       unitPrice: 0,
@@ -138,6 +148,51 @@ describe("checkoutItemCount", () => {
   }
 })
 
+const VARIANT_OPTION_CASES: Array<{
+  name: string
+  item: CheckoutLineItemInput
+  want: CheckoutVariantOption[]
+}> = [
+  {
+    name: "returns every structured option and drops placeholder values",
+    item: {
+      variant: {
+        title: "22K Yellow Gold / 16 inch",
+        options: [
+          { value: "22K Yellow Gold", option: { title: "Metal" } },
+          { value: "16 inch", option: { title: "Length" } },
+          { value: "Default", option: { title: "Default Option" } },
+        ],
+      },
+    },
+    want: [
+      { label: "Metal", value: "22K Yellow Gold" },
+      { label: "Length", value: "16 inch" },
+    ],
+  },
+  {
+    name: "splits a combined variant title when options are missing",
+    item: { variant: { title: "18K Gold / 6" } },
+    want: [
+      { label: null, value: "18K Gold" },
+      { label: null, value: "6" },
+    ],
+  },
+  {
+    name: "returns no chips for a default variant",
+    item: { variant: { title: "Default variant" } },
+    want: [],
+  },
+]
+
+describe("checkoutVariantOptions", () => {
+  for (const row of VARIANT_OPTION_CASES) {
+    it(row.name, () => {
+      assert.deepEqual(checkoutVariantOptions(row.item), row.want)
+    })
+  }
+})
+
 describe("isPlaceholderVariant", () => {
   for (const row of VARIANT_CASES) {
     it(row.name, () => {

package/src/checkout-line.ts

@@ -1,3 +1,13 @@
+export type CheckoutVariantOption = {
+  label: string | null
+  value: string
+}
+
+type CheckoutVariantOptionInput = {
+  value?: string | null
+  option?: { title?: string | null } | null
+}
+
 export type CheckoutLineItemInput = {
   id?: string | null
   title?: string | null
@@ -5,13 +15,17 @@ export type CheckoutLineItemInput = {
   quantity?: number | null
   unit_price?: number | null
   total?: number | null
-  variant?: { title?: string | null } | null
+  variant?: {
+    title?: string | null
+    options?: CheckoutVariantOptionInput[] | null
+  } | null
 }
 
 export type CheckoutLineView = {
   id: string
   title: string
   variantLabel: string | null
+  variantOptions: CheckoutVariantOption[]
   quantity: number
   quantityLabel: string
   unitPrice: number
@@ -28,12 +42,45 @@ export function isPlaceholderVariant(title?: string | null): boolean {
   )
 }
 
+function cleanOptionLabel(title?: string | null): string | null {
+  const trimmed = title?.trim()
+  if (!trimmed || isPlaceholderVariant(trimmed)) return null
+  return trimmed
+}
+
+function optionFromParts(
+  value?: string | null,
+  label?: string | null
+): CheckoutVariantOption | null {
+  const trimmed = value?.trim()
+  if (!trimmed || isPlaceholderVariant(trimmed)) return null
+  return { label: cleanOptionLabel(label), value: trimmed }
+}
+
+/** Every real variant option on the line, including values split from a combined title. */
+export function checkoutVariantOptions(item: CheckoutLineItemInput): CheckoutVariantOption[] {
+  const structured = (item.variant?.options || [])
+    .map((option) => optionFromParts(option.value, option.option?.title))
+    .filter((option): option is CheckoutVariantOption => Boolean(option))
+
+  if (structured.length > 0) return structured
+
+  const title = item.variant?.title
+  if (!title || isPlaceholderVariant(title)) return []
+
+  return title
+    .split("/")
+    .map((part) => optionFromParts(part))
+    .filter((option): option is CheckoutVariantOption => Boolean(option))
+}
+
 export function checkoutLineView(item: CheckoutLineItemInput): CheckoutLineView {
   const quantity = Math.max(1, Number(item.quantity) || 1)
   const unitPrice = Number(item.unit_price) || 0
   const lineTotal =
     typeof item.total === "number" ? item.total : unitPrice * quantity
   const variantTitle = item.variant?.title
+  const variantOptions = checkoutVariantOptions(item)
   const variantLabel =
     variantTitle && !isPlaceholderVariant(variantTitle) ? variantTitle : null
 
@@ -41,6 +88,7 @@ export function checkoutLineView(item: CheckoutLineItemInput): CheckoutLineView
     id: item.id || "",
     title: (item.product_title || item.title || "Product").trim() || "Product",
     variantLabel,
+    variantOptions,
     quantity,
     quantityLabel: `Qty ${quantity}`,
     unitPrice,

package/src/hosted-checkout.ts

@@ -13,6 +13,9 @@ import {
 } from "@pradip1995/commerce-core/util/payment-providers"
 import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
 import type { HttpTypes } from "@medusajs/types"
+import {
+  isOneClickUpi,
+} from "./upi-intent"
 
 type CartLike = HttpTypes.StoreCart & {
   payment_collection?: {
@@ -176,6 +179,33 @@ async function openCashfreeCheckout(options: {
   // Redirect checkout: Cashfree navigates away; order is finalized on return.
 }
 
+export async function startUpiIntentCheckout(options: {
+  cart: CartLike
+  providerId: string
+}): Promise<{ cart: CartLike; session: HttpTypes.StorePaymentSession }> {
+  const { cart, providerId } = options
+  if (!isOneClickUpi(providerId)) {
+    throw new Error(`Not a 1-click UPI provider: ${providerId}`)
+  }
+
+  // Must use the exact UPI provider id — commerce-core init attempts collapse to hosted Razorpay.
+  await initiatePaymentSession(cart, { provider_id: providerId })
+  const updatedCart = await retrieveCartWithPayments(cart.id)
+  if (!updatedCart) {
+    throw new Error("Cart not found after UPI payment initialization")
+  }
+
+  const session = updatedCart.payment_collection?.payment_sessions?.find(
+    (item) => item.provider_id === providerId
+  ) as HttpTypes.StorePaymentSession | undefined
+
+  if (!session) {
+    throw new Error("Could not initialize 1-click UPI")
+  }
+
+  return { cart: updatedCart, session }
+}
+
 export async function openHostedCheckout(options: {
   cart: CartLike
   providerId: string
@@ -183,6 +213,9 @@ export async function openHostedCheckout(options: {
   onDismiss?: () => void
 }): Promise<void> {
   const { cart, providerId, shopName, onDismiss } = options
+  if (isOneClickUpi(providerId)) {
+    throw new Error("Use startUpiIntentCheckout for 1-click UPI")
+  }
   const kind = getPaymentGatewayKind(providerId)
 
   const updatedCart = await initiatePaymentSessionWithFallback(cart, providerId)
@@ -225,8 +258,13 @@ export function partitionPaymentProviders(
 ) {
   const manual: Array<{ id: string }> = []
   const hosted: Array<{ id: string }> = []
+  const upi: Array<{ id: string }> = []
 
   for (const provider of providers ?? []) {
+    if (isOneClickUpi(provider.id)) {
+      upi.push(provider)
+      continue
+    }
     const kind = getPaymentGatewayKind(provider.id)
     if (kind === "manual") {
       manual.push(provider)
@@ -235,7 +273,14 @@ export function partitionPaymentProviders(
     }
   }
 
-  return { manual, hosted }
+  return { manual, hosted, upi }
+}
+
+export function pickUpiPaymentProvider(
+  providers: Array<{ id: string }> | null | undefined
+): string | null {
+  const { upi } = partitionPaymentProviders(providers)
+  return upi.length > 0 ? upi[0].id : null
 }
 
 export function pickHostedPaymentProvider(
@@ -245,7 +290,10 @@ export function pickHostedPaymentProvider(
   const preferred = process.env.NEXT_PUBLIC_PAYMENT_PROVIDER?.trim().toLowerCase()
 
   if (preferred === "razorpay") {
-    const razorpay = hosted.find((provider) => getPaymentGatewayKind(provider.id) === "razorpay")
+    const razorpay = hosted.find(
+      (provider) =>
+        getPaymentGatewayKind(provider.id) === "razorpay" && !isOneClickUpi(provider.id)
+    )
     if (razorpay) return razorpay.id
   }
 
@@ -257,7 +305,10 @@ export function pickHostedPaymentProvider(
   const cashfree = hosted.find((provider) => getPaymentGatewayKind(provider.id) === "cashfree")
   if (cashfree) return cashfree.id
 
-  const razorpay = hosted.find((provider) => getPaymentGatewayKind(provider.id) === "razorpay")
+  const razorpay = hosted.find(
+    (provider) =>
+      getPaymentGatewayKind(provider.id) === "razorpay" && !isOneClickUpi(provider.id)
+  )
   if (razorpay) return razorpay.id
 
   if (hosted.length > 0) return hosted[0].id

package/src/jewelry-checkout-form.css

@@ -18,20 +18,20 @@
 }
 
 .jewelry-checkout-payment__btn--cod:hover:not(:disabled) {
-  border-color: #3b1f4e !important;
-  color: #3b1f4e !important;
+  border-color: var(--color-brand-accent, #13264d) !important;
+  color: var(--color-brand-accent, #13264d) !important;
   background: #ffffff !important;
 }
 
 .jewelry-checkout-payment__btn--online {
-  background: #3b1f4e !important;
-  border: 1px solid #3b1f4e !important;
+  background: var(--color-brand-accent, #13264d) !important;
+  border: 1px solid var(--color-brand-accent, #13264d) !important;
   color: #ffffff !important;
 }
 
 .jewelry-checkout-payment__btn--online:hover:not(:disabled) {
-  background: #55306c !important;
-  border-color: #55306c !important;
+  background: var(--color-brand-accent-hover, #1c3a70) !important;
+  border-color: var(--color-brand-accent-hover, #1c3a70) !important;
   color: #ffffff !important;
 }
 
@@ -83,7 +83,7 @@
   top: 0.45rem;
   transform: translateY(0);
   font-size: 0.6875rem;
-  color: var(--checkout-ink, #3b1f4e);
+  color: var(--checkout-ink, var(--color-brand-accent, #13264d));
 }
 
 .jewelry-checkout-address__check {
@@ -99,7 +99,7 @@
 .jewelry-checkout-address__check input {
   width: 1rem;
   height: 1rem;
-  accent-color: #3b1f4e;
+  accent-color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-address__head {
@@ -128,7 +128,7 @@
   width: 3px;
   height: 0.95em;
   border-radius: 1px;
-  background: #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-address__actions {
@@ -156,14 +156,14 @@
 }
 
 .jewelry-checkout-address__btn--primary {
-  background: #3b1f4e;
-  border: 1px solid #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
+  border: 1px solid var(--color-brand-accent, #13264d);
   color: #ffffff;
 }
 
 .jewelry-checkout-address__btn--primary:hover:not(:disabled) {
-  background: #55306c;
-  border-color: #55306c;
+  background: var(--color-brand-accent-hover, #1c3a70);
+  border-color: var(--color-brand-accent-hover, #1c3a70);
 }
 
 .jewelry-checkout-address__btn--outline {
@@ -174,8 +174,8 @@
 
 .jewelry-checkout-address__btn--outline:hover:not(:disabled) {
   background: #f7f3fa;
-  border-color: #3b1f4e;
-  color: #3b1f4e;
+  border-color: var(--color-brand-accent, #13264d);
+  color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-address__btn--block {
@@ -220,7 +220,7 @@
 .jewelry-checkout-address-card__body--selected {
   background: #faf6f1;
   border-color: #e4dcd3;
-  box-shadow: inset 4px 0 0 #3b1f4e;
+  box-shadow: inset 4px 0 0 var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-address-card__body--pickable {
@@ -229,7 +229,7 @@
 }
 
 .jewelry-checkout-address-card__body--pickable:hover {
-  border-color: #3b1f4e;
+  border-color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-address-card__radio {
@@ -240,9 +240,9 @@
   height: 1.125rem;
   margin-top: 0.2rem;
   flex-shrink: 0;
-  border: 1.5px solid #3b1f4e;
+  border: 1.5px solid var(--color-brand-accent, #13264d);
   border-radius: 999px;
-  background: #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
   box-sizing: border-box;
 }
 
@@ -283,7 +283,7 @@
   font-family: var(--font-sans, inherit);
   font-size: 0.9375rem;
   font-weight: 700;
-  color: #3b1f4e;
+  color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-address-card__tag {
@@ -300,8 +300,8 @@
 }
 
 .jewelry-checkout-address-card__tag--default {
-  background: #3b1f4e;
-  border-color: #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
+  border-color: var(--color-brand-accent, #13264d);
   color: #ffffff;
 }
 
@@ -365,8 +365,8 @@
 
 .jewelry-checkout-address-card__edit:hover {
   background: #f7f3fa;
-  border-color: #3b1f4e;
-  color: #3b1f4e;
+  border-color: var(--color-brand-accent, #13264d);
+  color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-address-empty {
@@ -489,7 +489,7 @@
 }
 
 .jewelry-checkout-modal__option:hover:not(:disabled) .jewelry-checkout-address-card__body {
-  border-color: #3b1f4e;
+  border-color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-modal__option:disabled {
@@ -582,7 +582,7 @@
 
 .jewelry-checkout-modal__input:focus {
   outline: none;
-  border-color: #3b1f4e;
+  border-color: var(--color-brand-accent, #13264d);
   box-shadow: 0 0 0 3px rgba(59, 31, 78, 0.1);
 }
 
@@ -598,7 +598,7 @@
 .jewelry-checkout-modal__check input {
   width: 1rem;
   height: 1rem;
-  accent-color: #3b1f4e;
+  accent-color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-modal__type {
@@ -645,8 +645,8 @@
 }
 
 .jewelry-checkout-modal__type-option input:checked + span {
-  background: #3b1f4e;
-  border-color: #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
+  border-color: var(--color-brand-accent, #13264d);
   color: #ffffff;
 }
 
@@ -684,8 +684,8 @@
 }
 
 .jewelry-checkout-modal__save {
-  background: #3b1f4e;
-  border: 1px solid #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
+  border: 1px solid var(--color-brand-accent, #13264d);
   color: #ffffff;
 }
 
@@ -706,8 +706,8 @@
 }
 
 .jewelry-checkout-modal__cancel:hover {
-  border-color: #3b1f4e;
-  color: #3b1f4e;
+  border-color: var(--color-brand-accent, #13264d);
+  color: var(--color-brand-accent, #13264d);
 }
 
 @media (max-width: 640px) {
@@ -781,7 +781,7 @@
   border-radius: 999px;
   background: #ffffff;
   border: 1px solid rgba(59, 31, 78, 0.14);
-  color: #3b1f4e;
+  color: var(--color-brand-accent, #13264d);
   box-shadow: 0 6px 16px rgba(59, 31, 78, 0.08);
 }
 
@@ -792,7 +792,7 @@
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: #3b1f4e;
+  color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-leave-checkout__body {
@@ -832,8 +832,8 @@
 
 .jewelry-leave-checkout__btn--stay {
   background: #ffffff;
-  border: 1px solid #3b1f4e;
-  color: #3b1f4e;
+  border: 1px solid var(--color-brand-accent, #13264d);
+  color: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-leave-checkout__btn--stay:hover {
@@ -841,18 +841,18 @@
 }
 
 .jewelry-leave-checkout__btn--leave {
-  background: #3b1f4e;
-  border: 1px solid #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
+  border: 1px solid var(--color-brand-accent, #13264d);
   color: #ffffff;
 }
 
 .jewelry-leave-checkout__btn--leave:hover {
-  background: #55306c;
-  border-color: #55306c;
+  background: var(--color-brand-accent-hover, #1c3a70);
+  border-color: var(--color-brand-accent-hover, #1c3a70);
 }
 
 .jewelry-leave-checkout__btn:focus-visible {
-  outline: 2px solid #3b1f4e;
+  outline: 2px solid var(--color-brand-accent, #13264d);
   outline-offset: 2px;
 }
 
@@ -894,7 +894,7 @@
   width: 3px;
   height: 0.95em;
   border-radius: 1px;
-  background: #3b1f4e;
+  background: var(--color-brand-accent, #13264d);
 }
 
 .jewelry-checkout-bag__count {
@@ -915,29 +915,42 @@
 
 .jewelry-checkout-bag__item {
   display: grid;
-  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
+  grid-template-columns: 7.25rem minmax(0, 1fr) auto;
   gap: 1rem;
   align-items: center;
   padding: 0.85rem;
-  border: 1px solid rgba(59, 31, 78, 0.12);
-  border-radius: 0.85rem;
+  border: 1px solid rgba(var(--color-brand-accent-rgb, 19, 38, 77), 0.12);
+  border-radius: 1.15rem;
   background: #ffffff;
 }
 
 .jewelry-checkout-bag__thumb {
   position: relative;
-  width: 5.5rem;
-  height: 5.5rem;
+  width: 7.25rem;
+  height: 7.25rem;
   overflow: hidden;
-  border-radius: 0.7rem;
-  background: #faf6f1;
-  border: 1px solid rgba(59, 31, 78, 0.1);
+  border-radius: 1rem;
+  background: linear-gradient(
+    180deg,
+    var(--color-surface-muted, #faf7f5) 0%,
+    var(--color-brand-accent-muted, #ebf3f6) 100%
+  );
+  box-shadow: 0 16px 32px -22px rgba(var(--color-brand-accent-rgb, 19, 38, 77), 0.45);
+}
+
+.jewelry-checkout-bag__img {
+  object-fit: contain;
+  padding: 0.45rem;
 }
 
 .jewelry-checkout-bag__thumb-empty {
   width: 100%;
   height: 100%;
-  background: linear-gradient(135deg, #faf6f1 0%, #f4eff8 100%);
+  background: linear-gradient(
+    180deg,
+    var(--color-surface-muted, #faf7f5) 0%,
+    var(--color-brand-accent-muted, #ebf3f6) 100%
+  );
 }
 
 .jewelry-checkout-bag__meta {
@@ -956,6 +969,37 @@
   color: #1a1224;
 }
 
+.jewelry-checkout-bag__variants {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin: 0.15rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.jewelry-checkout-bag__variant-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 1.7rem;
+  padding: 0.15rem 0.65rem;
+  border: 1px solid rgba(var(--color-brand-accent-rgb, 19, 38, 77), 0.16);
+  border-radius: 999px;
+  background: var(--color-brand-accent-muted, #ebf3f6);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-heading, #0a0a0a);
+}
+
+.jewelry-checkout-bag__variant-label {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent, #13264d);
+}
+
 .jewelry-checkout-bag__variant {
   margin: 0;
   font-size: 0.6875rem;
@@ -975,18 +1019,18 @@
   margin: 0;
   font-size: 0.9375rem;
   font-weight: 700;
-  color: #3b1f4e;
+  color: var(--color-brand-accent, #13264d);
   white-space: nowrap;
 }
 
 @media (max-width: 520px) {
   .jewelry-checkout-bag__item {
-    grid-template-columns: 4.25rem minmax(0, 1fr);
+    grid-template-columns: 5.5rem minmax(0, 1fr);
   }
 
   .jewelry-checkout-bag__thumb {
-    width: 4.25rem;
-    height: 4.25rem;
+    width: 5.5rem;
+    height: 5.5rem;
   }
 
   .jewelry-checkout-bag__total {
@@ -994,3 +1038,60 @@
     justify-self: start;
   }
 }
+
+.jewelry-checkout-payment__btn--upi {
+  background: var(--color-brand-accent, #13264d) !important;
+  border: 1px solid var(--color-brand-accent, #13264d) !important;
+  color: #ffffff !important;
+}
+
+.jewelry-checkout-payment__btn--upi:hover:not(:disabled) {
+  background: var(--color-brand-accent-hover, #1c3a70) !important;
+  border-color: var(--color-brand-accent-hover, #1c3a70) !important;
+  color: #ffffff !important;
+}
+
+.jewelry-checkout-upi {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.jewelry-checkout-upi__qr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid rgba(59, 31, 78, 0.16);
+  background: #ffffff;
+}
+
+.jewelry-checkout-upi__qr-img {
+  height: auto;
+  width: 100%;
+  max-width: 280px;
+  object-fit: contain;
+  background: #ffffff;
+}
+
+.jewelry-checkout-upi__qr-img--lg {
+  width: 20rem;
+  height: 20rem;
+  max-width: 100%;
+  padding: 0.5rem;
+}
+
+.jewelry-checkout-upi__hint {
+  margin: 0;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: #6b6573;
+}
+
+.jewelry-checkout-upi__open-link {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-brand-accent, #13264d);
+  text-decoration: underline;
+}

package/src/payment-block.tsx

@@ -11,12 +11,15 @@ import {
   openHostedCheckout,
   pickHostedPaymentProvider,
   pickManualPaymentProvider,
+  pickUpiPaymentProvider,
   placeCodOrder,
+  startUpiIntentCheckout,
 } 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 { UpiIntentPaymentButton } from "./upi-intent-payment-button"
 import "./jewelry-checkout-form.css"
 
 type PaymentBlockProps = {
@@ -29,22 +32,32 @@ type PaymentBlockProps = {
 export default function PaymentBlock({ cart, paymentProviders, disabled, shopName }: PaymentBlockProps) {
   const [error, setError] = useState<string | null>(null)
   const [pending, startTransition] = useTransition()
+  const [upiSession, setUpiSession] = useState<HttpTypes.StorePaymentSession | null>(null)
+  const [upiCart, setUpiCart] = useState<HttpTypes.StoreCart | null>(null)
 
   const providerList = paymentProviders ?? cart.region?.payment_providers ?? []
   const onlineProviderId = pickHostedPaymentProvider(providerList)
+  const upiProviderId = pickUpiPaymentProvider(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)."
+    upiProviderId || onlineKind === "razorpay"
+      ? "Your delivery address is saved when you pay. 1-click UPI opens your UPI app or shows a QR code."
+      : onlineKind === "cashfree"
+        ? `Your delivery address is saved when you pay. Online payments use Cashfree (${
+            process.env.NEXT_PUBLIC_CASHFREE_ENVIRONMENT === "production" ? "live" : "test"
+          } mode).`
         : "Your delivery address is saved when you pay."
 
-  const runCheckout = (mode: "online" | "cod") => {
+  const onlineLabel =
+    onlineKind === "razorpay"
+      ? "Pay with Razorpay"
+      : onlineKind === "cashfree"
+        ? "Pay with Cashfree"
+        : "Pay online"
+
+  const runCheckout = (mode: "online" | "cod" | "upi") => {
     setError(null)
     startTransition(async () => {
       try {
@@ -56,6 +69,19 @@ export default function PaymentBlock({ cart, paymentProviders, disabled, shopNam
           return
         }
 
+        if (mode === "upi") {
+          if (!upiProviderId) {
+            throw new Error("1-click UPI is not configured for this region.")
+          }
+          const started = await startUpiIntentCheckout({
+            cart: freshCart,
+            providerId: upiProviderId,
+          })
+          setUpiCart(started.cart)
+          setUpiSession(started.session)
+          return
+        }
+
         if (!onlineProviderId) {
           throw new Error("Online payment is not configured.")
         }
@@ -68,16 +94,45 @@ export default function PaymentBlock({ cart, paymentProviders, disabled, shopNam
     })
   }
 
-  const onlineLabel =
-    onlineKind === "razorpay"
-      ? "Pay with Razorpay"
-      : onlineKind === "cashfree"
-        ? "Pay with Cashfree"
-        : "Pay online"
+  if (upiSession && upiCart) {
+    return (
+      <div className="checkout-payment jewelry-checkout-payment">
+        <UpiIntentPaymentButton
+          session={upiSession}
+          cart={upiCart}
+          autoStart
+          totalLabel={totalLabel}
+        />
+        <button
+          type="button"
+          className="checkout-page__btn checkout-page__btn--outline checkout-page__btn--block jewelry-checkout-payment__btn mt-3"
+          onClick={() => {
+            setUpiSession(null)
+            setUpiCart(null)
+            setError(null)
+          }}
+        >
+          Choose another payment method
+        </button>
+        {error && <p className="checkout-payment__error text-sm text-red-600 mt-2">{error}</p>}
+      </div>
+    )
+  }
 
   return (
     <div className="checkout-payment jewelry-checkout-payment">
       <div className="checkout-payment__actions">
+        {upiProviderId ? (
+          <button
+            type="button"
+            onClick={() => runCheckout("upi")}
+            disabled={disabled || pending}
+            className="checkout-page__btn checkout-page__btn--primary checkout-page__btn--block jewelry-checkout-payment__btn jewelry-checkout-payment__btn--upi"
+          >
+            {pending ? "Processing…" : `Pay with 1-click UPI · ${totalLabel}`}
+          </button>
+        ) : null}
+
         {codProviderId ? (
           <button
             type="button"
@@ -94,7 +149,11 @@ export default function PaymentBlock({ cart, paymentProviders, disabled, shopNam
             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"
+            className={
+              upiProviderId
+                ? "checkout-page__btn checkout-page__btn--outline checkout-page__btn--block jewelry-checkout-payment__btn jewelry-checkout-payment__btn--cod"
+                : "checkout-page__btn checkout-page__btn--primary checkout-page__btn--block jewelry-checkout-payment__btn jewelry-checkout-payment__btn--online"
+            }
           >
             {pending ? "Processing…" : onlineLabel}
           </button>

package/src/upi-intent-payment-button.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { placeOrder } from "@pradip1995/commerce-core/client/actions/cart"
+import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
+import type { HttpTypes } from "@medusajs/types"
+import { getUpiQrPaid } from "./upi-qr-status"
+import {
+  getDesktopUpiQrSrc,
+  getRazorpayQrId,
+  getUpiDeepLink,
+  isMobileUpiClient,
+  upiQrImageUrl,
+} from "./upi-intent"
+
+type UpiIntentPaymentButtonProps = {
+  session: HttpTypes.StorePaymentSession
+  cart: HttpTypes.StoreCart
+  notReady?: boolean
+  autoStart?: boolean
+  totalLabel?: string
+}
+
+const POLL_ATTEMPTS = 15
+const POLL_INTERVAL_MS = 2000
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function UpiIntentPaymentButton({
+  session,
+  cart,
+  notReady = false,
+  autoStart = false,
+  totalLabel,
+}: UpiIntentPaymentButtonProps) {
+  const [submitting, setSubmitting] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>()
+  const [intentUrl, setIntentUrl] = useState<string | undefined>()
+  const [paymentStarted, setPaymentStarted] = useState(false)
+  const pollingRef = useRef(false)
+  const autoStartedRef = useRef(false)
+
+  const onPaymentCompleted = useCallback(async () => {
+    await placeOrder(cart.id).catch((err: unknown) => {
+      if (isNextRedirect(err)) {
+        throw err
+      }
+      setErrorMessage(
+        "Waiting for UPI confirmation. Tap “I’ve paid” after completing payment."
+      )
+    })
+  }, [cart.id])
+
+  const pollForOrder = useCallback(
+    async (showOverlay: boolean) => {
+      if (pollingRef.current) {
+        return
+      }
+      pollingRef.current = true
+      if (showOverlay) {
+        setSubmitting(true)
+      }
+      try {
+        const qrId = getRazorpayQrId(session.data)
+        for (let attempt = 0; attempt < POLL_ATTEMPTS; attempt++) {
+          const paid = qrId ? await getUpiQrPaid(qrId) : false
+          if (!paid) {
+            await sleep(POLL_INTERVAL_MS)
+            continue
+          }
+          try {
+            await onPaymentCompleted()
+          } catch (err: unknown) {
+            if (isNextRedirect(err)) {
+              throw err
+            }
+          }
+          await sleep(POLL_INTERVAL_MS)
+        }
+        setErrorMessage(
+          "UPI payment not confirmed yet. Complete the payment in your UPI app, then tap “I’ve paid”."
+        )
+      } finally {
+        pollingRef.current = false
+        setSubmitting(false)
+      }
+    },
+    [onPaymentCompleted, session.data]
+  )
+
+  useEffect(() => {
+    const onVisible = () => {
+      if (document.visibilityState === "visible" && intentUrl) {
+        void pollForOrder(true)
+      }
+    }
+    document.addEventListener("visibilitychange", onVisible)
+    return () => document.removeEventListener("visibilitychange", onVisible)
+  }, [intentUrl, pollForOrder])
+
+  const handlePayment = useCallback(async () => {
+    setErrorMessage(undefined)
+    setSubmitting(true)
+
+    const url = getUpiDeepLink(session.data)
+    const qrSrc = getDesktopUpiQrSrc(session.data)
+    try {
+      if (!url && !qrSrc) {
+        throw new Error(
+          "UPI QR was not created. Try 1-click UPI again, or ask Razorpay to enable UPI QR Codes on this account."
+        )
+      }
+      setPaymentStarted(true)
+      if (url) {
+        setIntentUrl(url)
+      }
+      if (isMobileUpiClient()) {
+        if (url) {
+          window.location.href = url
+        }
+        setSubmitting(false)
+        return
+      }
+      setSubmitting(false)
+      void pollForOrder(false)
+    } catch (err: unknown) {
+      if (isNextRedirect(err)) {
+        throw err
+      }
+      const message =
+        err instanceof Error ? err.message : "Could not start UPI payment"
+      setErrorMessage(message)
+      setSubmitting(false)
+    }
+  }, [pollForOrder, session.data])
+
+  useEffect(() => {
+    if (!autoStart || notReady || autoStartedRef.current) {
+      return
+    }
+    autoStartedRef.current = true
+    void handlePayment()
+  }, [autoStart, handlePayment, notReady])
+
+  const resolvedIntentUrl =
+    (intentUrl && /^upi:/i.test(intentUrl) ? intentUrl : undefined) ||
+    getUpiDeepLink(session.data)
+  const qrSrc =
+    (resolvedIntentUrl ? upiQrImageUrl(resolvedIntentUrl) : undefined) ||
+    getDesktopUpiQrSrc(session.data)
+  const isGeneratedQr = Boolean(resolvedIntentUrl)
+  const isMobile = isMobileUpiClient()
+  const showQr = Boolean(qrSrc) && (!isMobile || !resolvedIntentUrl)
+
+  return (
+    <div className="jewelry-checkout-upi">
+      {showQr && qrSrc ? (
+        <div className="jewelry-checkout-upi__qr">
+          <img
+            alt="Scan to pay with UPI"
+            src={qrSrc}
+            width={isGeneratedQr ? 320 : undefined}
+            height={isGeneratedQr ? 320 : undefined}
+            className={
+              isGeneratedQr
+                ? "jewelry-checkout-upi__qr-img jewelry-checkout-upi__qr-img--lg"
+                : "jewelry-checkout-upi__qr-img"
+            }
+          />
+          <p className="jewelry-checkout-upi__hint">
+            Scan with GPay, PhonePe, Paytm, or any UPI app
+          </p>
+          {resolvedIntentUrl ? (
+            <a href={resolvedIntentUrl} className="jewelry-checkout-upi__open-link">
+              Open in UPI app
+            </a>
+          ) : null}
+        </div>
+      ) : null}
+
+      <button
+        type="button"
+        disabled={submitting || notReady}
+        onClick={async (e) => {
+          e.preventDefault()
+          if (paymentStarted) {
+            await pollForOrder(true)
+            return
+          }
+          await handlePayment()
+        }}
+        className="checkout-page__btn checkout-page__btn--primary checkout-page__btn--block jewelry-checkout-payment__btn jewelry-checkout-payment__btn--upi"
+      >
+        {submitting
+          ? "Confirming…"
+          : showQr || paymentStarted
+            ? "I’ve paid"
+            : totalLabel
+              ? `Pay with 1-click UPI · ${totalLabel}`
+              : "Pay with 1-click UPI"}
+      </button>
+
+      {errorMessage && !submitting ? (
+        <p className="checkout-payment__error text-sm text-red-600 mt-2">
+          {errorMessage}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/src/upi-intent.ts

@@ -0,0 +1,99 @@
+export const RAZORPAY_UPI_PROVIDER_ID = "pp_razorpay_upi_razorpay_upi"
+
+export function asSessionData(data: unknown): Record<string, unknown> {
+  if (data && typeof data === "object" && !Array.isArray(data)) {
+    return data as Record<string, unknown>
+  }
+  return {}
+}
+
+function readString(
+  data: Record<string, unknown>,
+  key: string
+): string | undefined {
+  const value = data[key]
+  return typeof value === "string" && value.length > 0 ? value : undefined
+}
+
+function readInstrumentIntentUrl(
+  data: Record<string, unknown>
+): string | undefined {
+  const instrument = asSessionData(
+    data.instrumentResponse ?? data.instrument_response
+  )
+  const redirect = asSessionData(
+    instrument.redirectInfo ?? instrument.redirect_info
+  )
+  return (
+    readString(instrument, "intentUrl") ||
+    readString(instrument, "intent_url") ||
+    readString(redirect, "url")
+  )
+}
+
+function isRazorpayQrDownloadUrl(url: string): boolean {
+  return /(?:^https?:\/\/)?(?:www\.)?rzp\.io\//i.test(url)
+}
+
+export function getUpiIntentUrl(data: unknown): string | undefined {
+  const session = asSessionData(data)
+  const nested = asSessionData(session.data)
+  const candidates = [
+    readString(session, "upi_intent_url"),
+    readString(session, "image_content"),
+    readString(session, "payment_url"),
+    readInstrumentIntentUrl(session),
+    readString(nested, "upi_intent_url"),
+    readString(nested, "image_content"),
+    readString(nested, "payment_url"),
+    readInstrumentIntentUrl(nested),
+  ]
+  return (
+    candidates.find((url) => !!url && /^upi:/i.test(url)) ||
+    candidates.find((url) => !!url && !isRazorpayQrDownloadUrl(url))
+  )
+}
+
+export function getUpiDeepLink(data: unknown): string | undefined {
+  const url = getUpiIntentUrl(data)
+  return url && /^upi:/i.test(url) ? url : undefined
+}
+
+export function getRazorpayQrId(data: unknown): string | undefined {
+  const session = asSessionData(data)
+  const nested = asSessionData(session.data)
+  return readString(session, "qr_id") || readString(nested, "qr_id")
+}
+
+export function getRazorpayQrImageUrl(data: unknown): string | undefined {
+  const session = asSessionData(data)
+  const nested = asSessionData(session.data)
+  return readString(session, "image_url") || readString(nested, "image_url")
+}
+
+export function isUpiIntentFlow(data: unknown): boolean {
+  return readString(asSessionData(data), "flow") === "upi_intent"
+}
+
+export function isOneClickUpi(providerId?: string): boolean {
+  return !!providerId && providerId.includes("razorpay_upi")
+}
+
+export function isMobileUpiClient(): boolean {
+  if (typeof navigator === "undefined") {
+    return false
+  }
+  return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+}
+
+export function upiQrImageUrl(intentUrl: string): string {
+  return `https://api.qrserver.com/v1/create-qr-code/?size=320x320&ecc=M&margin=8&data=${encodeURIComponent(intentUrl)}`
+}
+
+export function getDesktopUpiQrSrc(data: unknown): string | undefined {
+  const deepLink = getUpiDeepLink(data)
+  if (deepLink) {
+    return upiQrImageUrl(deepLink)
+  }
+  return getRazorpayQrImageUrl(data)
+}

package/src/upi-qr-status.ts

@@ -0,0 +1,39 @@
+"use client"
+
+/**
+ * Poll Razorpay UPI QR payment status via Medusa store API.
+ * Uses publishable key only — same contract as medusa-payment-provider.
+ */
+export async function getUpiQrPaid(qrId: string): Promise<boolean> {
+  if (!qrId.startsWith("qr_")) {
+    return false
+  }
+
+  const base =
+    process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL ||
+    process.env.MEDUSA_BACKEND_URL ||
+    "http://localhost:9000"
+  const publishableKey = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY?.trim()
+
+  try {
+    const url = new URL("/store/upi-intent/status", base)
+    url.searchParams.set("qr_id", qrId)
+
+    const response = await fetch(url.toString(), {
+      method: "GET",
+      headers: publishableKey
+        ? { "x-publishable-api-key": publishableKey }
+        : undefined,
+      cache: "no-store",
+    })
+
+    if (!response.ok) {
+      return false
+    }
+
+    const result = (await response.json()) as { paid?: boolean }
+    return result.paid === true
+  } catch {
+    return false
+  }
+}