broxpay 1.0.0

package/README.md

@@ -0,0 +1,80 @@
+# BroxPay React
+
+Simple React component for BroxPay payments.
+
+## Install
+
+```bash
+npm install broxpay
+```
+
+1. **Install:** `npm install broxpay`
+2. **Use:** Import `BroxPayButton` and pass your `apiKey`.
+
+## Usage
+
+### Option 1: Simple (Public Key)
+
+```jsx
+import { BroxPayButton } from 'broxpay';
+
+function App() {
+  const config = {
+    apiKey: 'pk_test_123',
+    amount: 50,
+    email: 'user@example.com'
+  };
+
+  return (
+    <BroxPayButton
+      config={config}
+      onSuccess={(data) => console.log('Paid!', data)}
+    >
+      Pay Now
+    </BroxPayButton>
+  );
+}
+```
+
+### Option 2: Custom Button
+
+```jsx
+import { useBroxPay } from 'broxpay';
+
+function App() {
+  const { checkout } = useBroxPay();
+
+  const handlePay = () => {
+    checkout({
+      apiKey: 'pk_live_...', // Your Public Key
+      amount: 50,
+      email: 'user@example.com',
+      onSuccess: (data) => console.log('Paid!', data),
+      onError: (error) => console.log('Failed', error)
+    });
+  };
+
+  return <button onClick={handlePay}>Pay Now</button>;
+}
+```
+
+## Props
+
+### BroxPayButton
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `config` | object | No* | Configuration object (apiKey, amount, etc.) |
+| `token` | string | No* | Checkout token from backend |
+| `onSuccess` | function | No | Called on success |
+| `onError` | function | No | Called on error |
+| `onClose` | function | No | Called on close |
+| `children` | ReactNode | Yes | Button content |
+| `className` | string | No | CSS class |
+| `disabled` | boolean | No | Disable button |
+
+*\*Either `config` or `token` is required.*
+
+## Support
+
+Email: support@broxpay.com

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+interface BroxPayConfig {
+    baseUrl?: string;
+}
+interface BroxPayCallbacks {
+    onSuccess?: (data: any) => void;
+    onError?: (error: any) => void;
+    onClose?: () => void;
+}
+interface CheckoutConfig {
+    apiKey: string;
+    amount: number;
+    email: string;
+    [key: string]: any;
+}
+declare global {
+    interface Window {
+        BroxPay: {
+            checkout: (tokenOrConfig: string | CheckoutConfig, callbacks: BroxPayCallbacks) => void;
+            close: () => void;
+            config: (options: BroxPayConfig) => void;
+        };
+    }
+}
+export declare function useBroxPay(): {
+    checkout: (tokenOrConfig: string | CheckoutConfig, callbacks?: BroxPayCallbacks) => void;
+};
+interface BroxPayButtonProps {
+    token?: string;
+    config?: CheckoutConfig;
+    onSuccess?: (data: any) => void;
+    onError?: (error: any) => void;
+    onClose?: () => void;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function BroxPayButton({ token, config, onSuccess, onError, onClose, children, className, disabled }: BroxPayButtonProps): React.JSX.Element;
+export {};

package/dist/index.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+// Load BroxPay script
+function loadBroxPay(callback) {
+    if (window.BroxPay) {
+        callback();
+        return;
+    }
+    const script = document.createElement('script');
+    script.src = 'https://pay.broxpay.com/inline.js';
+    script.onload = callback;
+    document.head.appendChild(script);
+}
+// Hook to use BroxPay
+export function useBroxPay() {
+    const loaded = useRef(false);
+    useEffect(() => {
+        loadBroxPay(() => {
+            loaded.current = true;
+        });
+    }, []);
+    const checkout = (tokenOrConfig, callbacks) => {
+        if (!window.BroxPay) {
+            console.error('BroxPay not loaded yet');
+            return;
+        }
+        window.BroxPay.checkout(tokenOrConfig, callbacks || {});
+    };
+    return { checkout };
+}
+export function BroxPayButton({ token, config, onSuccess, onError, onClose, children, className, disabled }) {
+    const { checkout } = useBroxPay();
+    const handleClick = () => {
+        if (token) {
+            checkout(token, { onSuccess, onError, onClose });
+        }
+        else if (config) {
+            checkout(config, { onSuccess, onError, onClose });
+        }
+        else {
+            console.error('BroxPay: Either token or config must be provided');
+        }
+    };
+    return (React.createElement("button", { onClick: handleClick, className: className, disabled: disabled }, children));
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "broxpay",
+  "version": "1.0.0",
+  "description": "Simple React component for BroxPay inline checkout",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "keywords": [
+    "broxpay",
+    "payment",
+    "checkout",
+    "react"
+  ],
+  "author": "BroxPay",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, ReactNode } from 'react';
+
+interface BroxPayConfig {
+    baseUrl?: string;
+}
+
+interface BroxPayCallbacks {
+    onSuccess?: (data: any) => void;
+    onError?: (error: any) => void;
+    onClose?: () => void;
+}
+
+interface CheckoutConfig {
+    apiKey: string;
+    amount: number;
+    email: string;
+    [key: string]: any;
+}
+
+// Declare BroxPay global
+declare global {
+    interface Window {
+        BroxPay: {
+            checkout: (tokenOrConfig: string | CheckoutConfig, callbacks: BroxPayCallbacks) => void;
+            close: () => void;
+            config: (options: BroxPayConfig) => void;
+        };
+    }
+}
+
+// Load BroxPay script
+function loadBroxPay(callback: () => void) {
+    if (window.BroxPay) {
+        callback();
+        return;
+    }
+
+    const script = document.createElement('script');
+    script.src = 'https://pay.broxpay.com/inline.js';
+    script.onload = callback;
+    document.head.appendChild(script);
+}
+
+// Hook to use BroxPay
+export function useBroxPay() {
+    const loaded = useRef(false);
+
+    useEffect(() => {
+        loadBroxPay(() => {
+            loaded.current = true;
+        });
+    }, []);
+
+    const checkout = (tokenOrConfig: string | CheckoutConfig, callbacks?: BroxPayCallbacks) => {
+        if (!window.BroxPay) {
+            console.error('BroxPay not loaded yet');
+            return;
+        }
+        window.BroxPay.checkout(tokenOrConfig, callbacks || {});
+    };
+
+    return { checkout };
+}
+
+// Button component
+interface BroxPayButtonProps {
+    token?: string;
+    config?: CheckoutConfig;
+    onSuccess?: (data: any) => void;
+    onError?: (error: any) => void;
+    onClose?: () => void;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+
+export function BroxPayButton({
+    token,
+    config,
+    onSuccess,
+    onError,
+    onClose,
+    children,
+    className,
+    disabled
+}: BroxPayButtonProps) {
+    const { checkout } = useBroxPay();
+
+    const handleClick = () => {
+        if (token) {
+            checkout(token, { onSuccess, onError, onClose });
+        } else if (config) {
+            checkout(config, { onSuccess, onError, onClose });
+        } else {
+            console.error('BroxPay: Either token or config must be provided');
+        }
+    };
+
+    return (
+        <button
+            onClick={handleClick}
+            className={className}
+            disabled={disabled}
+        >
+            {children}
+        </button>
+    );
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2015",
+        "module": "ESNext",
+        "lib": [
+            "ES2015",
+            "DOM"
+        ],
+        "jsx": "react",
+        "declaration": true,
+        "outDir": "./dist",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "moduleResolution": "node"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}