\r\n\r\n## Compatibility\r\n\r\nThis starter is compatible with versions >= 2.4.0 of `@medusajs/medusa`. \r\n\r\n# Payment-Razorpay\r\n\r\n# Support the Payment-Razorpay Provider - Elevate Our Medusa Community!\r\n\r\nDear Developers and E-commerce Enthusiasts,\r\n\r\nAre you ready to revolutionize the world of online stores with MedusaJS? We have an exciting opportunity that will make payment processing a breeze for our beloved Medusa platform! Introducing the Payment-Razorpay provider, a community-driven project that brings the immensely popular [RAZORPAY](https://razorpay.com) payment gateway to our MedusaJS commerce stack.\r\n\r\n**What's in it for You:**\r\n\r\nš Streamline Payment Processing: With Payment-Razorpay, you can unleash the full potential of Razorpay's features, ensuring seamless and secure payments for your customers.\r\n\r\nš Global Reach: Engage with customers worldwide, as Razorpay supports various currencies and payment methods, catering to a diverse audience.\r\n\r\nš Elevate Your Medusa Store: By sponsoring this provider, you empower the entire Medusa community, driving innovation and success across the platform.\r\n\r\n## Installation Made Simple\r\n\r\nNo hassle, no fuss! Install Payment-Razorpay effortlessly with npm:\r\n\r\n\r\n\r\n[RAZORPAY](https://razorpay.com) an immensely popular payment gateway with a host of features. \r\nThis provider enables the razorpay payment interface on [medusa](https://medusajs.com) commerce stack\r\n\r\n## Installation\r\n\r\nUse the package manager npm to install Payment-Razorpay.\r\n\r\n```bash\r\nnpm install @tsc_tech/medusa-plugin-razorpay-payment\r\nyarn add @tsc_tech/medusa-plugin-razorpay-payment\r\n```\r\n\r\nAdditionally, install the Razorpay package:\r\n\r\n```bash\r\nnpm install razorpay\r\nyarn add razorpay\r\n```\r\n\r\n\r\n## Configuration\r\n\r\nStep 1: Register on Razorpay\r\nCreate an account on Razorpay and generate API keys from the Razorpay dashboard.\r\n\r\nStep 2: Set Up Environment Variables\r\nIn your .env file, define the following variables:\r\n```\r\nRAZORPAY_ID=\r\nRAZORPAY_SECRET=\r\nRAZORPAY_ACCOUNT=\r\nRAZORPAY_WEBHOOK_SECRET=\r\n```\r\n\r\nStep 3: Update Medusa Configuration\r\nModify your medusa-config.ts to include the Razorpay provider:\r\n\r\n```\r\nmodule.exports = defineConfig({\r\nmodules: [\r\n ...\r\n { resolve: \"@medusajs/medusa/payment\",\r\n options: {\r\n providers: [\r\n ...\r\n {\r\n resolve: \"@tsc_tech/medusa-plugin-razorpay-payment/providers/razorpay\",\r\n id: \"razorpay\",\r\n options: {\r\n key_id:\r\n process?.env?.RAZORPAY_TEST_KEY_ID ??\r\n process?.env?.RAZORPAY_ID,\r\n key_secret:\r\n process?.env?.RAZORPAY_TEST_KEY_SECRET ??\r\n process?.env?.RAZORPAY_SECRET,\r\n razorpay_account:\r\n process?.env?.RAZORPAY_TEST_ACCOUNT ??\r\n process?.env?.RAZORPAY_ACCOUNT,\r\n automatic_expiry_period: 30 /* any value between 12minuts and 30 days expressed in minutes*/,\r\n manual_expiry_period: 20,\r\n refund_speed: \"normal\",\r\n webhook_secret:\r\n process?.env?.RAZORPAY_TEST_WEBHOOK_SECRET ??\r\n process?.env?.RAZORPAY_WEBHOOK_SECRET\r\n }\r\n },\r\n ....\r\n ],\r\n } },\r\n ...]\r\n})\r\n```\r\n\r\n\r\n## Client-Side Configuration (Next.js)\r\n\r\n\r\nFor Next.js projects, install the Razorpay package:\r\n \r\n\r\n1. Install package to your next starter. This just makes it easier, importing all the scripts implicitly\r\n```\r\nyarn add react-razorpay\r\n\r\n```\r\n2. Create a button for Razorpay /src/modules/checkout/components/payment-button/razorpay-payment-button.tsx\r\n\r\nlike below\r\n\r\n\r\n````\r\nimport { Button } from \"@medusajs/ui\"\r\nimport Spinner from \"@modules/common/icons/spinner\"\r\nimport React, { useCallback, useEffect, useState } from \"react\"\r\nimport { useRazorpay, RazorpayOrderOptions } from \"react-razorpay\"\r\nimport { HttpTypes } from \"@medusajs/types\"\r\nimport { placeOrder } from \"@lib/data/cart\"\r\nimport { CurrencyCode } from \"react-razorpay/dist/constants/currency\"\r\nexport const RazorpayPaymentButton = ({\r\n session,\r\n notReady,\r\n cart,\r\n}: {\r\n session: HttpTypes.StorePaymentSession\r\n notReady: boolean\r\n cart: HttpTypes.StoreCart\r\n}) => {\r\n const [disabled, setDisabled] = useState(false)\r\n const [submitting, setSubmitting] = useState(false)\r\n const [errorMessage, setErrorMessage] = useState(\r\n undefined\r\n )\r\n const { Razorpay } = useRazorpay()\r\n\r\n const [orderData, setOrderData] = useState({ id: \"\" })\r\n\r\n\r\n console.log(`session_data: ` + JSON.stringify(session))\r\n const onPaymentCompleted = async () => {\r\n await placeOrder().catch(() => {\r\n setErrorMessage(\"An error occurred, please try again.\")\r\n setSubmitting(false)\r\n })\r\n }\r\n useEffect(() => {\r\n setOrderData(session.data as { id: string })\r\n }, [session.data])\r\n\r\n const handlePayment = useCallback(async () => {\r\n // const onPaymentCancelled = async () => {\r\n // await cancelOrder(session.provider_id).catch(() => {\r\n // setErrorMessage(\"PaymentCancelled\")\r\n // setSubmitting(false)\r\n // })\r\n // }\r\n const options: RazorpayOrderOptions = {\r\n callback_url: `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/razorpay/hooks`,\r\n key: process.env.NEXT_PUBLIC_RAZORPAY_KEY ?? \"\",\r\n amount: session.amount * 100 * 100,\r\n order_id: orderData.id,\r\n currency: cart.currency_code.toUpperCase() as CurrencyCode,\r\n name: process.env.COMPANY_NAME ?? \"your company name \",\r\n description: `Order number ${orderData.id}`,\r\n remember_customer: true,\r\n\r\n image: \"https://example.com/your_logo\",\r\n modal: {\r\n backdropclose: true,\r\n escape: true,\r\n handleback: true,\r\n confirm_close: true,\r\n ondismiss: async () => {\r\n setSubmitting(false)\r\n setErrorMessage(`payment cancelled`)\r\n // await onPaymentCancelled()\r\n },\r\n animation: true,\r\n },\r\n\r\n handler: async () => {\r\n onPaymentCompleted()\r\n },\r\n prefill: {\r\n name:\r\n cart.billing_address?.first_name +\r\n \" \" +\r\n cart?.billing_address?.last_name,\r\n email: cart?.email,\r\n contact: cart?.shipping_address?.phone ?? undefined,\r\n },\r\n }\r\n console.log(JSON.stringify(options.amount))\r\n //await waitForPaymentCompletion();\r\n\r\n const razorpay = new Razorpay(options)\r\n if (orderData.id) razorpay.open()\r\n razorpay.on(\"payment.failed\", function (response: any) {\r\n setErrorMessage(JSON.stringify(response.error))\r\n })\r\n razorpay.on(\"payment.authorized\" as any, function (response: any) {\r\n const authorizedCart = placeOrder().then((authorizedCart) => {\r\n JSON.stringify(`authorized:` + authorizedCart)\r\n })\r\n })\r\n // razorpay.on(\"payment.captured\", function (response: any) {\r\n\r\n // }\r\n // )\r\n }, [\r\n Razorpay,\r\n cart.billing_address?.first_name,\r\n cart.billing_address?.last_name,\r\n cart.currency_code,\r\n cart?.email,\r\n cart?.shipping_address?.phone,\r\n orderData.id,\r\n session.amount,\r\n session.provider_id,\r\n ])\r\n console.log(\"orderData\" + JSON.stringify(orderData))\r\n\r\n return (\r\n <>\r\n {\r\n console.log(`processing order id: ${orderData.id}`)\r\n handlePayment()\r\n }}\r\n >\r\n {submitting ? : \"Checkout\"}\r\n \r\n {errorMessage && (\r\n
\r\n {errorMessage}\r\n
\r\n )}\r\n \r\n )\r\n}\r\n\r\n`````\r\n\r\nStep 3. \r\n\r\nnextjs-starter-medusa/src/lib/constants.tsx\r\nadd\r\n\r\n```\r\nexport const isRazorpay = (providerId?: string) => {\r\n return providerId?.startsWith(\"pp_razorpay_razorpay\")\r\n}\r\n\r\n// and the following to the list\r\nexport const paymentInfoMap: Record<\r\n string,\r\n { title: string; icon: React.JSX.Element }\r\n> = {...\r\n pp_razorpay_razorpay: {\r\n title: \"Razorpay\",\r\n icon: ,\r\n },\r\n ...}\r\n\r\n````\r\nstep 4.add into the payment element /src/modules/checkout/components/payment-button/index.tsx\r\n\r\nfirst \r\n```\r\nimport {RazorpayPaymentButton} from \"./razorpay-payment-button\"\r\n```\r\nthen\r\n```\r\ncase isRazorpay(paymentSession?.provider_id):\r\n return \r\n```\r\n\r\n\r\nStep 4. modify initiatePaymentSession in the client storefront/src/modules/checkout/components/payment/index.tsx\r\n```\r\n\r\n.....\r\n try {\r\n const shouldInputCard =\r\n isStripeFunc(selectedPaymentMethod) && !activeSession\r\n\r\n const checkActiveSession =\r\n activeSession?.provider_id === selectedPaymentMethod\r\n\r\n if (!checkActiveSession) {\r\n await initiatePaymentSession(cart, {\r\n provider_id: selectedPaymentMethod,\r\n data: {\r\n cart,\r\n },\r\n })\r\n }\r\n }\r\n ....\r\n```\r\n\r\nStep 5. Add environment variables in the client\r\n\r\n NEXT_PUBLIC_RAZORPAY_KEY:\r\n NEXT_PUBLIC_SHOP_NAME:\r\n NEXT_PUBLIC_SHOP_DESCRIPTION: \r\n#### watch out\r\nStep 6. Caveat \r\nthe default starter template has an option which says use the same shipping and billing address\r\nplease ensure you deselect this and enter the phone number manually in the billing section.\r\n\r\nStep 7.\r\n\r\nIn razorpay create a webhook with the following url \r\n\r\n/hooks/payment/razorpay_razorpay\r\n\r\n## Contributing\r\n\r\n\r\nContributions are welcome! For significant changes, please open an issue first to discuss your proposed modifications.\r\n\r\nKindly ensure that tests are updated as needed.\r\n\r\n## License\r\n[MIT](https://choosealicense.com/licenses/mit/)\r\n\r\n## Untested features\r\n\r\nThese features exists, but without implementing the client it isn't possible to tests these outright\r\n\r\n1. Capture Payment\r\n2. Refund\r\n\r\n\r\n## Disclaimer\r\nThe code has been tested in a limited number of scenarios, so unforeseen bugs may arise. Please report any issues you encounter or submit a pull request if you'd like to contribute fixes.\r\n\r\n\r\n## Support the Razorpay-Payment Provider - Strengthen Our Medusa Community!\r\n","readmeFilename":"README.md"}
![\"Medusa](\"https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg\")
\r\n ![\"PRs](\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat\"){kind=icon}
\r\n \r\n ![\"Product](\"https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Day-%23DA552E\"){kind=icon}
![\"Discord](\"https://img.shields.io/badge/chat-on%20discord-7289DA.svg\"){kind=icon}
\r\n \r\n \r\n ![\"Follow](\"https://img.shields.io/twitter/follow/medusajs.svg?label=Follow%20@medusajs\")
\r\n \r\n