logix-pay 1.0.0

package/README.md

@@ -0,0 +1,139 @@
+# 💳 Logix Pay
+
+**Logix Pay** is a modern React payment component library that provides secure, SPA-friendly card payment forms for:
+
+- 🟣 Shift4  
+- 🔵 Stripe  
+
+Built for React Router, Next.js, Vite, CRA and any SPA architecture.
+
+No forced redirects. Full control via callbacks.
+
+---
+
+# ✨ Features
+
+- 🔐 Secure card tokenization
+- 🛡️ 3D Secure support
+- ⚡ Callback-based success & error handling
+- 🎨 Fully customizable UI
+- 📦 Library-ready components
+- 🚀 SPA friendly (no page reloads)
+
+---
+
+# 📦 Installation
+
+```bash
+npm install logix-pay
+```
+
+---
+
+# 📁 Package Exports
+
+```js
+export { default as ShiftPaymentForm } from "./ShiftPaymentForm";
+export { default as StripePaymentForm } from "./StripePaymentForm";
+```
+
+---
+
+# 🟣 Shift4 Payment Form
+
+## Usage
+
+```jsx
+import { ShiftPaymentForm } from "logix-pay";
+
+<ShiftPaymentForm
+  amount={1000}
+  currency="USD"
+  color="#0d6efd"
+  formWidth={400}
+  formBorderRadius={20}
+  formBackgroundColor="#fff"
+  inputPadding={12}
+  baseUrl="https://api.example.com/payment/"
+  userId="user-123"
+  description="Premium subscription"
+  successPage={(message) => {
+    console.log("Payment successful:", message);
+  }}
+  errorPage={(error) => {
+    console.error("Payment failed:", error);
+  }}
+/>
+```
+
+---
+
+# 🔵 Stripe Payment Form
+
+## Usage
+
+```jsx
+import { StripePaymentForm } from "logix-pay";
+
+<StripePaymentForm
+  amount={1000}
+  currency="USD"
+  color="#635bff"
+  formWidth={400}
+  formBorderRadius={20}
+  formBackgroundColor="#fff"
+  inputPadding={12}
+  baseUrl="https://api.example.com/payment/"
+  userId="user-123"
+  description="Premium subscription"
+  successPage={(message) => {
+    console.log("Payment successful:", message);
+  }}
+  errorPage={(error) => {
+    console.error("Payment failed:", error);
+  }}
+/>
+```
+
+---
+
+# 🔧 Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|----------|------------|
+| amount | number | ✅ | — | Payment amount in smallest currency unit (e.g. cents) |
+| currency | string | ✅ | — | ISO currency code (USD, EUR, etc.) |
+| baseUrl | string | ✅ | — | Backend payment API base URL |
+| userId | string | ✅ | — | Unique user identifier |
+| successPage | function | ✅ | — | Triggered on successful payment |
+| errorPage | function | ✅ | — | Triggered on failed payment |
+| description | string | ❌ | — | Payment description |
+| color | string | ❌ | provider default | Primary theme color |
+| formWidth | number | ❌ | 400 | Form width (px) |
+| formBorderRadius | number | ❌ | 20 | Form border radius (px) |
+| formBackgroundColor | string | ❌ | "#fff" | Form background color |
+| inputPadding | number | ❌ | 12 | Input padding (px) |
+
+---
+
+# 🧠 How It Works
+
+1. Card details are securely tokenized by Shift4 or Stripe.
+2. Token is sent to your backend (`baseUrl`).
+3. Backend confirms the payment.
+4. Component returns result via callback.
+5. You control routing and UI updates.
+
+---
+
+# 🔐 Security
+
+- Card data is handled securely by the provider.
+- Tokenization ensures PCI compliance scope reduction.
+- Supports 3D Secure authentication flows.
+
+---
+
+# 📄 License
+
+MIT