frontend_razorpay.js

import { useCallback } from "react";
import { Button } from "@chakra-ui/react";
import useRazorpay from "react-razorpay";

export default function Pay() {
  const Razorpay = useRazorpay();
  const handlePayment = useCallback(async () => {
    const order = {
      id: "order_JZtmToLbdp5p2F",
      entity: "order",
      amount: 315000,
      amount_paid: 0,
      amount_due: 315000,
      currency: "INR",
      receipt: null,
      offer_id: null,
      status: "created",
      attempts: 0,
      notes: {
        orderId: "11",
      },
      created_at: 1653577390,
    };

    const options = {
      key: "rzp_test_geb28z2BjD98tb",
      amount: "3000",
      currency: "INR",
      name: "Acme Corp",
      description: "Test Transaction",
      image: "https://example.com/your_logo",
      order_id: order.id,
      handler: (res) => {
        console.log(res);
      },
      prefill: {
        name: "Piyush Garg",
        email: "youremail@example.com",
        contact: "9999999999",
      },
      notes: {
        service: "123",
        type: "onboarding",
      },
      theme: {
        color: "#3399cc",
      },
    };

    const rzpay = new Razorpay(options);
    rzpay.open();
  }, [Razorpay]);
  return (
    <>
      Pay
      <Button onClick={handlePayment}>Pay</Button>
    </>
  );
}