🧩 FractalPay React Components

A collection of React components to easily integrate FractalPay payment flows into your React applications.

🧪 Components

1. RequestPayment

Initiate a payment request with optional customer and order details.

<RequestPayment
  fractalpayClientKey="your-client-key"
  amount="100.00"
  customerId="cust_123"
  orderID="order_001"
  name="John Doe"
  email="[email protected]"
  phone="+11234567890"
  from="checkout"
  webname="MyWebsite"
  discount="10"
  tax="5"
  surcharge="2"
  require_3ds={true}
/>

2. RequestPreAuthPayment

Initiate a pre-authorization payment.

<RequestPreAuthPayment
  fractalpayClientKey="your-client-key"
  amount="100.00"
  customerId="cust_123"
  orderID="order_001"
/>

3. GetPaymentPage

Render a payment page interface with full customization.

<GetPaymentPage
  fractalpayClientKey="your-client-key"
  amount="150.00"
  name="Alice"
  email="[email protected]"
  phone="+19876543210"
/>

4. PreAuthPayment

Render a pre-auth payment page interface.

<PreAuthPayment
  fractalpayClientKey="your-client-key"
  amount="75.00"
/>

5. AddCard

Add a card with a simplified experience.

<AddCard
  fractalpayClientKey="your-client-key"
  customerId="cust_456"
  name="Jane Smith"
  email="[email protected]"
  phone="+10987654321"
/>

⚙️ Props Overview

| Prop | Type | Required | Description | |-----------------------|-----------|----------|--------------------------------------| | fractalpayClientKey | string | ✅ | Your unique FractalPay client key | | customerId | string | ❌ | Customer identifier | | orderID | string | ❌ | Order identifier | | name | string | ❌ | Customer name | | email | string | ❌ | Customer email | | phone | string | ❌ | Customer phone number | | from | string | ❌ | Origin of the payment request | | amount | string | ✅ | Amount to be charged | | webname | string | ❌ | Website name | | discount | string | ❌ | Discount amount | | tax | string | ❌ | Tax amount | | surcharge | string | ❌ | Additional surcharge | | require_3ds | boolean | ❌ | Enable 3D Secure authentication |

📄 License

MIT License © 2025 FractalPay Inc.