How can I integrate Razorpay payment gateway with Webflow?
- Embed Razorpay Checkout using custom code in a Webflow Embed element to initiate payments via Razorpay’s JavaScript SDK.
- Use the API Key ID (never the secret) and define a handler to process responses; optionally trigger Webflow form submissions from this handler.
- For secure verification and advanced logic like signature validation, set up a backend server and use webhooks.
To integrate the Razorpay payment gateway with Webflow, you'll need to use Razorpay’s Checkout integration via custom code and connect it through a form submission or CMS. Below are the key steps.
1. Understand Webflow's Native Payment Limitations
- Webflow Ecommerce supports Stripe and PayPal but does not natively support Razorpay.
- To use Razorpay, you'll need to bypass native checkout by embedding Razorpay’s custom checkout form and handling order logic separately.
2. Sign Up and Get Razorpay API Keys
- Sign up at https://dashboard.razorpay.com/.
- Go to Settings > API Keys and generate your Key ID and Secret.
- For Webflow, you’ll typically only use the Key ID in frontend code. Backend logic (like verifying the payment) must happen on a secure server.
3. Create a Razorpay Checkout Button Using Custom Embed Code
- In Webflow Designer, drag in an Embed element where you want the Razorpay button.
- Add this simplified Razorpay Checkout code inside the embed (do not include secret key here):
```
<button id="rzp-button1">Pay Now</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
"key": "YOURKEYID", // Replace with your Razorpay Key ID
"amount": "50000", // Amount in paise (50000 = ₹500.00)
"currency": "INR",
"name": "Your Company",
"description": "Website Payment",
"handler": function (response){
alert("Payment successful. Payment ID: " + response.razorpaypaymentid);
// You can redirect or trigger a Webflow form submission here
},
"theme": {
"color": "#3399cc"
}
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
rzp1.open();
e.preventDefault();
}
</script>
```
- Modify parameters such as
amount,currency, andnameas needed. - Do not include the secret key anywhere in your Webflow code—it's a security risk.
4. Handle Payment Confirmation
- Use the
handlerfunction (as shown above) to capture the returnedpayment_id. - If needed, trigger a Webflow form submission via JavaScript inside the handler to log transaction details (simulate a hidden form submission).
- For advanced backend handling (e.g., order fulfillment), you must set up a backend using tools like Make (Integromat) or Zapier, or use a custom server.
5. Test in Razorpay Sandbox Mode
- In Razorpay dashboard, use test mode to simulate payments before going live.
- Use Razorpay’s test cards for this purpose.
6. Secure Your Integration (Advanced)
- For full security, especially if validating orders or verifying signatures, you must:
- Set up a secure backend server (e.g., on Firebase, Node.js, etc.).
- Use Razorpay’s payment verification webhook to confirm transactions.
- Never trust frontend response alone for validating payments.
Summary
You can integrate Razorpay with Webflow by embedding Razorpay’s Checkout script using custom code. Payments are handled via Razorpay’s JavaScript SDK, and for secure verification or advanced logic, a backend is required. Webflow can’t natively process payments through Razorpay, so you must bypass its e-commerce platform and use Razorpay directly with custom code.