How can I integrate Razorpay payment gateway with Webflow?

To integrate Razorpay with Webflow, you'll need to manually embed Razorpay's checkout system using custom code, since Webflow does not have native integrations for Razorpay.

1. Set Up a Razorpay Account

• Sign up or log in to your Razorpay account at razorpay.com.
• After verification, go to Dashboard > Settings > API Keys.
• Generate API keys (Key ID and Secret) for use in custom code.

2. Create a Razorpay Checkout Form

• Razorpay offers two types of checkout integrations: Standard Checkout (redirects to a hosted Razorpay page) and Custom Checkout (embedded in your site).
• For Webflow, Standard Checkout is easier to implement via embed code.

3. Add Razorpay Embed Script in Webflow

• In Webflow Designer, go to the page where the payment button should appear.
• Use an Embed element to insert this placeholder custom script:

<button id="rzp-button1">Pay Now</button><script src="https://checkout.razorpay.com/v1/checkout.js"></script><script>  var options = {    "key": "YOUR_KEY_ID", // Replace with your Key ID    "amount": "50000", // Amount in paise. 50000 = ₹500    "currency": "INR",    "name": "Your Company",    "description": "Test Transaction",    "image": "https://your_logo_url",    "handler": function (response){        alert('Payment successful. Payment ID: ' + response.razorpay_payment_id);    },    "prefill": {      "name": "Your Name",      "email": "test@example.com",      "contact": "9999999999"    },    "theme": {      "color": "#3399cc"    }  };    var rzp1 = new Razorpay(options);  document.getElementById('rzp-button1').onclick = function(e){    rzp1.open();    e.preventDefault();  }</script>

• Replace placeholder values (YOUR_KEY_ID, amount, name, etc.) with actual data or dynamic values if passed from Webflow CMS.

4. Optional: Add Webflow CMS Integration

• If you're using Webflow CMS to generate product data:
• Use Webflow CMS bindings inside the Embed element (e.g., amount: "{{wf {"path":"price"} }}").
• Format the value as needed (Razorpay accepts amounts in paise, i.e., ₹500 = 50000).

5. Test the Payment Integration

• Use Razorpay's test mode to run safe test transactions.
• Confirm the event handler returns valid payment IDs and test various user flows.

6. Handle Post-Payment Logic (Optional)

• Use Razorpay webhooks to send data to a backend or external automation service (e.g., Zapier, Make).
• Webflow alone can't handle backend verification, so use a third-party tool or server to verify payments.

Summary

To use Razorpay in Webflow, embed Razorpay’s checkout.js manually using Webflow’s Embed element, replace key values with your own, and optionally connect CMS fields. For advanced features like post-payment validation, use external services or a server-based webhook handler.