@fractalpay/fractalpay-next-dev 0.0.1

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

package/README.md

@@ -0,0 +1,154 @@
+# 🧩 FractalPay React Components
+
+A collection of React components to easily integrate FractalPay payment flows into your React applications.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install fractalpay-react
+```
+
+or
+
+```bash
+yarn add fractalpay-react
+```
+
+---
+
+## 🧪 Components
+
+### 1. `RequestPayment`
+
+Initiate a payment request with optional customer and order details.
+
+```tsx
+import { RequestPayment } from 'fractalpay-react';
+
+<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
+import { RequestPreAuthPayment } from 'fractalpay-react';
+
+<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
+import { GetPaymentPage } from 'fractalpay-react';
+
+<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
+import { PreAuthPayment } from 'fractalpay-react';
+
+<PreAuthPayment
+  fractalpayClientKey="your-client-key"
+  amount="75.00"
+/>
+```
+
+---
+
+### 5. `AddCard`
+
+Add a new payment card for a customer.
+
+```tsx
+import { AddCard } from 'fractalpay-react';
+
+<AddCard
+  fractalpayClientKey="your-client-key"
+  customerId="cust_456"
+/>
+```
+
+---
+
+### 6. `AddCardEasyPay`
+
+Add a card with a simplified experience.
+
+```tsx
+import { AddCardEasyPay } from 'fractalpay-react';
+
+<AddCardEasyPay
+  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.

package/dist/index.d.mts

@@ -0,0 +1,84 @@
+import React from 'react';
+
+interface Props$5 {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+    require_3ds?: boolean;
+}
+declare function RequestPayment(props: Props$5): React.JSX.Element;
+
+interface Props$4 {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+    require_3ds?: boolean;
+}
+declare function RequestPreAuthPayment(props: Props$4): React.JSX.Element;
+
+type Props$3 = {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+};
+declare function GetPaymentPage(props: Props$3): React.JSX.Element;
+
+type Props$2 = {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+};
+declare function PreAuthPayment(props: Props$2): React.JSX.Element;
+
+type Props$1 = {
+    fractalpayClientKey: string;
+    customerId?: string;
+};
+declare function AddCard(props: Props$1): React.JSX.Element;
+
+type Props = {
+    fractalpayClientKey: string;
+    customerId?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+};
+declare function AddCardEasyPay(props: Props): React.JSX.Element;
+
+export { AddCard, AddCardEasyPay, GetPaymentPage, PreAuthPayment, RequestPayment, RequestPreAuthPayment };

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+
+interface Props$5 {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+    require_3ds?: boolean;
+}
+declare function RequestPayment(props: Props$5): React.JSX.Element;
+
+interface Props$4 {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+    require_3ds?: boolean;
+}
+declare function RequestPreAuthPayment(props: Props$4): React.JSX.Element;
+
+type Props$3 = {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+};
+declare function GetPaymentPage(props: Props$3): React.JSX.Element;
+
+type Props$2 = {
+    fractalpayClientKey: string;
+    customerId?: string;
+    orderID?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    from?: string;
+    amount: string;
+    webname?: string;
+    discount?: string;
+    tax?: string;
+    surcharge?: string;
+};
+declare function PreAuthPayment(props: Props$2): React.JSX.Element;
+
+type Props$1 = {
+    fractalpayClientKey: string;
+    customerId?: string;
+};
+declare function AddCard(props: Props$1): React.JSX.Element;
+
+type Props = {
+    fractalpayClientKey: string;
+    customerId?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+};
+declare function AddCardEasyPay(props: Props): React.JSX.Element;
+
+export { AddCard, AddCardEasyPay, GetPaymentPage, PreAuthPayment, RequestPayment, RequestPreAuthPayment };