💳 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

npm install logix-pay

📁 Package Exports

export { default as ShiftPaymentForm } from "./ShiftPaymentForm";
export { default as StripePaymentForm } from "./StripePaymentForm";

🟣 Shift4 Payment Form

Usage

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

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