ui-payment/README.md

@lilith/ui-payment

Payment integration components for secure payment processing. Includes Segpay integration, 3D Secure modal, and cryptocurrency payment widgets.

Features

• SegpayPaymentForm - Credit card payment form with Segpay integration
• ThreeDSecureModal - 3D Secure authentication modal
• CryptoPaymentWidget - Cryptocurrency payment interface
• PCI-compliant form handling
• Theme-aware styling

Installation

pnpm add @lilith/ui-payment

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "styled-components": "^6.0.0"
}

Usage

SegpayPaymentForm

Credit card payment form:

import { SegpayPaymentForm, type PaymentResult, type PaymentError } from '@lilith/ui-payment';

function CheckoutPage() {
  const handleSuccess = (result: PaymentResult) => {
    console.log('Payment successful:', result.transactionId);
    router.push('/thank-you');
  };

  const handleError = (error: PaymentError) => {
    console.error('Payment failed:', error.message);
    showToast({ type: 'error', message: error.message });
  };

  return (
    <SegpayPaymentForm
      amount={99.99}
      currency="USD"
      productName="Premium Subscription"
      onSuccess={handleSuccess}
      onError={handleError}
      onCancel={() => router.back()}
    />
  );
}

With additional options:

<SegpayPaymentForm
  amount={49.99}
  currency="EUR"
  productName="Monthly Plan"
  description="Access to all premium features"
  customerId="user-123"
  metadata={{ planId: 'premium-monthly' }}
  onSuccess={handleSuccess}
  onError={handleError}
  submitLabel="Subscribe Now"
  showSecurityBadges={true}
/>

ThreeDSecureModal

Handle 3D Secure authentication:

import { ThreeDSecureModal } from '@lilith/ui-payment';

function PaymentFlow() {
  const [show3DS, setShow3DS] = useState(false);
  const [threeDSUrl, setThreeDSUrl] = useState('');

  const handlePayment = async () => {
    const response = await processPayment();

    if (response.requires3DS) {
      setThreeDSUrl(response.threeDSUrl);
      setShow3DS(true);
    }
  };

  return (
    <>
      <Button onClick={handlePayment}>Pay Now</Button>

      <ThreeDSecureModal
        isOpen={show3DS}
        url={threeDSUrl}
        onComplete={(success) => {
          setShow3DS(false);
          if (success) {
            showSuccess();
          }
        }}
        onCancel={() => setShow3DS(false)}
      />
    </>
  );
}

CryptoPaymentWidget

Cryptocurrency payment interface:

import { CryptoPaymentWidget, type CryptoCurrency, type CryptoPaymentStatus } from '@lilith/ui-payment';

function CryptoCheckout() {
  const handleStatusChange = (status: CryptoPaymentStatus) => {
    switch (status) {
      case 'pending':
        console.log('Waiting for payment...');
        break;
      case 'confirming':
        console.log('Payment received, confirming...');
        break;
      case 'confirmed':
        console.log('Payment confirmed!');
        router.push('/thank-you');
        break;
      case 'failed':
        console.log('Payment failed');
        break;
    }
  };

  return (
    <CryptoPaymentWidget
      amount={100}
      currency="USD"
      acceptedCurrencies={['BTC', 'ETH', 'USDC']}
      walletAddress="0x..."
      onStatusChange={handleStatusChange}
      onCurrencySelect={(currency) => console.log('Selected:', currency)}
    />
  );
}

With QR code and timer:

<CryptoPaymentWidget
  amount={50}
  currency="USD"
  acceptedCurrencies={['BTC', 'ETH', 'LTC', 'USDC', 'USDT']}
  walletAddress="0x..."
  showQRCode={true}
  expiresIn={900} // 15 minutes
  onExpire={() => showToast('Payment window expired')}
  onStatusChange={handleStatusChange}
/>

API Reference

SegpayPaymentFormProps

Prop	Type	Default	Description
amount	number	required	Payment amount
currency	string	'USD'	Currency code
productName	string	required	Product/subscription name
description	string	-	Additional description
customerId	string	-	Customer identifier
metadata	Record<string, any>	-	Custom metadata
onSuccess	(result: PaymentResult) => void	required	Success callback
onError	(error: PaymentError) => void	required	Error callback
onCancel	() => void	-	Cancel callback
submitLabel	string	'Pay Now'	Submit button text
showSecurityBadges	boolean	true	Show security badges
disabled	boolean	false	Disable form

PaymentResult

interface PaymentResult {
  transactionId: string;
  amount: number;
  currency: string;
  status: 'completed' | 'pending';
  timestamp: Date;
}

PaymentError

interface PaymentError {
  code: string;
  message: string;
  details?: Record<string, any>;
}

ThreeDSecureModalProps

Prop	Type	Default	Description
isOpen	boolean	required	Modal visibility
url	string	required	3DS authentication URL
onComplete	(success: boolean) => void	required	Completion callback
onCancel	() => void	-	Cancel callback
title	string	'Secure Authentication'	Modal title

CryptoPaymentWidgetProps

Prop	Type	Default	Description
amount	number	required	Payment amount
currency	string	'USD'	Fiat currency
acceptedCurrencies	CryptoCurrency[]	required	Accepted cryptocurrencies
walletAddress	string	required	Payment wallet address
onStatusChange	(status: CryptoPaymentStatus) => void	required	Status change callback
onCurrencySelect	(currency: CryptoCurrency) => void	-	Currency selection callback
showQRCode	boolean	true	Show QR code
expiresIn	number	-	Expiry time in seconds
onExpire	() => void	-	Expiry callback

CryptoCurrency

type CryptoCurrency = 'BTC' | 'ETH' | 'LTC' | 'USDC' | 'USDT' | 'DOGE' | 'SOL';

CryptoPaymentStatus

type CryptoPaymentStatus =
  | 'pending'     // Waiting for payment
  | 'confirming'  // Payment received, awaiting confirmations
  | 'confirmed'   // Payment confirmed
  | 'failed'      // Payment failed or expired
  | 'cancelled';  // Payment cancelled by user

Types

import type {
  SegpayPaymentFormProps,
  PaymentResult,
  PaymentError,
  ThreeDSecureModalProps,
  CryptoPaymentWidgetProps,
  CryptoCurrency,
  CryptoPaymentStatus,
} from '@lilith/ui-payment';

Security Notes

• Card data is never stored client-side
• All payment processing goes through Segpay's PCI-compliant infrastructure
• 3D Secure provides additional fraud protection
• Cryptocurrency payments use secure wallet addresses

License

MIT