@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/checkout/components/payment-button/index.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import { isManual, isStripeLike, isRazorpay } from "@core/constants"
+import { placeOrder } from "@core/data/cart"
+import { trackAddPaymentInfo } from "@core/analytics/ga4-ecommerce"
+import { HttpTypes } from "@medusajs/types"
+import { Button, clx } from "@medusajs/ui"
+import { useElements, useStripe } from "@stripe/react-stripe-js"
+import React, { useState } from "react"
+import ErrorMessage from "../error-message"
+import { RazorpayPaymentButton } from "./razorpay-payment-button"
+
+type PaymentButtonProps = {
+  cart: HttpTypes.StoreCart
+  "data-testid": string
+}
+
+const PaymentButton: React.FC<PaymentButtonProps> = ({
+  cart,
+  "data-testid": dataTestId,
+}) => {
+  const notReady =
+    !cart ||
+    !cart.shipping_address ||
+    !cart.billing_address ||
+    !cart.email ||
+    (cart.shipping_methods?.length ?? 0) < 1
+
+  const paymentSession = cart.payment_collection?.payment_sessions?.[0]
+
+  switch (true) {
+    case isStripeLike(paymentSession?.provider_id):
+      return (
+        <StripePaymentButton
+          notReady={notReady}
+          cart={cart}
+          data-testid={dataTestId}
+        />
+      )
+    case isRazorpay(paymentSession?.provider_id):
+      return (
+        <RazorpayPaymentButton
+          notReady={notReady}
+          session={paymentSession!}
+          cart={cart}
+        />
+      )
+    case isManual(paymentSession?.provider_id):
+      return (
+        <ManualTestPaymentButton
+          notReady={notReady}
+          cart={cart}
+          data-testid={dataTestId}
+        />
+      )
+    default:
+      return <Button disabled>Select a payment method</Button>
+  }
+}
+
+const StripePaymentButton = ({
+  cart,
+  notReady,
+  "data-testid": dataTestId,
+}: {
+  cart: HttpTypes.StoreCart
+  notReady: boolean
+  "data-testid"?: string
+}) => {
+  const [submitting, setSubmitting] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const onPaymentCompleted = async () => {
+    await placeOrder()
+      .catch((err) => {
+        setErrorMessage(err.message)
+      })
+      .finally(() => {
+        setSubmitting(false)
+      })
+  }
+
+  const stripe = useStripe()
+  const elements = useElements()
+  const card = elements?.getElement("card")
+
+  const session = cart.payment_collection?.payment_sessions?.find(
+    (s) => s.status === "pending"
+  )
+
+  const disabled = !stripe || !elements ? true : false
+
+  const handlePayment = async () => {
+    setSubmitting(true)
+
+    if (!stripe || !elements || !card || !cart) {
+      setSubmitting(false)
+      return
+    }
+
+    const currency =
+      (cart as any).currency_code?.toUpperCase() ??
+      (cart as any).region?.currency_code?.toUpperCase() ??
+      "USD"
+    const value = ((cart as any).total ?? 0) / 100
+    const items = (cart.items ?? []).map((item: any, index: number) => {
+      const unitTotal = item.total && item.quantity ? item.total / item.quantity : 0
+      return {
+        item_id: item.variant_id ?? item.id,
+        item_name: item.title ?? "",
+        price: unitTotal / 100,
+        quantity: item.quantity,
+        index,
+      }
+    })
+    trackAddPaymentInfo({ currency, value, items })
+
+    await stripe
+      .confirmCardPayment(session?.data.client_secret as string, {
+        payment_method: {
+          card: card,
+          billing_details: {
+            name:
+              cart.billing_address?.first_name +
+              " " +
+              cart.billing_address?.last_name,
+            address: {
+              city: cart.billing_address?.city ?? undefined,
+              country: cart.billing_address?.country_code ?? undefined,
+              line1: cart.billing_address?.address_1 ?? undefined,
+              line2: cart.billing_address?.address_2 ?? undefined,
+              postal_code: cart.billing_address?.postal_code ?? undefined,
+              state: cart.billing_address?.province ?? undefined,
+            },
+            email: cart.email,
+            phone: cart.billing_address?.phone ?? undefined,
+          },
+        },
+      })
+      .then(({ error, paymentIntent }) => {
+        if (error) {
+          const pi = error.payment_intent
+
+          if (
+            (pi && pi.status === "requires_capture") ||
+            (pi && pi.status === "succeeded")
+          ) {
+            onPaymentCompleted()
+          }
+
+          setErrorMessage(error.message || null)
+          return
+        }
+
+        if (
+          (paymentIntent && paymentIntent.status === "requires_capture") ||
+          paymentIntent.status === "succeeded"
+        ) {
+          return onPaymentCompleted()
+        }
+
+        return
+      })
+  }
+
+  return (
+    <>
+      <button
+        disabled={disabled || notReady || submitting}
+        onClick={handlePayment}
+        className={clx(
+          "w-full py-2.5 px-6 rounded-full font-semibold text-base transition-all shadow-sm flex items-center justify-center",
+          {
+            "bg-brand-accent text-inverse hover:bg-brand-accent-hover": !disabled && !notReady && !submitting,
+            "bg-gray-300 text-gray-500 cursor-not-allowed": disabled || notReady || submitting,
+          }
+        )}
+        data-testid={dataTestId}
+      >
+        {submitting ? "Processing..." : "Place order"}
+      </button>
+      <ErrorMessage
+        error={errorMessage}
+        data-testid="stripe-payment-error-message"
+      />
+    </>
+  )
+}
+
+const ManualTestPaymentButton = ({
+  notReady,
+  cart,
+  "data-testid": dataTestId,
+}: {
+  notReady: boolean
+  cart: HttpTypes.StoreCart
+  "data-testid"?: string
+}) => {
+  const [submitting, setSubmitting] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const onPaymentCompleted = async () => {
+    await placeOrder()
+      .catch((err) => {
+        setErrorMessage(err.message)
+      })
+      .finally(() => {
+        setSubmitting(false)
+      })
+  }
+
+  const handlePayment = () => {
+    setSubmitting(true)
+    const currency =
+      (cart as any).currency_code?.toUpperCase() ??
+      (cart as any).region?.currency_code?.toUpperCase() ??
+      "USD"
+    const value = ((cart as any).total ?? 0) / 100
+    const items = (cart.items ?? []).map((item: any, index: number) => {
+      const unitTotal = item.total && item.quantity ? item.total / item.quantity : 0
+      return {
+        item_id: item.variant_id ?? item.id,
+        item_name: item.title ?? "",
+        price: unitTotal / 100,
+        quantity: item.quantity,
+        index,
+      }
+    })
+    trackAddPaymentInfo({ currency, value, items })
+    onPaymentCompleted()
+  }
+
+  return (
+    <>
+      <button
+        disabled={notReady || submitting}
+        onClick={handlePayment}
+        className={clx(
+          "w-full py-2.5 px-6 rounded-full font-semibold text-base transition-all shadow-sm flex items-center justify-center",
+          {
+            "bg-brand-accent text-inverse hover:bg-brand-accent-hover": !notReady && !submitting,
+            "bg-gray-300 text-gray-500 cursor-not-allowed": notReady || submitting,
+          }
+        )}
+        data-testid={dataTestId ?? "submit-order-button"}
+      >
+        {submitting ? "Processing..." : "Place order"}
+      </button>
+      <ErrorMessage
+        error={errorMessage}
+        data-testid="manual-payment-error-message"
+      />
+    </>
+  )
+}
+
+export default PaymentButton

package/templates/storefront/src/modules/checkout/components/payment-button/razorpay-payment-button.tsx

@@ -0,0 +1,136 @@
+import { Button, clx } from "@medusajs/ui"
+import Spinner from "@modules/common/icons/spinner"
+import React, { useCallback, useEffect, useState } from "react"
+import { useRazorpay, RazorpayOrderOptions } from "react-razorpay"
+import { HttpTypes } from "@medusajs/types"
+import { placeOrder } from "@core/data/cart"
+import ProcessingOverlay from "@modules/checkout/components/processing-overlay"
+
+export const RazorpayPaymentButton = ({
+    session,
+    notReady,
+    cart,
+}: {
+    session: HttpTypes.StorePaymentSession
+    notReady: boolean
+    cart: HttpTypes.StoreCart
+}) => {
+    const [submitting, setSubmitting] = useState(false)
+    const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
+    const { Razorpay } = useRazorpay()
+    const [orderData, setOrderData] = useState({ id: "" })
+
+    const onPaymentCompleted = async () => {
+        await placeOrder().catch((err) => {
+            if (err.message === "NEXT_REDIRECT") {
+                return
+            }
+            setErrorMessage("Final verification failed. Please contact support.")
+            setSubmitting(false)
+        })
+    }
+
+    useEffect(() => {
+        if (session.data?.id) {
+            setOrderData({ id: session.data.id as string })
+        }
+    }, [session.data])
+
+    const handlePayment = useCallback(async () => {
+        if (!Razorpay) {
+            setErrorMessage("Payment gateway failed to load. Please refresh.")
+            setSubmitting(false)
+            return;
+        }
+
+        const currency = cart.currency_code?.toUpperCase() ?? "USD"
+        const value = ((cart as any).total ?? 0) / 100
+        const items = (cart.items ?? []).map((item: any, index: number) => {
+            const unitTotal = item.total && item.quantity ? item.total / item.quantity : 0
+            return {
+                item_id: item.variant_id ?? item.id,
+                item_name: item.title ?? "",
+                price: unitTotal / 100,
+                quantity: item.quantity,
+                index,
+            }
+        })
+        trackAddPaymentInfo({ currency, value, items })
+
+        const options: RazorpayOrderOptions = {
+            callback_url: `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/razorpay/hooks`,
+            key: process.env.NEXT_PUBLIC_RAZORPAY_KEY ?? "",
+            amount: session.amount,
+            order_id: orderData.id,
+            currency: cart.currency_code.toUpperCase(),
+            name: process.env.NEXT_PUBLIC_SHOP_NAME ?? "Chocomelon",
+            description: `Secure checkout for your order`,
+            remember_customer: true,
+            modal: {
+                backdropclose: true,
+                escape: true,
+                handleback: true,
+                confirm_close: true,
+                ondismiss: () => {
+                    setSubmitting(false)
+                },
+                animation: true,
+            },
+            handler: async (response) => {
+                setSubmitting(true) // Ensure we show the premium processing state
+                await onPaymentCompleted();
+            },
+            prefill: {
+                name: `${cart.billing_address?.first_name || ""} ${cart.billing_address?.last_name || ""}`,
+                email: cart.email,
+                contact: cart.shipping_address?.phone || cart.billing_address?.phone || undefined,
+            },
+            theme: {
+                color: "var(--color-brand-accent)"
+            }
+        };
+
+        try {
+            const razorpay = new Razorpay(options);
+            razorpay.on("payment.failed", function (response: any) {
+                setErrorMessage(response.error.description || "Payment failed");
+                setSubmitting(false);
+            });
+            razorpay.open();
+        } catch (error: any) {
+            setSubmitting(false);
+        }
+    }, [Razorpay, cart, orderData.id, session.amount, onPaymentCompleted]);
+
+    return (
+        <div className="w-full">
+            <ProcessingOverlay isOpen={submitting} />
+            <button
+                    type="button"
+                    disabled={submitting || notReady || !orderData?.id || !Razorpay}
+                    onClick={async (e) => {
+                        e.preventDefault();
+                        setSubmitting(true)
+                        handlePayment()
+                    }}
+                    data-ga-event="razorpay_payment_click"
+                    data-ga-label="Pay with Razorpay"
+                    className={clx(
+                        "w-full py-2.5 min-[550px]:py-3 px-6 rounded-full font-bold text-base transition-all mt-6 shadow-md active:scale-[0.98]",
+                        {
+                            "bg-brand-accent text-inverse hover:bg-brand-accent-hover hover:shadow-lg": !submitting,
+                            "bg-gray-200 text-gray-400 cursor-not-allowed": submitting,
+                        }
+                    )}
+                >
+                    Pay with Razorpay
+                </button>
+
+            {errorMessage && !submitting && (
+                <div className="text-red-500 text-xs font-bold mt-3 p-3 bg-red-50 rounded-lg border border-red-100 animate-in fade-in slide-in-from-top-2">
+                    ⚠️ {errorMessage}
+                </div>
+            )}
+        </div>
+    )
+}

package/templates/storefront/src/modules/checkout/components/payment-container/index.tsx

@@ -0,0 +1,129 @@
+import { Radio as RadioGroupOption } from "@headlessui/react"
+import { Text, clx } from "@medusajs/ui"
+import React, { useContext, useMemo, type JSX } from "react"
+
+import Radio from "@modules/common/components/radio"
+
+import { isManual } from "@core/constants"
+import SkeletonCardDetails from "@modules/skeletons/components/skeleton-card-details"
+import { CardElement } from "@stripe/react-stripe-js"
+import { StripeCardElementOptions } from "@stripe/stripe-js"
+import PaymentTest from "../payment-test"
+import { StripeContext } from "../payment-wrapper/stripe-wrapper"
+
+type PaymentContainerProps = {
+  paymentProviderId: string
+  selectedPaymentOptionId: string | null
+  disabled?: boolean
+  paymentInfoMap: Record<string, { title: string; icon: JSX.Element }>
+  children?: React.ReactNode
+}
+
+const PaymentContainer: React.FC<PaymentContainerProps> = ({
+  paymentProviderId,
+  selectedPaymentOptionId,
+  paymentInfoMap,
+  disabled = false,
+  children,
+}) => {
+  const isDevelopment = process.env.NODE_ENV === "development"
+
+  return (
+    <RadioGroupOption
+      key={paymentProviderId}
+      value={paymentProviderId}
+      disabled={disabled}
+      className={clx(
+        "flex flex-col gap-y-2 text-small-regular cursor-pointer py-4 border rounded-rounded px-8 mb-2 hover:shadow-borders-interactive-with-active",
+        {
+          "border-ui-border-interactive":
+            selectedPaymentOptionId === paymentProviderId,
+        }
+      )}
+    >
+      <div className="flex items-center justify-between ">
+        <div className="flex items-center gap-x-4">
+          <Radio checked={selectedPaymentOptionId === paymentProviderId} />
+          <Text className="text-base-regular">
+            {paymentInfoMap[paymentProviderId]?.title || paymentProviderId}
+          </Text>
+          {isManual(paymentProviderId) && isDevelopment && (
+            <PaymentTest className="hidden small:block" />
+          )}
+        </div>
+        <span className="justify-self-end text-ui-fg-base">
+          {paymentInfoMap[paymentProviderId]?.icon}
+        </span>
+      </div>
+      {isManual(paymentProviderId) && isDevelopment && (
+        <PaymentTest className="small:hidden text-[10px]" />
+      )}
+      {children}
+    </RadioGroupOption>
+  )
+}
+
+export default PaymentContainer
+
+export const StripeCardContainer = ({
+  paymentProviderId,
+  selectedPaymentOptionId,
+  paymentInfoMap,
+  disabled = false,
+  setCardBrand,
+  setError,
+  setCardComplete,
+}: Omit<PaymentContainerProps, "children"> & {
+  setCardBrand: (brand: string) => void
+  setError: (error: string | null) => void
+  setCardComplete: (complete: boolean) => void
+}) => {
+  const stripeReady = useContext(StripeContext)
+
+  const useOptions: StripeCardElementOptions = useMemo(() => {
+    return {
+      style: {
+        base: {
+          fontFamily: "Inter, sans-serif",
+          color: "#424270",
+          "::placeholder": {
+            color: "rgb(107 114 128)",
+          },
+        },
+      },
+      classes: {
+        base: "pt-3 pb-1 block w-full h-11 px-4 mt-0 bg-ui-bg-field border rounded-md appearance-none focus:outline-none focus:ring-0 focus:shadow-borders-interactive-with-active border-ui-border-base hover:bg-ui-bg-field-hover transition-all duration-300 ease-in-out",
+      },
+    }
+  }, [])
+
+  return (
+    <PaymentContainer
+      paymentProviderId={paymentProviderId}
+      selectedPaymentOptionId={selectedPaymentOptionId}
+      paymentInfoMap={paymentInfoMap}
+      disabled={disabled}
+    >
+      {selectedPaymentOptionId === paymentProviderId &&
+        (stripeReady ? (
+          <div className="my-4 transition-all duration-150 ease-in-out">
+            <Text className="txt-medium-plus text-ui-fg-base mb-1">
+              Enter your card details:
+            </Text>
+            <CardElement
+              options={useOptions as StripeCardElementOptions}
+              onChange={(e) => {
+                setCardBrand(
+                  e.brand && e.brand.charAt(0).toUpperCase() + e.brand.slice(1)
+                )
+                setError(e.error?.message || null)
+                setCardComplete(e.complete)
+              }}
+            />
+          </div>
+        ) : (
+          <SkeletonCardDetails />
+        ))}
+    </PaymentContainer>
+  )
+}

package/templates/storefront/src/modules/checkout/components/payment-test/index.tsx

@@ -0,0 +1,12 @@
+import { Badge } from "@medusajs/ui"
+
+const PaymentTest = ({ className }: { className?: string }) => {
+  return (
+    <Badge color="orange" className={className}>
+      <span className="font-semibold">Attention:</span> For testing purposes
+      only.
+    </Badge>
+  )
+}
+
+export default PaymentTest

package/templates/storefront/src/modules/checkout/components/payment-wrapper/index.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { loadStripe } from "@stripe/stripe-js"
+import React from "react"
+import StripeWrapper from "./stripe-wrapper"
+import { HttpTypes } from "@medusajs/types"
+import { isStripeLike } from "@core/constants"
+
+type PaymentWrapperProps = {
+  cart: HttpTypes.StoreCart
+  children: React.ReactNode
+}
+
+const stripeKey =
+  process.env.NEXT_PUBLIC_STRIPE_KEY ||
+  process.env.NEXT_PUBLIC_MEDUSA_PAYMENTS_PUBLISHABLE_KEY
+
+const medusaAccountId = process.env.NEXT_PUBLIC_MEDUSA_PAYMENTS_ACCOUNT_ID
+const stripePromise = stripeKey
+  ? loadStripe(
+      stripeKey,
+      medusaAccountId ? { stripeAccount: medusaAccountId } : undefined
+    )
+  : null
+
+const PaymentWrapper: React.FC<PaymentWrapperProps> = ({ cart, children }) => {
+  const paymentSession = cart.payment_collection?.payment_sessions?.find(
+    (s) => s.status === "pending"
+  )
+
+  if (
+    isStripeLike(paymentSession?.provider_id) &&
+    paymentSession &&
+    stripePromise
+  ) {
+    return (
+      <StripeWrapper
+        paymentSession={paymentSession}
+        stripeKey={stripeKey}
+        stripePromise={stripePromise}
+      >
+        {children}
+      </StripeWrapper>
+    )
+  }
+
+  return <div>{children}</div>
+}
+
+export default PaymentWrapper

package/templates/storefront/src/modules/checkout/components/payment-wrapper/stripe-wrapper.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { Stripe, StripeElementsOptions } from "@stripe/stripe-js"
+import { Elements } from "@stripe/react-stripe-js"
+import { HttpTypes } from "@medusajs/types"
+import { createContext } from "react"
+
+type StripeWrapperProps = {
+  paymentSession: HttpTypes.StorePaymentSession
+  stripeKey?: string
+  stripePromise: Promise<Stripe | null> | null
+  children: React.ReactNode
+}
+
+export const StripeContext = createContext(false)
+
+const StripeWrapper: React.FC<StripeWrapperProps> = ({
+  paymentSession,
+  stripeKey,
+  stripePromise,
+  children,
+}) => {
+  const options: StripeElementsOptions = {
+    clientSecret: paymentSession!.data?.client_secret as string | undefined,
+  }
+
+  if (!stripeKey) {
+    throw new Error(
+      "Stripe key is missing. Set NEXT_PUBLIC_STRIPE_KEY environment variable."
+    )
+  }
+
+  if (!stripePromise) {
+    throw new Error(
+      "Stripe promise is missing. Make sure you have provided a valid Stripe key."
+    )
+  }
+
+  if (!paymentSession?.data?.client_secret) {
+    throw new Error(
+      "Stripe client secret is missing. Cannot initialize Stripe."
+    )
+  }
+
+  return (
+    <StripeContext.Provider value={true}>
+      <Elements options={options} stripe={stripePromise}>
+        {children}
+      </Elements>
+    </StripeContext.Provider>
+  )
+}
+
+export default StripeWrapper