npm - paymongo-cli - Versions diffs - 1.4.4 → 1.4.7 - Mend

paymongo-cli 1.4.4 → 1.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

package/.github/copilot-instructions.md +95 -95
package/CHANGELOG.md +85 -1
package/LICENSE +20 -20
package/dist/.tsbuildinfo +1 -1
package/dist/commands/config.js +30 -15
package/dist/commands/dev/logs.js +3 -3
package/dist/commands/dev/status.js +2 -2
package/dist/commands/dev/stop.js +3 -3
package/dist/commands/dev.js +9 -8
package/dist/commands/env.js +6 -6
package/dist/commands/generate/templates/checkout-page/index.js +520 -520
package/dist/commands/generate/templates/payment-intent/javascript.js +68 -68
package/dist/commands/generate/templates/payment-intent/typescript.js +92 -92
package/dist/commands/generate/templates/webhook-handler/javascript.js +192 -147
package/dist/commands/generate/templates/webhook-handler/typescript.js +147 -117
package/dist/commands/generate.js +43 -37
package/dist/commands/init.js +25 -8
package/dist/commands/login.js +56 -19
package/dist/commands/payments.js +9 -8
package/dist/commands/team/index.js +11 -9
package/dist/commands/trigger.js +58 -18
package/dist/commands/webhooks.js +8 -7
package/dist/index.js +9 -2
package/dist/services/analytics/service.js +24 -19
package/dist/services/api/client.js +16 -16
package/dist/services/config/manager.js +6 -8
package/dist/services/dev/process-manager.js +30 -32
package/dist/services/dev/server.js +45 -39
package/dist/services/team/service.js +4 -1
package/dist/types/schemas.js +38 -9
package/dist/utils/bulk.js +36 -4
package/dist/utils/constants.js +11 -1
package/dist/utils/errors.js +6 -0
package/dist/utils/validator.js +10 -9
package/dist/utils/webhook-store.js +18 -15
package/eslint.config.ts +70 -70
package/package.json +2 -2
package/coverage/base.css +0 -224
package/coverage/block-navigation.js +0 -87
package/coverage/favicon.png +0 -0
package/coverage/index.html +0 -281
package/coverage/lcov-report/base.css +0 -224
package/coverage/lcov-report/block-navigation.js +0 -87
package/coverage/lcov-report/favicon.png +0 -0
package/coverage/lcov-report/index.html +0 -281
package/coverage/lcov-report/prettify.css +0 -1
package/coverage/lcov-report/prettify.js +0 -2
package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
package/coverage/lcov-report/sorter.js +0 -210
package/coverage/lcov.info +0 -5053
package/coverage/prettify.css +0 -1
package/coverage/prettify.js +0 -2
package/coverage/sort-arrow-sprite.png +0 -0
package/coverage/sorter.js +0 -210
package/dist/commands/config.d.ts +0 -21
package/dist/commands/config.d.ts.map +0 -1
package/dist/commands/config.js.map +0 -1
package/dist/commands/dev.d.ts +0 -16
package/dist/commands/dev.d.ts.map +0 -1
package/dist/commands/dev.js.map +0 -1
package/dist/commands/env.d.ts +0 -4
package/dist/commands/env.d.ts.map +0 -1
package/dist/commands/env.js.map +0 -1
package/dist/commands/init.d.ts +0 -15
package/dist/commands/init.d.ts.map +0 -1
package/dist/commands/init.js.map +0 -1
package/dist/commands/login.d.ts +0 -20
package/dist/commands/login.d.ts.map +0 -1
package/dist/commands/login.js.map +0 -1
package/dist/commands/payments.d.ts +0 -41
package/dist/commands/payments.d.ts.map +0 -1
package/dist/commands/payments.js.map +0 -1
package/dist/commands/team/index.d.ts +0 -4
package/dist/commands/team/index.d.ts.map +0 -1
package/dist/commands/team/index.js.map +0 -1
package/dist/commands/trigger.d.ts +0 -4
package/dist/commands/trigger.d.ts.map +0 -1
package/dist/commands/trigger.js.map +0 -1
package/dist/commands/webhooks.d.ts +0 -23
package/dist/commands/webhooks.d.ts.map +0 -1
package/dist/commands/webhooks.js.map +0 -1
package/dist/index.d.ts +0 -3
package/dist/index.d.ts.map +0 -1
package/dist/index.js.map +0 -1
package/dist/services/analytics/service.d.ts +0 -35
package/dist/services/analytics/service.d.ts.map +0 -1
package/dist/services/analytics/service.js.map +0 -1
package/dist/services/api/client.d.ts +0 -26
package/dist/services/api/client.d.ts.map +0 -1
package/dist/services/api/client.js.map +0 -1
package/dist/services/api/rate-limiter.d.ts +0 -64
package/dist/services/api/rate-limiter.d.ts.map +0 -1
package/dist/services/api/rate-limiter.js.map +0 -1
package/dist/services/api/undici-client.d.ts +0 -39
package/dist/services/api/undici-client.d.ts.map +0 -1
package/dist/services/api/undici-client.js +0 -288
package/dist/services/api/undici-client.js.map +0 -1
package/dist/services/config/manager.d.ts +0 -16
package/dist/services/config/manager.d.ts.map +0 -1
package/dist/services/config/manager.js.map +0 -1
package/dist/services/dev/process-manager.d.ts +0 -50
package/dist/services/dev/process-manager.d.ts.map +0 -1
package/dist/services/dev/process-manager.js.map +0 -1
package/dist/services/github/auth.d.ts +0 -15
package/dist/services/github/auth.d.ts.map +0 -1
package/dist/services/github/auth.js +0 -79
package/dist/services/github/auth.js.map +0 -1
package/dist/services/github/client.d.ts +0 -95
package/dist/services/github/client.d.ts.map +0 -1
package/dist/services/github/client.js +0 -130
package/dist/services/github/client.js.map +0 -1
package/dist/services/github/sync.d.ts +0 -26
package/dist/services/github/sync.d.ts.map +0 -1
package/dist/services/github/sync.js +0 -203
package/dist/services/github/sync.js.map +0 -1
package/dist/services/payments/simulator.d.ts +0 -28
package/dist/services/payments/simulator.d.ts.map +0 -1
package/dist/services/payments/simulator.js.map +0 -1
package/dist/services/team/service.d.ts +0 -44
package/dist/services/team/service.d.ts.map +0 -1
package/dist/services/team/service.js.map +0 -1
package/dist/services/web/server.d.ts +0 -31
package/dist/services/web/server.d.ts.map +0 -1
package/dist/services/web/server.js +0 -206
package/dist/services/web/server.js.map +0 -1
package/dist/types/paymongo.d.ts +0 -204
package/dist/types/paymongo.d.ts.map +0 -1
package/dist/types/paymongo.js.map +0 -1
package/dist/types/schemas.d.ts +0 -80
package/dist/types/schemas.d.ts.map +0 -1
package/dist/types/schemas.js.map +0 -1
package/dist/utils/bulk.d.ts +0 -62
package/dist/utils/bulk.d.ts.map +0 -1
package/dist/utils/bulk.js.map +0 -1
package/dist/utils/cache.d.ts +0 -22
package/dist/utils/cache.d.ts.map +0 -1
package/dist/utils/cache.js.map +0 -1
package/dist/utils/constants.d.ts +0 -32
package/dist/utils/constants.d.ts.map +0 -1
package/dist/utils/constants.js.map +0 -1
package/dist/utils/errors.d.ts +0 -34
package/dist/utils/errors.d.ts.map +0 -1
package/dist/utils/errors.js.map +0 -1
package/dist/utils/logger.d.ts +0 -20
package/dist/utils/logger.d.ts.map +0 -1
package/dist/utils/logger.js.map +0 -1
package/dist/utils/spinner.d.ts +0 -17
package/dist/utils/spinner.d.ts.map +0 -1
package/dist/utils/spinner.js.map +0 -1
package/dist/utils/validator.d.ts +0 -10
package/dist/utils/validator.d.ts.map +0 -1
package/dist/utils/validator.js.map +0 -1
package/dist/utils/webhook-store.d.ts +0 -22
package/dist/utils/webhook-store.d.ts.map +0 -1
package/dist/utils/webhook-store.js.map +0 -1

package/dist/commands/generate/templates/checkout-page/index.js CHANGED Viewed

@@ -1,530 +1,530 @@
 export function getHtmlTemplate() {
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PayMongo Checkout</title>
-  <script src="https://js.paymongo.com/v1/paymongo.js"></script>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      max-width: 400px;
-      margin: 50px auto;
-      padding: 20px;
-    }
-    .checkout-form {
-      background: #f9f9f9;
-      padding: 20px;
-      border-radius: 8px;
-    }
-    .form-group {
-      margin-bottom: 15px;
-    }
-    label {
-      display: block;
-      margin-bottom: 5px;
-      font-weight: 500;
-    }
-    input, select {
-      width: 100%;
-      padding: 10px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      font-size: 16px;
-    }
-    button {
-      width: 100%;
-      padding: 12px;
-      background: #007bff;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      font-size: 16px;
-      cursor: pointer;
-    }
-    button:hover {
-      background: #0056b3;
-    }
-    button:disabled {
-      background: #ccc;
-      cursor: not-allowed;
-    }
-  </style>
-</head>
-<body>
-  <div class="checkout-form">
-    <h2>Complete Your Payment</h2>
-    <form id="payment-form">
-      <div class="form-group">
-        <label for="email">Email</label>
-        <input type="email" id="email" required>
-      </div>
-      <div class="form-group">
-        <label for="card-number">Card Number</label>
-        <input type="text" id="card-number" placeholder="1234 5678 9012 3456" required>
-      </div>
-      <div class="form-group">
-        <label for="expiry">Expiry Date</label>
-        <input type="text" id="expiry" placeholder="MM/YY" required>
-      </div>
-      <div class="form-group">
-        <label for="cvc">CVC</label>
-        <input type="text" id="cvc" placeholder="123" required>
-      </div>
-      <button type="submit" id="pay-button">Pay ₱100.00</button>
-    </form>
-  </div>
-  <script>
-    // Replace with your actual client key from the payment intent
-    const clientKey = 'YOUR_CLIENT_KEY_HERE';
-    const paymongo = new Paymongo(clientKey);
-    document.getElementById('payment-form').addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const payButton = document.getElementById('pay-button');
-      payButton.disabled = true;
-      payButton.textContent = 'Processing...';
-      try {
-        // Create payment method
-        const paymentMethod = await paymongo.createPaymentMethod({
-          type: 'card',
-          details: {
-            card_number: document.getElementById('card-number').value.replace(/\\s/g, ''),
-            exp_month: document.getElementById('expiry').value.split('/')[0],
-            exp_year: '20' + document.getElementById('expiry').value.split('/')[1],
-            cvc: document.getElementById('cvc').value,
-          },
-          billing: {
-            email: document.getElementById('email').value,
-          },
-        });
-        // Attach payment method to payment intent
-        const result = await paymongo.attachPaymentIntent('YOUR_PAYMENT_INTENT_ID', {
-          payment_method: paymentMethod.id,
-          return_url: window.location.origin + '/success',
-        });
-        if (result.next_action) {
-          // Handle 3D Secure or other next actions
-          window.location.href = result.next_action.redirect.url;
-        } else {
-          // Payment succeeded
-          window.location.href = '/success';
-        }
-      } catch (error) {
-        console.error('Payment failed:', error);
-        alert('Payment failed. Please try again.');
-        payButton.disabled = false;
-        payButton.textContent = 'Pay ₱100.00';
-      }
-    });
-  </script>
-</body>
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PayMongo Checkout</title>
+  <script src="https://js.paymongo.com/v1/paymongo.js"></script>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 400px;
+      margin: 50px auto;
+      padding: 20px;
+    }
+    .checkout-form {
+      background: #f9f9f9;
+      padding: 20px;
+      border-radius: 8px;
+    }
+    .form-group {
+      margin-bottom: 15px;
+    }
+    label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: 500;
+    }
+    input, select {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+    button {
+      width: 100%;
+      padding: 12px;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 16px;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #0056b3;
+    }
+    button:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+  </style>
+</head>
+<body>
+  <div class="checkout-form">
+    <h2>Complete Your Payment</h2>
+    <form id="payment-form">
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" required>
+      </div>
+      <div class="form-group">
+        <label for="card-number">Card Number</label>
+        <input type="text" id="card-number" placeholder="1234 5678 9012 3456" required>
+      </div>
+      <div class="form-group">
+        <label for="expiry">Expiry Date</label>
+        <input type="text" id="expiry" placeholder="MM/YY" required>
+      </div>
+      <div class="form-group">
+        <label for="cvc">CVC</label>
+        <input type="text" id="cvc" placeholder="123" required>
+      </div>
+      <button type="submit" id="pay-button">Pay ₱100.00</button>
+    </form>
+  </div>
+  <script>
+    // Replace with your actual client key from the payment intent
+    const clientKey = 'YOUR_CLIENT_KEY_HERE';
+    const paymongo = new Paymongo(clientKey);
+    document.getElementById('payment-form').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const payButton = document.getElementById('pay-button');
+      payButton.disabled = true;
+      payButton.textContent = 'Processing...';
+      try {
+        // Create payment method
+        const paymentMethod = await paymongo.createPaymentMethod({
+          type: 'card',
+          details: {
+            card_number: document.getElementById('card-number').value.replace(/\\s/g, ''),
+            exp_month: document.getElementById('expiry').value.split('/')[0],
+            exp_year: '20' + document.getElementById('expiry').value.split('/')[1],
+            cvc: document.getElementById('cvc').value,
+          },
+          billing: {
+            email: document.getElementById('email').value,
+          },
+        });
+        // Attach payment method to payment intent
+        const result = await paymongo.attachPaymentIntent('YOUR_PAYMENT_INTENT_ID', {
+          payment_method: paymentMethod.id,
+          return_url: window.location.origin + '/success',
+        });
+        if (result.next_action) {
+          // Handle 3D Secure or other next actions
+          window.location.href = result.next_action.redirect.url;
+        } else {
+          // Payment succeeded
+          window.location.href = '/success';
+        }
+      } catch (error) {
+        console.error('Payment failed:', error);
+        alert('Payment failed. Please try again.');
+        payButton.disabled = false;
+        payButton.textContent = 'Pay ₱100.00';
+      }
+    });
+  </script>
+</body>
 </html>`;
 }
 export function getReactTemplate() {
-    return `import React, { useState } from 'react';
-interface CheckoutFormProps {
-  clientKey: string;
-  paymentIntentId: string;
-  amount: number;
-  onSuccess: (result: any) => void;
-  onError: (error: any) => void;
-}
-const CheckoutForm: React.FC<CheckoutFormProps> = ({
-  clientKey,
-  paymentIntentId,
-  amount,
-  onSuccess,
-  onError
-}) => {
-  const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState({
-    email: '',
-    cardNumber: '',
-    expiry: '',
-    cvc: ''
-  });
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    try {
-      // Load PayMongo script dynamically if not already loaded
-      if (!window.Paymongo) {
-        await new Promise((resolve, reject) => {
-          const script = document.createElement('script');
-          script.src = 'https://js.paymongo.com/v1/paymongo.js';
-          script.onload = resolve;
-          script.onerror = reject;
-          document.head.appendChild(script);
-        });
-      }
-      const paymongo = new (window as any).Paymongo(clientKey);
-      // Create payment method
-      const paymentMethod = await paymongo.createPaymentMethod({
-        type: 'card',
-        details: {
-          card_number: formData.cardNumber.replace(/\\s/g, ''),
-          exp_month: parseInt(formData.expiry.split('/')[0]),
-          exp_year: 2000 + parseInt(formData.expiry.split('/')[1]),
-          cvc: formData.cvc,
-        },
-        billing: {
-          email: formData.email,
-        },
-      });
-      // Attach payment method to payment intent
-      const result = await paymongo.attachPaymentIntent(paymentIntentId, {
-        payment_method: paymentMethod.id,
-        return_url: window.location.origin + '/success',
-      });
-      onSuccess(result);
-    } catch (error) {
-      onError(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-  return (
-    <div style={{ maxWidth: '400px', margin: '50px auto', padding: '20px' }}>
-      <div style={{
-        background: '#f9f9f9',
-        padding: '20px',
-        borderRadius: '8px'
-      }}>
-        <h2>Complete Your Payment</h2>
-        <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: '15px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
-              Email
-            </label>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleInputChange}
-              required
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-            />
-          </div>
-          <div style={{ marginBottom: '15px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
-              Card Number
-            </label>
-            <input
-              type="text"
-              name="cardNumber"
-              value={formData.cardNumber}
-              onChange={handleInputChange}
-              placeholder="1234 5678 9012 3456"
-              required
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-            />
-          </div>
-          <div style={{ marginBottom: '15px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
-              Expiry Date
-            </label>
-            <input
-              type="text"
-              name="expiry"
-              value={formData.expiry}
-              onChange={handleInputChange}
-              placeholder="MM/YY"
-              required
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-            />
-          </div>
-          <div style={{ marginBottom: '15px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
-              CVC
-            </label>
-            <input
-              type="text"
-              name="cvc"
-              value={formData.cvc}
-              onChange={handleInputChange}
-              placeholder="123"
-              required
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-            />
-          </div>
-          <button
-            type="submit"
-            disabled={loading}
-            style={{
-              width: '100%',
-              padding: '12px',
-              background: loading ? '#ccc' : '#007bff',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              fontSize: '16px',
-              cursor: loading ? 'not-allowed' : 'pointer'
-            }}
-          >
-            {loading ? 'Processing...' : \`Pay ₱\${(amount / 100).toFixed(2)}\`}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-};
+    return `import React, { useState } from 'react';
+interface CheckoutFormProps {
+  clientKey: string;
+  paymentIntentId: string;
+  amount: number;
+  onSuccess: (result: any) => void;
+  onError: (error: any) => void;
+}
+const CheckoutForm: React.FC<CheckoutFormProps> = ({
+  clientKey,
+  paymentIntentId,
+  amount,
+  onSuccess,
+  onError
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    cardNumber: '',
+    expiry: '',
+    cvc: ''
+  });
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      // Load PayMongo script dynamically if not already loaded
+      if (!window.Paymongo) {
+        await new Promise((resolve, reject) => {
+          const script = document.createElement('script');
+          script.src = 'https://js.paymongo.com/v1/paymongo.js';
+          script.onload = resolve;
+          script.onerror = reject;
+          document.head.appendChild(script);
+        });
+      }
+      const paymongo = new (window as any).Paymongo(clientKey);
+      // Create payment method
+      const paymentMethod = await paymongo.createPaymentMethod({
+        type: 'card',
+        details: {
+          card_number: formData.cardNumber.replace(/\\s/g, ''),
+          exp_month: parseInt(formData.expiry.split('/')[0]),
+          exp_year: 2000 + parseInt(formData.expiry.split('/')[1]),
+          cvc: formData.cvc,
+        },
+        billing: {
+          email: formData.email,
+        },
+      });
+      // Attach payment method to payment intent
+      const result = await paymongo.attachPaymentIntent(paymentIntentId, {
+        payment_method: paymentMethod.id,
+        return_url: window.location.origin + '/success',
+      });
+      onSuccess(result);
+    } catch (error) {
+      onError(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <div style={{ maxWidth: '400px', margin: '50px auto', padding: '20px' }}>
+      <div style={{
+        background: '#f9f9f9',
+        padding: '20px',
+        borderRadius: '8px'
+      }}>
+        <h2>Complete Your Payment</h2>
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: '15px' }}>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
+              Email
+            </label>
+            <input
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleInputChange}
+              required
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '16px'
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: '15px' }}>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
+              Card Number
+            </label>
+            <input
+              type="text"
+              name="cardNumber"
+              value={formData.cardNumber}
+              onChange={handleInputChange}
+              placeholder="1234 5678 9012 3456"
+              required
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '16px'
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: '15px' }}>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
+              Expiry Date
+            </label>
+            <input
+              type="text"
+              name="expiry"
+              value={formData.expiry}
+              onChange={handleInputChange}
+              placeholder="MM/YY"
+              required
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '16px'
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: '15px' }}>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>
+              CVC
+            </label>
+            <input
+              type="text"
+              name="cvc"
+              value={formData.cvc}
+              onChange={handleInputChange}
+              placeholder="123"
+              required
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '16px'
+              }}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            style={{
+              width: '100%',
+              padding: '12px',
+              background: loading ? '#ccc' : '#007bff',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              fontSize: '16px',
+              cursor: loading ? 'not-allowed' : 'pointer'
+            }}
+          >
+            {loading ? 'Processing...' : \`Pay ₱\${(amount / 100).toFixed(2)}\`}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
 export default CheckoutForm;`;
 }
 export function getVueTemplate() {
-    return `<template>
-  <div class="checkout-container">
-    <div class="checkout-form">
-      <h2>Complete Your Payment</h2>
-      <form @submit.prevent="handleSubmit">
-        <div class="form-group">
-          <label for="email">Email</label>
-          <input
-            v-model="formData.email"
-            type="email"
-            id="email"
-            required
-          >
-        </div>
-        <div class="form-group">
-          <label for="cardNumber">Card Number</label>
-          <input
-            v-model="formData.cardNumber"
-            type="text"
-            id="cardNumber"
-            placeholder="1234 5678 9012 3456"
-            required
-          >
-        </div>
-        <div class="form-group">
-          <label for="expiry">Expiry Date</label>
-          <input
-            v-model="formData.expiry"
-            type="text"
-            id="expiry"
-            placeholder="MM/YY"
-            required
-          >
-        </div>
-        <div class="form-group">
-          <label for="cvc">CVC</label>
-          <input
-            v-model="formData.cvc"
-            type="text"
-            id="cvc"
-            placeholder="123"
-            required
-          >
-        </div>
-        <button
-          type="submit"
-          :disabled="loading"
-          class="pay-button"
-        >
-          {{ loading ? 'Processing...' : \`Pay ₱\${(amount / 100).toFixed(2)}\` }}
-        </button>
-      </form>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'CheckoutForm',
-  props: {
-    clientKey: {
-      type: String,
-      required: true
-    },
-    paymentIntentId: {
-      type: String,
-      required: true
-    },
-    amount: {
-      type: Number,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      formData: {
-        email: '',
-        cardNumber: '',
-        expiry: '',
-        cvc: ''
-      }
-    };
-  },
-  methods: {
-    async handleSubmit() {
-      this.loading = true;
-      try {
-        // Load PayMongo script if not loaded
-        if (!window.Paymongo) {
-          await this.loadPayMongoScript();
-        }
-        const paymongo = new window.Paymongo(this.clientKey);
-        // Create payment method
-        const paymentMethod = await paymongo.createPaymentMethod({
-          type: 'card',
-          details: {
-            card_number: this.formData.cardNumber.replace(/\\s/g, ''),
-            exp_month: parseInt(this.formData.expiry.split('/')[0]),
-            exp_year: 2000 + parseInt(this.formData.expiry.split('/')[1]),
-            cvc: this.formData.cvc,
-          },
-          billing: {
-            email: this.formData.email,
-          },
-        });
-        // Attach payment method to payment intent
-        const result = await paymongo.attachPaymentIntent(this.paymentIntentId, {
-          payment_method: paymentMethod.id,
-          return_url: window.location.origin + '/success',
-        });
-        this.$emit('success', result);
-      } catch (error) {
-        console.error('Payment failed:', error);
-        this.$emit('error', error);
-      } finally {
-        this.loading = false;
-      }
-    },
-    loadPayMongoScript() {
-      return new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = 'https://js.paymongo.com/v1/paymongo.js';
-        script.onload = resolve;
-        script.onerror = reject;
-        document.head.appendChild(script);
-      });
-    }
-  }
-};
-</script>
-<style scoped>
-.checkout-container {
-  max-width: 400px;
-  margin: 50px auto;
-  padding: 20px;
-}
-.checkout-form {
-  background: #f9f9f9;
-  padding: 20px;
-  border-radius: 8px;
-}
-.form-group {
-  margin-bottom: 15px;
-}
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-}
-input {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 16px;
-  box-sizing: border-box;
-}
-.pay-button {
-  width: 100%;
-  padding: 12px;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 16px;
-  cursor: pointer;
-}
-.pay-button:hover:not(:disabled) {
-  background: #0056b3;
-}
-.pay-button:disabled {
-  background: #ccc;
-  cursor: not-allowed;
-}
+    return `<template>
+  <div class="checkout-container">
+    <div class="checkout-form">
+      <h2>Complete Your Payment</h2>
+      <form @submit.prevent="handleSubmit">
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input
+            v-model="formData.email"
+            type="email"
+            id="email"
+            required
+          >
+        </div>
+        <div class="form-group">
+          <label for="cardNumber">Card Number</label>
+          <input
+            v-model="formData.cardNumber"
+            type="text"
+            id="cardNumber"
+            placeholder="1234 5678 9012 3456"
+            required
+          >
+        </div>
+        <div class="form-group">
+          <label for="expiry">Expiry Date</label>
+          <input
+            v-model="formData.expiry"
+            type="text"
+            id="expiry"
+            placeholder="MM/YY"
+            required
+          >
+        </div>
+        <div class="form-group">
+          <label for="cvc">CVC</label>
+          <input
+            v-model="formData.cvc"
+            type="text"
+            id="cvc"
+            placeholder="123"
+            required
+          >
+        </div>
+        <button
+          type="submit"
+          :disabled="loading"
+          class="pay-button"
+        >
+          {{ loading ? 'Processing...' : \`Pay ₱\${(amount / 100).toFixed(2)}\` }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CheckoutForm',
+  props: {
+    clientKey: {
+      type: String,
+      required: true
+    },
+    paymentIntentId: {
+      type: String,
+      required: true
+    },
+    amount: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      formData: {
+        email: '',
+        cardNumber: '',
+        expiry: '',
+        cvc: ''
+      }
+    };
+  },
+  methods: {
+    async handleSubmit() {
+      this.loading = true;
+      try {
+        // Load PayMongo script if not loaded
+        if (!window.Paymongo) {
+          await this.loadPayMongoScript();
+        }
+        const paymongo = new window.Paymongo(this.clientKey);
+        // Create payment method
+        const paymentMethod = await paymongo.createPaymentMethod({
+          type: 'card',
+          details: {
+            card_number: this.formData.cardNumber.replace(/\\s/g, ''),
+            exp_month: parseInt(this.formData.expiry.split('/')[0]),
+            exp_year: 2000 + parseInt(this.formData.expiry.split('/')[1]),
+            cvc: this.formData.cvc,
+          },
+          billing: {
+            email: this.formData.email,
+          },
+        });
+        // Attach payment method to payment intent
+        const result = await paymongo.attachPaymentIntent(this.paymentIntentId, {
+          payment_method: paymentMethod.id,
+          return_url: window.location.origin + '/success',
+        });
+        this.$emit('success', result);
+      } catch (error) {
+        console.error('Payment failed:', error);
+        this.$emit('error', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    loadPayMongoScript() {
+      return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = 'https://js.paymongo.com/v1/paymongo.js';
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.checkout-container {
+  max-width: 400px;
+  margin: 50px auto;
+  padding: 20px;
+}
+.checkout-form {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+.form-group {
+  margin-bottom: 15px;
+}
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+}
+input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+.pay-button {
+  width: 100%;
+  padding: 12px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.pay-button:hover:not(:disabled) {
+  background: #0056b3;
+}
+.pay-button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
 </style>`;
 }
 export function getCheckoutPageTemplate(language) {