broxpay 1.0.1 → 1.1.0

package/README.md

@@ -9,7 +9,7 @@ npm install broxpay
 ```
 
 1. **Install:** `npm install broxpay`
-2. **Use:** Import `BroxPayButton` and pass your `apiKey`.
+2. **Use:** Import `BroxPayButton` and pass your `publicKey`.
 
 ## Usage
 
@@ -20,7 +20,7 @@ import { BroxPayButton } from 'broxpay';
 
 function App() {
   const config = {
-    apiKey: 'pk_test_123',
+    publicKey: 'pk_test_123',
     amount: 50,
     email: 'user@example.com'
   };
@@ -46,7 +46,7 @@ function App() {
 
   const handlePay = () => {
     checkout({
-      apiKey: 'pk_live_...', // Your Public Key
+      publicKey: 'pk_live_...', // Your Public Key
       amount: 50,
       email: 'user@example.com',
       onSuccess: (data) => console.log('Paid!', data),
@@ -58,13 +58,42 @@ function App() {
 }
 ```
 
+### Option 3: Backend Token (Recommended for Production)
+
+For secure server-side initialized transactions, generate a checkout token from your backend and pass it to the component:
+
+```jsx
+import { BroxPayButton } from 'broxpay';
+
+function SecureCheckout({ checkoutToken }) {
+  // checkoutToken is generated from your backend via BroxPay API
+  return (
+    <BroxPayButton
+      token={checkoutToken}
+      onSuccess={(data) => {
+        // Verify payment on your server
+        fetch('/api/verify-payment', {
+          method: 'POST',
+          body: JSON.stringify(data)
+        });
+      }}
+      onError={(error) => console.log('Payment failed', error)}
+    >
+      Complete Payment
+    </BroxPayButton>
+  );
+}
+```
+
+This approach keeps your secret key on the server and allows you to attach metadata to the transaction.
+
 ## Props
 
 ### BroxPayButton
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| `config` | object | No* | Configuration object (apiKey, amount, etc.) |
+| `config` | object | No* | Configuration object (publicKey, amount, etc.) |
 | `token` | string | No* | Checkout token from backend |
 | `onSuccess` | function | No | Called on success |
 | `onError` | function | No | Called on error |

package/dist/index.d.ts

@@ -8,9 +8,33 @@ interface BroxPayCallbacks {
     onClose?: () => void;
 }
 interface CheckoutConfig {
-    apiKey: string;
+    /** Your BroxPay public key (pk_live_... or pk_test_...). Never use your secret key here. */
+    publicKey: string;
+    /** Payment amount in GHS */
     amount: number;
-    email: string;
+    /** Customer email address (required for standard checkout) */
+    email?: string;
+    /** Your unique reference for this transaction */
+    transactionId?: string;
+    /** Payment description */
+    description?: string;
+    /** Customer's full name */
+    customerName?: string;
+    /** Customer's phone number (e.g., "0241234567") */
+    customerPhone?: string;
+    /** Customer's email (alternative to email field) */
+    customerEmail?: string;
+    /** URL to redirect after payment completion */
+    redirectUrl?: string;
+    /** URL to receive webhook notifications */
+    callbackUrl?: string;
+    /** Mobile money network */
+    network?: 'MTN' | 'VODAFONE' | 'AIRTELTIGO';
+    /** Service type for the payment */
+    serviceType?: string;
+    /** Custom metadata object for your reference */
+    metadata?: Record<string, any>;
+    /** Additional custom fields */
     [key: string]: any;
 }
 declare global {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "broxpay",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Simple React component for BroxPay inline checkout",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.tsx

@@ -11,9 +11,33 @@ interface BroxPayCallbacks {
 }
 
 interface CheckoutConfig {
-    apiKey: string;
+    /** Your BroxPay public key (pk_live_... or pk_test_...). Never use your secret key here. */
+    publicKey: string;
+    /** Payment amount in GHS */
     amount: number;
-    email: string;
+    /** Customer email address (required for standard checkout) */
+    email?: string;
+    /** Your unique reference for this transaction */
+    transactionId?: string;
+    /** Payment description */
+    description?: string;
+    /** Customer's full name */
+    customerName?: string;
+    /** Customer's phone number (e.g., "0241234567") */
+    customerPhone?: string;
+    /** Customer's email (alternative to email field) */
+    customerEmail?: string;
+    /** URL to redirect after payment completion */
+    redirectUrl?: string;
+    /** URL to receive webhook notifications */
+    callbackUrl?: string;
+    /** Mobile money network */
+    network?: 'MTN' | 'VODAFONE' | 'AIRTELTIGO';
+    /** Service type for the payment */
+    serviceType?: string;
+    /** Custom metadata object for your reference */
+    metadata?: Record<string, any>;
+    /** Additional custom fields */
     [key: string]: any;
 }