broxpay 1.0.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +4 -36
  2. package/dist/index.d.ts +28 -5
  3. package/dist/index.js +6 -10
  4. package/package.json +1 -1
  5. package/src/index.tsx +32 -12
package/README.md CHANGED
@@ -9,7 +9,7 @@ npm install broxpay
9
9
  ```
10
10
 
11
11
  1. **Install:** `npm install broxpay`
12
- 2. **Use:** Import `BroxPayButton` and pass your `apiKey`.
12
+ 2. **Use:** Import `BroxPayButton` and pass your `publicKey`.
13
13
 
14
14
  ## Usage
15
15
 
@@ -20,7 +20,7 @@ import { BroxPayButton } from 'broxpay';
20
20
 
21
21
  function App() {
22
22
  const config = {
23
- apiKey: 'pk_test_123',
23
+ publicKey: 'pk_test_123',
24
24
  amount: 50,
25
25
  email: 'user@example.com'
26
26
  };
@@ -46,7 +46,7 @@ function App() {
46
46
 
47
47
  const handlePay = () => {
48
48
  checkout({
49
- apiKey: 'pk_live_...', // Your Public Key
49
+ publicKey: 'pk_live_...', // Your Public Key
50
50
  amount: 50,
51
51
  email: 'user@example.com',
52
52
  onSuccess: (data) => console.log('Paid!', data),
@@ -58,43 +58,13 @@ function App() {
58
58
  }
59
59
  ```
60
60
 
61
- ### Option 3: Backend Token (Recommended for Production)
62
-
63
- For secure server-side initialized transactions, generate a checkout token from your backend and pass it to the component:
64
-
65
- ```jsx
66
- import { BroxPayButton } from 'broxpay';
67
-
68
- function SecureCheckout({ checkoutToken }) {
69
- // checkoutToken is generated from your backend via BroxPay API
70
- return (
71
- <BroxPayButton
72
- token={checkoutToken}
73
- onSuccess={(data) => {
74
- // Verify payment on your server
75
- fetch('/api/verify-payment', {
76
- method: 'POST',
77
- body: JSON.stringify(data)
78
- });
79
- }}
80
- onError={(error) => console.log('Payment failed', error)}
81
- >
82
- Complete Payment
83
- </BroxPayButton>
84
- );
85
- }
86
- ```
87
-
88
- This approach keeps your secret key on the server and allows you to attach metadata to the transaction.
89
-
90
61
  ## Props
91
62
 
92
63
  ### BroxPayButton
93
64
 
94
65
  | Prop | Type | Required | Description |
95
66
  |------|------|----------|-------------|
96
- | `config` | object | No* | Configuration object (apiKey, amount, etc.) |
97
- | `token` | string | No* | Checkout token from backend |
67
+ | `config` | object | Yes | Configuration object (publicKey, amount, etc.) |
98
68
  | `onSuccess` | function | No | Called on success |
99
69
  | `onError` | function | No | Called on error |
100
70
  | `onClose` | function | No | Called on close |
@@ -102,8 +72,6 @@ This approach keeps your secret key on the server and allows you to attach metad
102
72
  | `className` | string | No | CSS class |
103
73
  | `disabled` | boolean | No | Disable button |
104
74
 
105
- *\*Either `config` or `token` is required.*
106
-
107
75
  ## Support
108
76
 
109
77
  Email: support@broxpay.com
package/dist/index.d.ts CHANGED
@@ -8,9 +8,33 @@ interface BroxPayCallbacks {
8
8
  onClose?: () => void;
9
9
  }
10
10
  interface CheckoutConfig {
11
- apiKey: string;
11
+ /** Your BroxPay public key (pk_live_... or pk_test_...). Never use your secret key here. */
12
+ publicKey: string;
13
+ /** Payment amount in GHS */
12
14
  amount: number;
13
- email: string;
15
+ /** Customer email address (required for standard checkout) */
16
+ email?: string;
17
+ /** Your unique reference for this transaction */
18
+ transactionId?: string;
19
+ /** Payment description */
20
+ description?: string;
21
+ /** Customer's full name */
22
+ customerName?: string;
23
+ /** Customer's phone number (e.g., "0241234567") */
24
+ customerPhone?: string;
25
+ /** Customer's email (alternative to email field) */
26
+ customerEmail?: string;
27
+ /** URL to redirect after payment completion */
28
+ redirectUrl?: string;
29
+ /** URL to receive webhook notifications */
30
+ callbackUrl?: string;
31
+ /** Mobile money network */
32
+ network?: 'MTN' | 'VODAFONE' | 'AIRTELTIGO';
33
+ /** Service type for the payment */
34
+ serviceType?: string;
35
+ /** Custom metadata object for your reference */
36
+ metadata?: Record<string, any>;
37
+ /** Additional custom fields */
14
38
  [key: string]: any;
15
39
  }
16
40
  declare global {
@@ -26,8 +50,7 @@ export declare function useBroxPay(): {
26
50
  checkout: (tokenOrConfig: string | CheckoutConfig, callbacks?: BroxPayCallbacks) => void;
27
51
  };
28
52
  interface BroxPayButtonProps {
29
- token?: string;
30
- config?: CheckoutConfig;
53
+ config: CheckoutConfig;
31
54
  onSuccess?: (data: any) => void;
32
55
  onError?: (error: any) => void;
33
56
  onClose?: () => void;
@@ -35,5 +58,5 @@ interface BroxPayButtonProps {
35
58
  className?: string;
36
59
  disabled?: boolean;
37
60
  }
38
- export declare function BroxPayButton({ token, config, onSuccess, onError, onClose, children, className, disabled }: BroxPayButtonProps): React.JSX.Element;
61
+ export declare function BroxPayButton({ config, onSuccess, onError, onClose, children, className, disabled }: BroxPayButtonProps): React.JSX.Element;
39
62
  export {};
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ function loadBroxPay(callback) {
6
6
  return;
7
7
  }
8
8
  const script = document.createElement('script');
9
- script.src = 'https://pay.broxpay.com/inline.js';
9
+ script.src = 'https://pay.broxghana.com/inline.js';
10
10
  script.onload = callback;
11
11
  document.head.appendChild(script);
12
12
  }
@@ -27,18 +27,14 @@ export function useBroxPay() {
27
27
  };
28
28
  return { checkout };
29
29
  }
30
- export function BroxPayButton({ token, config, onSuccess, onError, onClose, children, className, disabled }) {
30
+ export function BroxPayButton({ config, onSuccess, onError, onClose, children, className, disabled }) {
31
31
  const { checkout } = useBroxPay();
32
32
  const handleClick = () => {
33
- if (token) {
34
- checkout(token, { onSuccess, onError, onClose });
35
- }
36
- else if (config) {
37
- checkout(config, { onSuccess, onError, onClose });
38
- }
39
- else {
40
- console.error('BroxPay: Either token or config must be provided');
33
+ if (!config) {
34
+ console.error('BroxPay: config is required');
35
+ return;
41
36
  }
37
+ checkout(config, { onSuccess, onError, onClose });
42
38
  };
43
39
  return (React.createElement("button", { onClick: handleClick, className: className, disabled: disabled }, children));
44
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "broxpay",
3
- "version": "1.0.2",
3
+ "version": "1.2.0",
4
4
  "description": "Simple React component for BroxPay inline checkout",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/index.tsx CHANGED
@@ -11,9 +11,33 @@ interface BroxPayCallbacks {
11
11
  }
12
12
 
13
13
  interface CheckoutConfig {
14
- apiKey: string;
14
+ /** Your BroxPay public key (pk_live_... or pk_test_...). Never use your secret key here. */
15
+ publicKey: string;
16
+ /** Payment amount in GHS */
15
17
  amount: number;
16
- email: string;
18
+ /** Customer email address (required for standard checkout) */
19
+ email?: string;
20
+ /** Your unique reference for this transaction */
21
+ transactionId?: string;
22
+ /** Payment description */
23
+ description?: string;
24
+ /** Customer's full name */
25
+ customerName?: string;
26
+ /** Customer's phone number (e.g., "0241234567") */
27
+ customerPhone?: string;
28
+ /** Customer's email (alternative to email field) */
29
+ customerEmail?: string;
30
+ /** URL to redirect after payment completion */
31
+ redirectUrl?: string;
32
+ /** URL to receive webhook notifications */
33
+ callbackUrl?: string;
34
+ /** Mobile money network */
35
+ network?: 'MTN' | 'VODAFONE' | 'AIRTELTIGO';
36
+ /** Service type for the payment */
37
+ serviceType?: string;
38
+ /** Custom metadata object for your reference */
39
+ metadata?: Record<string, any>;
40
+ /** Additional custom fields */
17
41
  [key: string]: any;
18
42
  }
19
43
 
@@ -36,7 +60,7 @@ function loadBroxPay(callback: () => void) {
36
60
  }
37
61
 
38
62
  const script = document.createElement('script');
39
- script.src = 'https://pay.broxpay.com/inline.js';
63
+ script.src = 'https://pay.broxghana.com/inline.js';
40
64
  script.onload = callback;
41
65
  document.head.appendChild(script);
42
66
  }
@@ -64,8 +88,7 @@ export function useBroxPay() {
64
88
 
65
89
  // Button component
66
90
  interface BroxPayButtonProps {
67
- token?: string;
68
- config?: CheckoutConfig;
91
+ config: CheckoutConfig;
69
92
  onSuccess?: (data: any) => void;
70
93
  onError?: (error: any) => void;
71
94
  onClose?: () => void;
@@ -75,7 +98,6 @@ interface BroxPayButtonProps {
75
98
  }
76
99
 
77
100
  export function BroxPayButton({
78
- token,
79
101
  config,
80
102
  onSuccess,
81
103
  onError,
@@ -87,13 +109,11 @@ export function BroxPayButton({
87
109
  const { checkout } = useBroxPay();
88
110
 
89
111
  const handleClick = () => {
90
- if (token) {
91
- checkout(token, { onSuccess, onError, onClose });
92
- } else if (config) {
93
- checkout(config, { onSuccess, onError, onClose });
94
- } else {
95
- console.error('BroxPay: Either token or config must be provided');
112
+ if (!config) {
113
+ console.error('BroxPay: config is required');
114
+ return;
96
115
  }
116
+ checkout(config, { onSuccess, onError, onClose });
97
117
  };
98
118
 
99
119
  return (