npm package: @fractalpay/fractalpay-next-test
Description: <!-- # 🧩 FractalPay React Components
Author: Mukul
Latest version: 0.0.37

<!-- # 🧩 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.

```tsx

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

---

### 2. `RequestPreAuthPayment`

Initiate a pre-authorization payment.

```tsx

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

---

### 3. `GetPaymentPage`

Render a payment page interface with full customization.

```tsx

<GetPaymentPage
  fractalpayClientKey="your-client-key"
  amount="150.00"
  name="Alice"
  email="alice@example.com"
  phone="+19876543210"
/>
```

---

### 4. `PreAuthPayment`

Render a pre-auth payment page interface.

```tsx

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

---

### 5. `AddCard`

Add a card with a simplified experience.

```tsx

<AddCard
  fractalpayClientKey="your-client-key"
  customerId="cust_456"
  name="Jane Smith"
  email="jane@example.com"
  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. -->








<!-- ####################New Readme.md file  -->


<!-- # React Payment Components

A set of reusable React components to handle various payment-related actions such as requesting payments, pre-authorizations, and adding cards.

## Components

### `RequestPayment`

Sends a payment request to a customer.

**Props:**
- `merchantPublicKey` (string) – **required**
- `amount` (string) – **required**
- `customerId`, `orderID`, `name`, `email`, `phone`, `from`, `webname`, `discount`, `tax`, `surcharge`, `require_3ds` – *optional*

---

### `RequestPreAuthPayment`

Requests a pre-authorized payment.

**Props:**
- `merchantPublicKey` (string) – **required**
- `amount` (string) – **required**
- `customerId`, `orderID`, `name`, `email`, `phone`, `from`, `webname`, `discount`, `tax`, `surcharge`, `require_3ds` – *optional*

---

### `GetPaymentPage`

Renders a hosted payment page.

**Props:**
- `merchantPublicKey` (string) – **required**
- `amount` (string) – **required**
- `customerId`, `orderID`, `from`, `discount`, `tax`, `surcharge` – *optional*

---

### `PreAuthPayment`

Renders a pre-authorization payment page.

**Props:**
- `merchantPublicKey` (string) – **required**
- `amount` (string) – **required**
- `customerId`, `orderID`, `from`, `discount`, `tax`, `surcharge` – *optional*

---

### `AddCardEasyPay`

Allows adding a card via EasyPay.

**Props:**
- `merchantPublicKey` (string) – **required**
- `customerId` – *optional*

---

### `AddCardSky`

Renders a card input flow with additional options.

**Props:**
- `session_token` (string) – **required**
- `callback` (function) – **required**
- `isloading` (boolean) – **required**
- `onCancel` (function) – **required**
- `showChecks` (boolean) – **required**
- `merchantName` (string) – **required**

---

## Usage

```tsx
import { 
  RequestPayment, 
  RequestPreAuthPayment, 
  GetPaymentPage, 
  PreAuthPayment, 
  AddCard, 
  AddCardSky 
} from './[path-to-component]';

<RequestPayment 
  merchantPublicKey="your_public_key"
  amount="100.00"
/> -->