I am trying to setup razorpay payment gateway following their quick integration help documentation. The integration is similar to a paypal checkout button which opens up a modal window to complete the payment.
The first step is putting in a javascript code into a page. I tried the HMTL element and it shows in design, but not in preview. Frustratingly it does show up correctly when I set it as “display as an iframe”. But the full payment flow continues within the iframe! If it works as expect, it should show up similar to this demo page here.
Code is here:
<form action="https://www.example.com/payment/success/" method="POST"><script src="https://checkout.razorpay.com/v1/checkout.js" data-key="YOUR_KEY_ID" // Enter the Test API Key ID generated from Dashboard → Settings → API Keys data-amount="29935" // Amount is in currency subunits. Hence, 29935 refers to 29935 paise or ₹299.35. data-currency="INR"//You can accept international payments by changing the currency code. Contact our Support Team to enable International for your account data-order_id="order_CgmcjRh9ti2lP7"//Replace with the order_id generated by you in the backend. data-buttontext="Pay with Razorpay" data-name="Acme Corp" data-description="A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami" data-image="https://example.com/your_logo.jpg" data-prefill.name="Gaurav Kumar" data-prefill.email="gaurav.kumar@example.com" data-theme.color="#F37254"></script><input type="hidden" custom="Hidden Element" name="hidden"></form>
Any pointers on how I should be going about this will be highly appreciated!