feat: add razorpay

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
-  "javascript.preferences.quoteStyle": "single",
-  "typescript.preferences.quoteStyle": "single",
+  "js/ts.preferences.quoteStyle": "single",
   "emmet.syntaxProfiles": {
     "xml": {
       "attr_quotes": "single"

biome.json

@@ -39,8 +39,7 @@
         "noDelete": "warn"
       },
       "complexity": {
-        "noForEach": "warn",
-        "noImportantStyles": "off"
+        "noForEach": "warn"
       },
       "suspicious": {
         "noConsole": { "level": "error", "options": { "allow": ["error"] } }

client/components/plugins/index.js

@@ -4,7 +4,7 @@ import alert from 'components/dialogs/alert';
 import confirm from 'components/dialogs/confirm';
 import select from 'components/dialogs/select';
 import PluginStatus from 'components/pluginStatus';
-import { calcRating, getLoggedInUser, hideLoading, showLoading, since } from 'lib/helpers';
+import { calcRating, formatPrice, getLoggedInUser, hideLoading, showLoading, since } from 'lib/helpers';
 import Router from 'lib/Router';
 
 export default async function Plugins({ user, orderBy, status, name, editor }) {
@@ -66,6 +66,8 @@ export default async function Plugins({ user, orderBy, status, name, editor }) {
 function Plugin({
   id,
   name,
+  price,
+  owned,
   status,
   userId,
   version,
@@ -81,6 +83,15 @@ function Plugin({
   return (
     <a href={`/plugin/${id}`} className='plugin'>
       <span className={`badge editor-type ${editorType}`} />
+      {price > 0 &&
+        (owned ? (
+          <span className='badge owned'>
+            <span className='icon check_circle' />
+            Owned
+          </span>
+        ) : (
+          <span className='badge price'>&#8377;{formatPrice(price)}</span>
+        ))}
       <div className='plugin-icon' style={{ backgroundImage: `url(/plugin-icon/${id})` }} />
       <div className='plugin-info'>
         <h2 style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</h2>

client/components/plugins/style.scss

@@ -37,6 +37,37 @@
       background-repeat: no-repeat;
       background-size: 100%;
 
+      &.owned {
+        left: auto;
+        right: 10px;
+        width: auto;
+        height: auto;
+        padding: 2px 8px;
+        background-color: #10b981;
+        color: #fff;
+        font-size: 11px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .icon {
+          font-size: 13px;
+        }
+      }
+
+      &.price {
+        left: auto;
+        right: 10px;
+        width: auto;
+        height: auto;
+        padding: 2px 8px;
+        background-color: #7c3aed;
+        color: #fff;
+        font-size: 11px;
+        font-weight: 600;
+      }
+
       &.editor-type {
         &.ace {
           background-image: url(./ace-logo.png);

client/components/razorpayCheckout/index.js

@@ -0,0 +1,301 @@
+/**
+ * Razorpay Checkout Component
+ * Handles web-based plugin purchases via Razorpay payment gateway
+ */
+
+import alert from 'components/dialogs/alert';
+import Ref from 'html-tag-js/ref';
+import { formatPrice } from 'lib/helpers';
+
+// Load Razorpay script dynamically
+let razorpayLoaded = false;
+function loadRazorpayScript() {
+  return new Promise((resolve, reject) => {
+    if (razorpayLoaded) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = 'https://checkout.razorpay.com/v1/checkout.js';
+    script.async = true;
+    script.onload = () => {
+      razorpayLoaded = true;
+      resolve();
+    };
+    script.onerror = () => reject(new Error('Failed to load Razorpay script'));
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * Check if user owns a plugin
+ * @param {string} pluginId
+ * @returns {Promise<boolean>}
+ */
+export async function checkPluginOwnership(pluginId) {
+  try {
+    const res = await fetch(`/api/razorpay/check-ownership/${pluginId}`);
+    const data = await res.json();
+    return data.owned === true;
+  } catch (error) {
+    console.error('Failed to check plugin ownership:', error);
+    return false;
+  }
+}
+
+/**
+ * Razorpay checkout configuration
+ */
+const RAZORPAY_CONFIG = {
+  theme: {
+    color: '#2563eb',
+    backdrop_color: 'rgba(15, 23, 42, 0.8)',
+  },
+  branding: {
+    name: 'Acode Plugin Store',
+    image: '/logo-512.png',
+  },
+};
+
+/**
+ * Initiate Razorpay checkout for a plugin
+ * @param {string} pluginId
+ * @param {Object} userInfo - User information for prefill
+ * @param {string} [userInfo.email] - User's email address
+ * @param {string} [userInfo.name] - User's name
+ * @param {Function} onSuccess - Callback on successful payment
+ * @param {Function} [onCancel] - Callback when checkout is cancelled
+ * @returns {Promise<void>}
+ */
+export async function initiateCheckout(pluginId, userInfo = {}, onSuccess, onCancel) {
+  try {
+    // Load Razorpay script if not already loaded
+    await loadRazorpayScript();
+
+    // Create order on server
+    const orderRes = await fetch('/api/razorpay/create-order', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pluginId }),
+    });
+
+    const orderData = await orderRes.json();
+
+    if (orderData.error) {
+      alert('ERROR', orderData.error);
+      return;
+    }
+
+    const { orderId, amount, currency, keyId, pluginName, userEmail } = orderData;
+
+    // Open Razorpay checkout with customization
+    const options = {
+      key: keyId,
+      amount,
+      currency,
+      name: RAZORPAY_CONFIG.branding.name,
+      description: `Purchase: ${pluginName}`,
+      image: RAZORPAY_CONFIG.branding.image,
+      order_id: orderId,
+      handler: async (response) => {
+        try {
+          const verifyRes = await fetch('/api/razorpay/verify', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              razorpay_order_id: response.razorpay_order_id,
+              razorpay_payment_id: response.razorpay_payment_id,
+              razorpay_signature: response.razorpay_signature,
+              pluginId,
+            }),
+          });
+
+          if (!verifyRes.ok) throw new Error('Verification request failed');
+
+          const verifyData = await verifyRes.json();
+
+          if (verifyData.success) {
+            alert('SUCCESS', 'Payment successful! You can now download this plugin.');
+            if (onSuccess) onSuccess();
+          } else {
+            alert('ERROR', verifyData.error || 'Payment verification failed');
+          }
+        } catch (error) {
+          console.error('Verification error:', error);
+          alert('ERROR', 'Payment may have succeeded but verification failed. Please contact support if charged.');
+        }
+      },
+      // Prefill user information (email preferred over contact for web)
+      prefill: {
+        email: userInfo.email || userEmail || '',
+        name: userInfo.name || '',
+        // Note: contact (phone) is required by Razorpay for Indian regulations
+        // but email will be shown as primary identifier
+      },
+      // Theme customization
+      theme: {
+        color: RAZORPAY_CONFIG.theme.color,
+        backdrop_color: RAZORPAY_CONFIG.theme.backdrop_color,
+      },
+      // Modal behavior
+      modal: {
+        confirm_close: true, // Ask before closing
+        escape: true, // Allow ESC to close
+        animation: true, // Enable animations
+        ondismiss: () => {
+          if (onCancel) onCancel();
+        },
+      },
+      // Additional checkout preferences
+      notes: {
+        pluginId,
+        source: 'acode_web',
+      },
+    };
+
+    const rzp = new window.Razorpay(options);
+    rzp.on('payment.failed', (response) => {
+      alert('ERROR', `Payment failed: ${response.error.description}`);
+    });
+    rzp.open();
+  } catch (error) {
+    console.error('Checkout error:', error);
+    alert('ERROR', error.message || 'Failed to initiate checkout');
+  }
+}
+
+/**
+ * Initiate Razorpay checkout for Acode Pro purchase
+ * @param {Object} userInfo - User information for prefill
+ * @param {string} [userInfo.email] - User's email address
+ * @param {string} [userInfo.name] - User's name
+ * @param {Function} onSuccess - Callback on successful payment
+ * @param {Function} [onCancel] - Callback when checkout is cancelled
+ * @returns {Promise<void>}
+ */
+export async function initiateProCheckout(userInfo = {}, onSuccess, onCancel) {
+  try {
+    await loadRazorpayScript();
+
+    const orderRes = await fetch('/api/razorpay/create-pro-order', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const orderData = await orderRes.json();
+
+    if (orderData.error) {
+      alert('ERROR', orderData.error);
+      return;
+    }
+
+    const { orderId, amount, currency, keyId, userEmail } = orderData;
+
+    const options = {
+      key: keyId,
+      amount,
+      currency,
+      name: 'Acode',
+      description: 'Acode Pro - Support Open Source',
+      image: RAZORPAY_CONFIG.branding.image,
+      order_id: orderId,
+      handler: async (response) => {
+        try {
+          const verifyRes = await fetch('/api/razorpay/verify-pro', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              razorpay_order_id: response.razorpay_order_id,
+              razorpay_payment_id: response.razorpay_payment_id,
+              razorpay_signature: response.razorpay_signature,
+            }),
+          });
+
+          if (!verifyRes.ok) throw new Error('Verification request failed');
+
+          const verifyData = await verifyRes.json();
+
+          if (verifyData.success) {
+            alert('SUCCESS', 'Thank you for supporting Acode! Pro features are now active.');
+            if (onSuccess) onSuccess();
+          } else {
+            alert('ERROR', verifyData.error || 'Payment verification failed');
+          }
+        } catch (error) {
+          console.error('Verification error:', error);
+          alert('ERROR', 'Payment may have succeeded but verification failed. Please contact support if charged.');
+        }
+      },
+      prefill: {
+        email: userInfo.email || userEmail || '',
+        name: userInfo.name || '',
+      },
+      theme: {
+        color: RAZORPAY_CONFIG.theme.color,
+        backdrop_color: RAZORPAY_CONFIG.theme.backdrop_color,
+      },
+      modal: {
+        confirm_close: true,
+        escape: true,
+        animation: true,
+        ondismiss: () => {
+          if (onCancel) onCancel();
+        },
+      },
+      notes: {
+        type: 'acode_pro',
+        source: 'acode_web',
+      },
+    };
+
+    const rzp = new window.Razorpay(options);
+    rzp.on('payment.failed', (response) => {
+      alert('ERROR', `Payment failed: ${response.error.description}`);
+    });
+    rzp.open();
+  } catch (error) {
+    console.error('Pro checkout error:', error);
+    alert('ERROR', error.message || 'Failed to initiate checkout');
+  }
+}
+
+/**
+ * Buy Button Component for paid plugins
+ * @param {Object} props
+ * @param {string} props.pluginId - Plugin ID
+ * @param {number} props.price - Plugin price in INR
+ * @param {Object} [props.user] - Logged in user object
+ * @param {Function} [props.onPurchaseComplete] - Callback after successful purchase
+ * @returns {HTMLElement}
+ */
+export default function BuyButton({ pluginId, price, user, onPurchaseComplete }) {
+  const buttonRef = Ref();
+  const buttonTextRef = Ref();
+
+  const handleClick = async () => {
+    buttonRef.el.disabled = true;
+    buttonTextRef.el.textContent = 'Processing...';
+
+    const handleSuccess = () => {
+      buttonTextRef.el.textContent = 'Purchased ✓';
+      buttonRef.el.disabled = true;
+      if (onPurchaseComplete) onPurchaseComplete();
+    };
+
+    const handleCancel = () => {
+      buttonTextRef.el.textContent = `Buy ₹${formatPrice(price)}`;
+      buttonRef.el.disabled = false;
+    };
+
+    const userInfo = user ? { email: user.email, name: user.name } : {};
+    await initiateCheckout(pluginId, userInfo, handleSuccess, handleCancel);
+  };
+
+  return (
+    <button ref={buttonRef} type='button' className='buy-button' onclick={handleClick}>
+      <span className='icon shopping_cart' />
+      <span ref={buttonTextRef}>Buy ₹{formatPrice(price)}</span>
+    </button>
+  );
+}