Razorpay

yarn add medusa-plugin-razorpay-v2

1RAZORPAY_ID=<your api key>
2RAZORPAY_SECRET=<your api key secret>
3RAZORPAY_ACCOUNT=<your razorpay account number/merchant id>
4RAZORPAY_WEBHOOK_SECRET=<your web hook secret as defined in the webhook settings in the razorpay dashboard >

1module.exports = defineConfig({
2
3...
4
5    plugins: ["medusa-plugin-razorpay-v2"],
6modules: [
7  ...
8    {
9            resolve: "@medusajs/medusa/payment",
10            dependencies: [Modules.PAYMENT, ContainerRegistrationKeys.LOGGER],
11            options: {
12                providers: [
13                    {
14                        resolve:
15                            "medusa-plugin-razorpay-v2/providers/payment-razorpay/src",
16                        id: "razorpay",
17                        options: {
18                            key_id:
19                                process?.env?.RAZORPAY_TEST_KEY_ID ??
20                                process?.env?.RAZORPAY_ID,
21                            key_secret:
22                                process?.env?.RAZORPAY_TEST_KEY_SECRET ??
23                                process?.env?.RAZORPAY_SECRET,
24                            razorpay_account:
25                                process?.env?.RAZORPAY_TEST_ACCOUNT ??
26                                process?.env?.RAZORPAY_ACCOUNT,
27                            automatic_expiry_period: 30 /* any value between 12minuts and 30 days expressed in minutes*/,
28                            manual_expiry_period: 20,
29                            refund_speed: "normal",
30                            webhook_secret:
31                                process?.env?.RAZORPAY_TEST_WEBHOOK_SECRET ??
32                                process?.env?.RAZORPAY_WEBHOOK_SECRET
33                        }
34                    },,
35  ...]  
36            }
37    }
38    ...]
39})

yarn add react-razorpay

1import { Button } from "@medusajs/ui"
2import Spinner from "@modules/common/icons/spinner"
3import React, { useCallback, useEffect, useState } from "react"
4import  {useRazorpay, RazorpayOrderOptions } from "react-razorpay"
5import { HttpTypes } from "@medusajs/types"
6import {  placeOrder,  } from "@lib/data/cart"
7import { CurrencyCode } from "react-razorpay/dist/constants/currency"
8export const RazorpayPaymentButton = ({
9  session,
10  notReady,
11  cart
12}: {
13  session: HttpTypes.StorePaymentSession
14  notReady: boolean
15  cart: HttpTypes.StoreCart
16}) => {
17  const [disabled, setDisabled] = useState(false)
18  const [submitting, setSubmitting] = useState(false)
19  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
20  const {Razorpay
21   } = useRazorpay();
22  
23  const [orderData,setOrderData] = useState({razorpayOrder:{id:""}})
24
25  
26  console.log(`session_data: `+JSON.stringify(session))
27  const onPaymentCompleted = async () => {
28    await placeOrder().catch(() => {
29      setErrorMessage("An error occurred, please try again.")
30      setSubmitting(false)
31    })
32  }
33  useEffect(()=>{
34    setOrderData(session.data as {razorpayOrder:{id:string}})
35  },[session.data])
36
37  
38
39
40  const handlePayment = useCallback(async() => {
41    const onPaymentCancelled = async () => {
42        setErrorMessage("PaymentCancelled")
43        setSubmitting(false)
44      }
45    
46    const options: RazorpayOrderOptions = {
47      key:process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID??process.env.NEXT_PUBLIC_RAZORPAY_TEST_KEY_ID??"your_key_id",
48      callback_url: `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/razorpay/hooks`,
49      amount: session.amount*100*100,
50      order_id: orderData.razorpayOrder.id,
51      currency: cart.currency_code.toUpperCase() as CurrencyCode,
52      name: process.env.COMPANY_NAME ?? "your company name ",
53      description: `Order number ${orderData.razorpayOrder.id}`,
54      remember_customer:true,
55      
56
57      image: "https://example.com/your_logo",
58      modal: {
59        backdropclose: true,
60        escape: true,
61        handleback: true,
62        confirm_close: true,
63        ondismiss: async () => {
64          setSubmitting(false)
65          setErrorMessage(`payment cancelled`)
66          await onPaymentCancelled()
67        },
68        animation: true,
69      },
70      
71      handler: async () => {
72        onPaymentCompleted()
73      },
74      "prefill": {
75        "name": cart.billing_address?.first_name + " " + cart?.billing_address?.last_name,
76        "email": cart?.email,
77        "contact": (cart?.shipping_address?.phone) ?? undefined
78      },
79      
80      
81    };
82    console.log(JSON.stringify(options.amount))
83    //await waitForPaymentCompletion();
84    
85    
86    const razorpay = new Razorpay(options);
87    if(orderData.razorpayOrder.id)
88    razorpay.open();
89    razorpay.on("payment.failed", function (response: any) {
90      setErrorMessage(JSON.stringify(response.error))
91   
92    })
93   razorpay.on("payment.authorized" as any, function (response: any) {
94    const authorizedCart = placeOrder().then(authorizedCart=>{
95    JSON.stringify(`authorized:`+ authorizedCart)
96    })
97    })
98    // razorpay.on("payment.captured", function (response: any) {
99
100    // }
101    // )
102  }, [Razorpay, cart.billing_address?.first_name, 
103    cart.billing_address?.last_name, cart.currency_code,
104     cart?.email, cart?.shipping_address?.phone, orderData.razorpayOrder.id, 
105     session.amount, session.provider_id]);
106  console.log("orderData"+JSON.stringify(orderData))
107  return (
108    <>
109      <Button
110        disabled={submitting || notReady || !orderData?.razorpayOrder?.id||orderData?.razorpayOrder?.id == ''}
111        onClick={()=>{
112          console.log(`processing order id: ${orderData.razorpayOrder.id}`)
113          handlePayment()}
114        }
115      >
116        {submitting ? <Spinner /> : "Checkout"}
117      </Button>
118      {errorMessage && (
119        <div className="text-red-500 text-small-regular mt-2">
120          {errorMessage}
121        </div>
122      )}
123    </>
124  )
125}

1export const isRazorpay = (providerId?: string) => {
2  return providerId?.startsWith("pp_razorpay")
3}
4
5// and the following to the list
6export const paymentInfoMap: Record<
7  string,
8  { title: string; icon: React.JSX.Element }
9> = {...
10   pp_razorpay_razorpay: {
11    title: "Razorpay",
12    icon: <CreditCard />,
13  },
14  ...}

import import {RazorpayPaymentButton} from "./razorpay-payment-button"

1case "razorpay":
2         return <RazorpayPaymentButton session={paymentSession} notReady={notReady} cart={cart} />