Razorpay
Answered
Birman posted this in #help-forum
BirmanOP
IDK
Answered by Naeemgg
Have you encountered this particular article, https://www.freecodecamp.org/news/integrate-a-payment-gateway-in-next-js-and-react-with-razorpay-and-tailwindcss/, up until now?
36 Replies
BirmanOP
ok so if i want to implement a razorpay payment button and have dynamic values, i have to first create a new order and then provide its id and other details to a script element that has the src as the src of razorpay
<form action="/api/orders/session/verify-payment" method="POST">
<script
id="razorpay-script"
src="https://checkout.razorpay.com/v1/checkout.js"
data-key={razorPayConfig("test").key_id}
data-amount={razorPayData.amount}
data-currency="INR"
data-order_id={razorPayData.id}
data-buttontext="Pay with Razorpay"
data-name=""
data-description="s"
data-image=""
/>
</form>this scipt element adds an input element below it that has the type "submit"
But as there is 1 more new input element in the client side generated page while it wasn't there in the server side render
nextjs is throwing error saying client and server component mismatch
and shows an error and the button hides
and shows an error and the button hides
Have you encountered this particular article, https://www.freecodecamp.org/news/integrate-a-payment-gateway-in-next-js-and-react-with-razorpay-and-tailwindcss/, up until now?
Answer
Using client-side components for handling payments and related tasks might not be the best approach. It's generally recommended to handle these functionalities on the server side.
BirmanOP
owh hes creating a script element using js
okkkk thanks
BirmanOP
thank you
BirmanOP
btw do you know any way to stop a useState from runnign more than 1 time
BirmanOP
i tried by created a generated state
which is false at first
but still 2 are generated
can you share how are you using it
I'm guessing something like this
{state && <button>pay with Razorpay</button>}BirmanOP
document.createElement with that i am creating the script element
and then with formElement.appenChild i am adding it to the form element
and then with formElement.appenChild i am adding it to the form element
and with the state i am checking
if(!state) then create and append the element and then set the state to true
if(!state) then create and append the element and then set the state to true
otherwise do not
It doesn't make any sense to me why'd you
create and append child in jsxBirmanOP
bru ;-;
bcz if i directly add the script element
it adds an input button element
which breaks the code
as the client side has +1 input element as compared to server side generated
is there in any sandbox or codebase where one can view your code??
BirmanOP
its private code :<
yeah it should be, but the portion which is causing you trouble could be public (excluding the sensitive creds)
this is what happens when i directly place <script> element inside the component
Yeah I've seen those in #discussions
have you given this approach a shot??
BirmanOP
yes i did as it said but its resulting in script element generating more than 1 time
Ohh no
It should not