react-paystack - npm Package Compare versions

Comparing version 4.0.3 to 5.0.0

dist/index.es.js

 import React, { useState, useEffect, createContext, forwardRef, useContext } from 'react';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var cachedScripts = [];
@@ -58,12 +103,14 @@ function usePaystackScript() {
 
-function usePaystackPayment(options) {
+function usePaystackPayment(hookConfig) {
     var _a = usePaystackScript(), scriptLoaded = _a[0], scriptError = _a[1];
-    var publicKey = options.publicKey, firstname = options.firstname, lastname = options.lastname, phone = options.phone, email = options.email, amount = options.amount, reference = options.reference, _b = options.metadata, metadata = _b === void 0 ? {} : _b, _c = options.currency, currency = _c === void 0 ? 'NGN' : _c, channels = options.channels, _d = options.label, label = _d === void 0 ? '' : _d, _e = options.plan, plan = _e === void 0 ? '' : _e, _f = options.quantity, quantity = _f === void 0 ? '' : _f, _g = options.subaccount, subaccount = _g === void 0 ? '' : _g, _h = options.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = options.bearer, bearer = _j === void 0 ? 'account' : _j, split = options.split, split_code = options.split_code;
-    function initializePayment(callback, onClose) {
+    function initializePayment(_a) {
+        var config = _a.config, onSuccess = _a.onSuccess, onClose = _a.onClose;
         if (scriptError) {
             throw new Error('Unable to load paystack inline script');
         }
+        var args = __assign(__assign({}, hookConfig), config);
+        var publicKey = args.publicKey, firstname = args.firstname, lastname = args.lastname, phone = args.phone, email = args.email, amount = args.amount, reference = args.reference, _b = args.metadata, metadata = _b === void 0 ? {} : _b, _c = args.currency, currency = _c === void 0 ? 'NGN' : _c, channels = args.channels, _d = args.label, label = _d === void 0 ? '' : _d, _e = args.plan, plan = _e === void 0 ? '' : _e, _f = args.quantity, quantity = _f === void 0 ? '' : _f, _g = args.subaccount, subaccount = _g === void 0 ? '' : _g, _h = args.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = args.bearer, bearer = _j === void 0 ? 'account' : _j, split = args.split, split_code = args.split_code;
         if (scriptLoaded) {
             var paystackArgs = {
-                callback: callback ? callback : function () { return null; },
+                callback: onSuccess ? onSuccess : function () { return null; },
                 onClose: onClose ? onClose : function () { return null; },
@@ -80,3 +127,2 @@ key: publicKey,
                 quantity: quantity,
-                'data-custom-button': options['data-custom-button'] || '',
                 channels: channels,
@@ -90,2 +136,3 @@ subaccount: subaccount,
                 split_code: split_code,
+                'data-custom-button': args['data-custom-button'] || '',
             };
@@ -103,47 +150,10 @@ callPaystackPop(paystackArgs);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var PaystackButton = function (_a) {
-    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement("button", { className: className, onClick: function () { return initializePayment(onSuccess, onClose); } }, text || children));
+    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement("button", { className: className, onClick: function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); } }, text || children));
 };
 
 var PaystackContext = createContext({
+    config: {},
     initializePayment: function () { return null; },
@@ -155,5 +165,5 @@ onSuccess: function () { return null; },
 var PaystackProvider = function (_a) {
-    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement(PaystackContext.Provider, { value: { initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
+    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement(PaystackContext.Provider, { value: { config: config, initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
 };
@@ -163,4 +173,4 @@
     var children = _a.children, ref = _a.ref;
-    var _b = useContext(PaystackContext), initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
-    var completeInitializePayment = function () { return initializePayment(onSuccess, onClose); };
+    var _b = useContext(PaystackContext), config = _b.config, initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
+    var completeInitializePayment = function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); };
     return children({ initializePayment: completeInitializePayment, ref: ref });
@@ -167,0 +177,0 @@ };

dist/index.js

@@ -5,2 +5,47 @@ 'use strict';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var cachedScripts = [];
@@ -61,12 +106,14 @@ function usePaystackScript() {
 
-function usePaystackPayment(options) {
+function usePaystackPayment(hookConfig) {
     var _a = usePaystackScript(), scriptLoaded = _a[0], scriptError = _a[1];
-    var publicKey = options.publicKey, firstname = options.firstname, lastname = options.lastname, phone = options.phone, email = options.email, amount = options.amount, reference = options.reference, _b = options.metadata, metadata = _b === void 0 ? {} : _b, _c = options.currency, currency = _c === void 0 ? 'NGN' : _c, channels = options.channels, _d = options.label, label = _d === void 0 ? '' : _d, _e = options.plan, plan = _e === void 0 ? '' : _e, _f = options.quantity, quantity = _f === void 0 ? '' : _f, _g = options.subaccount, subaccount = _g === void 0 ? '' : _g, _h = options.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = options.bearer, bearer = _j === void 0 ? 'account' : _j, split = options.split, split_code = options.split_code;
-    function initializePayment(callback, onClose) {
+    function initializePayment(_a) {
+        var config = _a.config, onSuccess = _a.onSuccess, onClose = _a.onClose;
         if (scriptError) {
             throw new Error('Unable to load paystack inline script');
         }
+        var args = __assign(__assign({}, hookConfig), config);
+        var publicKey = args.publicKey, firstname = args.firstname, lastname = args.lastname, phone = args.phone, email = args.email, amount = args.amount, reference = args.reference, _b = args.metadata, metadata = _b === void 0 ? {} : _b, _c = args.currency, currency = _c === void 0 ? 'NGN' : _c, channels = args.channels, _d = args.label, label = _d === void 0 ? '' : _d, _e = args.plan, plan = _e === void 0 ? '' : _e, _f = args.quantity, quantity = _f === void 0 ? '' : _f, _g = args.subaccount, subaccount = _g === void 0 ? '' : _g, _h = args.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = args.bearer, bearer = _j === void 0 ? 'account' : _j, split = args.split, split_code = args.split_code;
         if (scriptLoaded) {
             var paystackArgs = {
-                callback: callback ? callback : function () { return null; },
+                callback: onSuccess ? onSuccess : function () { return null; },
                 onClose: onClose ? onClose : function () { return null; },
@@ -83,3 +130,2 @@ key: publicKey,
                 quantity: quantity,
-                'data-custom-button': options['data-custom-button'] || '',
                 channels: channels,
@@ -93,2 +139,3 @@ subaccount: subaccount,
                 split_code: split_code,
+                'data-custom-button': args['data-custom-button'] || '',
             };
@@ -106,47 +153,10 @@ callPaystackPop(paystackArgs);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var PaystackButton = function (_a) {
-    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement("button", { className: className, onClick: function () { return initializePayment(onSuccess, onClose); } }, text || children));
+    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement("button", { className: className, onClick: function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); } }, text || children));
 };
 
 var PaystackContext = React.createContext({
+    config: {},
     initializePayment: function () { return null; },
@@ -158,5 +168,5 @@ onSuccess: function () { return null; },
 var PaystackProvider = function (_a) {
-    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement(PaystackContext.Provider, { value: { initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
+    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement(PaystackContext.Provider, { value: { config: config, initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
 };
@@ -166,4 +176,4 @@
     var children = _a.children, ref = _a.ref;
-    var _b = React.useContext(PaystackContext), initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
-    var completeInitializePayment = function () { return initializePayment(onSuccess, onClose); };
+    var _b = React.useContext(PaystackContext), config = _b.config, initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
+    var completeInitializePayment = function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); };
     return children({ initializePayment: completeInitializePayment, ref: ref });
@@ -170,0 +180,0 @@ };

dist/paystack-button.d.ts

@@ -10,3 +10,3 @@ import { ReactNode } from 'react';
 }
-declare const PaystackButton: ({ text, className, children, onSuccess, onClose, ...others }: PaystackButtonProps) => JSX.Element;
+declare const PaystackButton: ({ text, className, children, onSuccess, onClose, ...config }: PaystackButtonProps) => JSX.Element;
 export default PaystackButton;

dist/paystack-consumer.d.ts

 import React from 'react';
 import { PaystackProps } from './types';
-interface PaystacConsumerProps extends PaystackProps {
+interface PaystackConsumerProps extends PaystackProps {
     children: (arg: Record<string, any>) => any;
@@ -8,3 +8,3 @@ onSuccess?: () => void;
 }
-declare const PaystackConsumer: React.ForwardRefExoticComponent<PaystacConsumerProps & React.RefAttributes<unknown>>;
+declare const PaystackConsumer: React.ForwardRefExoticComponent<PaystackConsumerProps & React.RefAttributes<unknown>>;
 export default PaystackConsumer;

dist/paystack-context.d.ts

 /// <reference types="react" />
-import { callback } from './types';
+import { InitializePayment, PaystackProps } from './types';
 type IPaystackContext = {
-    initializePayment: (arg0: callback, arg1: callback) => void;
+    config: PaystackProps;
+    initializePayment: InitializePayment;
     onSuccess: () => void;
@@ -6,0 +7,0 @@ onClose: () => void;

dist/paystack-provider.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { callback, PaystackProps } from './types';
@@ -7,3 +8,3 @@ interface PaystackProviderProps extends PaystackProps {
 }
-declare const PaystackProvider: ({ children, onSuccess, onClose, ...others }: PaystackProviderProps) => JSX.Element;
+declare const PaystackProvider: ({ children, onSuccess, onClose, ...config }: PaystackProviderProps) => JSX.Element;
 export default PaystackProvider;

dist/types.d.ts

@@ -1,3 +0,3 @@
-type Currency = 'NGN' | 'GHS' | 'USD' | 'ZAR' | 'KES' | 'XOF';
-type PaymentChannels = 'bank' | 'card' | 'qr' | 'ussd' | 'mobile_money' | 'eft' | 'bank_transfer' | 'payattitude';
+export type Currency = 'NGN' | 'GHS' | 'USD' | 'ZAR' | 'KES' | 'XOF';
+export type PaymentChannels = 'bank' | 'card' | 'qr' | 'ussd' | 'mobile_money' | 'eft' | 'bank_transfer' | 'payattitude';
 type Bearer = 'account' | 'subaccount';
@@ -20,10 +20,10 @@ type phone = number | string;
     email: string;
+    amount: number;
     firstname?: string;
     lastname?: string;
     phone?: phone;
-    amount: number;
     reference?: string;
     metadata?: PaystackMetadata;
-    currency?: Currency;
-    channels?: PaymentChannels[];
+    currency?: Currency | string;
+    channels?: PaymentChannels[] | string[];
     label?: string;
@@ -39,2 +39,8 @@ plan?: string;
 }
+export type InitializePayment = (options: {
+    onSuccess?: callback;
+    onClose?: callback;
+    config?: Omit<PaystackProps, 'publicKey'>;
+}) => void;
+export type HookConfig = Omit<Partial<PaystackProps>, 'publicKey'> & Pick<PaystackProps, 'publicKey'>;
 export {};

dist/use-paystack.d.ts

@@ -1,2 +0,2 @@
-import { PaystackProps } from './types';
-export default function usePaystackPayment(options: PaystackProps): (callback?: () => void, onClose?: () => void) => void;
+import { HookConfig, InitializePayment } from './types';
+export default function usePaystackPayment(hookConfig: HookConfig): InitializePayment;

example/package.json

@@ -14,3 +14,3 @@ {
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
+    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts --openssl-legacy-provider start",
     "build": "react-scripts --openssl-legacy-provider build",
@@ -17,0 +17,0 @@ "test": "react-scripts test",

example/src/App.js

 import React from 'react';
 import logo from './logo.svg';
-import { usePaystackPayment, PaystackButton, PaystackConsumer } from './dist/index.es';
+import {usePaystackPayment, PaystackButton, PaystackConsumer} from './dist/index.es';
 import './App.css';
 
 const config = {
-    reference: (new Date()).getTime().toString(),
-    email: "[e-mail]",
-    amount: 20000,
-    publicKey: 'pk_test_a137d402b5975716e89952a898aad2832c961d69',
-    firstname: 'cool',
-    lastname: 'story',
-    /*split: { //if you want to use transaction split
+  reference: new Date().getTime().toString(),
+  email: '[e-mail]',
+  amount: 20000,
+  publicKey: 'pk_test_a137d402b5975716e89952a898aad2832c961d69',
+  firstname: 'cool',
+  lastname: 'story',
+  /*split: { //if you want to use transaction split
         "type": "percentage",
@@ -30,18 +30,37 @@ "bearer_type": "all",
 const onSuccess = (reference) => {
-    // Implementation for whatever you want to do with reference and after success call.
-    console.log('reference',reference);
+  // Implementation for whatever you want to do with reference and after success call.
+  console.log('reference', reference);
 };
 
 const onClose = () => {
-    // implementation for  whatever you want to do when the Paystack dialog closed.
-    console.log('closed')
-}
+  // implementation for whatever you want to do when the Paystack dialog closed.
+  console.log('closed');
+};
 
 const PaystackHookExample = () => {
+  const initializePayment = usePaystackPayment(config);
+  return (
+    <div>
+      <button
+        onClick={() => {
+          initializePayment({onSuccess, onClose});
+        }}
+      >
+        Paystack Hooks Implementation
+      </button>
+    </div>
+  );
+};
+
+const PaystackHookSplitParameterExample = () => {
     const initializePayment = usePaystackPayment(config);
     return (
         <div>
-            <button onClick={() => {
-                initializePayment(onSuccess, onClose)
-            }}>Paystack Hooks Implementation</button>
+            <button
+                onClick={() => {
+                    initializePayment({config: {currency: 'NGN'}, onSuccess, onClose});
+                }}
+            >
+                Paystack Hooks with split parameter Implementation
+            </button>
         </div>
@@ -52,8 +71,8 @@ );
 function App() {
-    const componentProps = {
-        ...config,
-        text: 'Paystack Button Implementation',
-        onSuccess,
-        onClose
-    };
+  const componentProps = {
+    ...config,
+    text: 'Paystack Button Implementation',
+    onSuccess,
+    onClose,
+  };
 
@@ -76,7 +95,14 @@ return (
       </header>
-        <PaystackHookExample />
-        <PaystackButton {...componentProps} />
-        <PaystackConsumer {...componentProps} >
-            {({initializePayment}) => <button onClick={() => initializePayment()}>Paystack Consumer Implementation</button>}
-        </PaystackConsumer>
+      <PaystackHookExample />
+      <PaystackHookSplitParameterExample />
+      <PaystackButton {...componentProps} />
+      <PaystackConsumer {...componentProps}>
+        {({initializePayment}) => {
+          return (
+            <button onClick={() => initializePayment({onSuccess, onClose})}>
+              Paystack Consumer Implementation
+            </button>
+          );
+        }}
+      </PaystackConsumer>
     </div>
@@ -83,0 +109,0 @@ );

example/src/dist/index.es.js

 import React, { useState, useEffect, createContext, forwardRef, useContext } from 'react';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var cachedScripts = [];
@@ -58,12 +103,14 @@ function usePaystackScript() {
 
-function usePaystackPayment(options) {
+function usePaystackPayment(hookConfig) {
     var _a = usePaystackScript(), scriptLoaded = _a[0], scriptError = _a[1];
-    var publicKey = options.publicKey, firstname = options.firstname, lastname = options.lastname, phone = options.phone, email = options.email, amount = options.amount, reference = options.reference, _b = options.metadata, metadata = _b === void 0 ? {} : _b, _c = options.currency, currency = _c === void 0 ? 'NGN' : _c, channels = options.channels, _d = options.label, label = _d === void 0 ? '' : _d, _e = options.plan, plan = _e === void 0 ? '' : _e, _f = options.quantity, quantity = _f === void 0 ? '' : _f, _g = options.subaccount, subaccount = _g === void 0 ? '' : _g, _h = options.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = options.bearer, bearer = _j === void 0 ? 'account' : _j, split = options.split, split_code = options.split_code;
-    function initializePayment(callback, onClose) {
+    function initializePayment(_a) {
+        var config = _a.config, onSuccess = _a.onSuccess, onClose = _a.onClose;
         if (scriptError) {
             throw new Error('Unable to load paystack inline script');
         }
+        var args = __assign(__assign({}, hookConfig), config);
+        var publicKey = args.publicKey, firstname = args.firstname, lastname = args.lastname, phone = args.phone, email = args.email, amount = args.amount, reference = args.reference, _b = args.metadata, metadata = _b === void 0 ? {} : _b, _c = args.currency, currency = _c === void 0 ? 'NGN' : _c, channels = args.channels, _d = args.label, label = _d === void 0 ? '' : _d, _e = args.plan, plan = _e === void 0 ? '' : _e, _f = args.quantity, quantity = _f === void 0 ? '' : _f, _g = args.subaccount, subaccount = _g === void 0 ? '' : _g, _h = args.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = args.bearer, bearer = _j === void 0 ? 'account' : _j, split = args.split, split_code = args.split_code;
         if (scriptLoaded) {
             var paystackArgs = {
-                callback: callback ? callback : function () { return null; },
+                callback: onSuccess ? onSuccess : function () { return null; },
                 onClose: onClose ? onClose : function () { return null; },
@@ -80,3 +127,2 @@ key: publicKey,
                 quantity: quantity,
-                'data-custom-button': options['data-custom-button'] || '',
                 channels: channels,
@@ -90,2 +136,3 @@ subaccount: subaccount,
                 split_code: split_code,
+                'data-custom-button': args['data-custom-button'] || '',
             };
@@ -103,47 +150,10 @@ callPaystackPop(paystackArgs);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var PaystackButton = function (_a) {
-    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement("button", { className: className, onClick: function () { return initializePayment(onSuccess, onClose); } }, text || children));
+    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement("button", { className: className, onClick: function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); } }, text || children));
 };
 
 var PaystackContext = createContext({
+    config: {},
     initializePayment: function () { return null; },
@@ -155,5 +165,5 @@ onSuccess: function () { return null; },
 var PaystackProvider = function (_a) {
-    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement(PaystackContext.Provider, { value: { initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
+    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement(PaystackContext.Provider, { value: { config: config, initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
 };
@@ -163,4 +173,4 @@
     var children = _a.children, ref = _a.ref;
-    var _b = useContext(PaystackContext), initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
-    var completeInitializePayment = function () { return initializePayment(onSuccess, onClose); };
+    var _b = useContext(PaystackContext), config = _b.config, initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
+    var completeInitializePayment = function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); };
     return children({ initializePayment: completeInitializePayment, ref: ref });
@@ -167,0 +177,0 @@ };

example/src/dist/index.js

@@ -5,2 +5,47 @@ 'use strict';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var cachedScripts = [];
@@ -61,12 +106,14 @@ function usePaystackScript() {
 
-function usePaystackPayment(options) {
+function usePaystackPayment(hookConfig) {
     var _a = usePaystackScript(), scriptLoaded = _a[0], scriptError = _a[1];
-    var publicKey = options.publicKey, firstname = options.firstname, lastname = options.lastname, phone = options.phone, email = options.email, amount = options.amount, reference = options.reference, _b = options.metadata, metadata = _b === void 0 ? {} : _b, _c = options.currency, currency = _c === void 0 ? 'NGN' : _c, channels = options.channels, _d = options.label, label = _d === void 0 ? '' : _d, _e = options.plan, plan = _e === void 0 ? '' : _e, _f = options.quantity, quantity = _f === void 0 ? '' : _f, _g = options.subaccount, subaccount = _g === void 0 ? '' : _g, _h = options.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = options.bearer, bearer = _j === void 0 ? 'account' : _j, split = options.split, split_code = options.split_code;
-    function initializePayment(callback, onClose) {
+    function initializePayment(_a) {
+        var config = _a.config, onSuccess = _a.onSuccess, onClose = _a.onClose;
         if (scriptError) {
             throw new Error('Unable to load paystack inline script');
         }
+        var args = __assign(__assign({}, hookConfig), config);
+        var publicKey = args.publicKey, firstname = args.firstname, lastname = args.lastname, phone = args.phone, email = args.email, amount = args.amount, reference = args.reference, _b = args.metadata, metadata = _b === void 0 ? {} : _b, _c = args.currency, currency = _c === void 0 ? 'NGN' : _c, channels = args.channels, _d = args.label, label = _d === void 0 ? '' : _d, _e = args.plan, plan = _e === void 0 ? '' : _e, _f = args.quantity, quantity = _f === void 0 ? '' : _f, _g = args.subaccount, subaccount = _g === void 0 ? '' : _g, _h = args.transaction_charge, transaction_charge = _h === void 0 ? 0 : _h, _j = args.bearer, bearer = _j === void 0 ? 'account' : _j, split = args.split, split_code = args.split_code;
         if (scriptLoaded) {
             var paystackArgs = {
-                callback: callback ? callback : function () { return null; },
+                callback: onSuccess ? onSuccess : function () { return null; },
                 onClose: onClose ? onClose : function () { return null; },
@@ -83,3 +130,2 @@ key: publicKey,
                 quantity: quantity,
-                'data-custom-button': options['data-custom-button'] || '',
                 channels: channels,
@@ -93,2 +139,3 @@ subaccount: subaccount,
                 split_code: split_code,
+                'data-custom-button': args['data-custom-button'] || '',
             };
@@ -106,47 +153,10 @@ callPaystackPop(paystackArgs);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var PaystackButton = function (_a) {
-    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement("button", { className: className, onClick: function () { return initializePayment(onSuccess, onClose); } }, text || children));
+    var text = _a.text, className = _a.className, children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["text", "className", "children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement("button", { className: className, onClick: function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); } }, text || children));
 };
 
 var PaystackContext = React.createContext({
+    config: {},
     initializePayment: function () { return null; },
@@ -158,5 +168,5 @@ onSuccess: function () { return null; },
 var PaystackProvider = function (_a) {
-    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, others = __rest(_a, ["children", "onSuccess", "onClose"]);
-    var initializePayment = usePaystackPayment(others);
-    return (React.createElement(PaystackContext.Provider, { value: { initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
+    var children = _a.children, onSuccess = _a.onSuccess, onClose = _a.onClose, config = __rest(_a, ["children", "onSuccess", "onClose"]);
+    var initializePayment = usePaystackPayment(config);
+    return (React.createElement(PaystackContext.Provider, { value: { config: config, initializePayment: initializePayment, onSuccess: onSuccess, onClose: onClose } }, children));
 };
@@ -166,4 +176,4 @@
     var children = _a.children, ref = _a.ref;
-    var _b = React.useContext(PaystackContext), initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
-    var completeInitializePayment = function () { return initializePayment(onSuccess, onClose); };
+    var _b = React.useContext(PaystackContext), config = _b.config, initializePayment = _b.initializePayment, onSuccess = _b.onSuccess, onClose = _b.onClose;
+    var completeInitializePayment = function () { return initializePayment({ config: config, onSuccess: onSuccess, onClose: onClose }); };
     return children({ initializePayment: completeInitializePayment, ref: ref });
@@ -170,0 +180,0 @@ };

example/src/dist/paystack-button.d.ts

@@ -10,3 +10,3 @@ import { ReactNode } from 'react';
 }
-declare const PaystackButton: ({ text, className, children, onSuccess, onClose, ...others }: PaystackButtonProps) => JSX.Element;
+declare const PaystackButton: ({ text, className, children, onSuccess, onClose, ...config }: PaystackButtonProps) => JSX.Element;
 export default PaystackButton;

example/src/dist/paystack-consumer.d.ts

 import React from 'react';
 import { PaystackProps } from './types';
-interface PaystacConsumerProps extends PaystackProps {
+interface PaystackConsumerProps extends PaystackProps {
     children: (arg: Record<string, any>) => any;
@@ -8,3 +8,3 @@ onSuccess?: () => void;
 }
-declare const PaystackConsumer: React.ForwardRefExoticComponent<PaystacConsumerProps & React.RefAttributes<unknown>>;
+declare const PaystackConsumer: React.ForwardRefExoticComponent<PaystackConsumerProps & React.RefAttributes<unknown>>;
 export default PaystackConsumer;

example/src/dist/paystack-context.d.ts

 /// <reference types="react" />
-import { callback } from './types';
+import { InitializePayment, PaystackProps } from './types';
 type IPaystackContext = {
-    initializePayment: (arg0: callback, arg1: callback) => void;
+    config: PaystackProps;
+    initializePayment: InitializePayment;
     onSuccess: () => void;
@@ -6,0 +7,0 @@ onClose: () => void;

example/src/dist/paystack-provider.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { callback, PaystackProps } from './types';
@@ -7,3 +8,3 @@ interface PaystackProviderProps extends PaystackProps {
 }
-declare const PaystackProvider: ({ children, onSuccess, onClose, ...others }: PaystackProviderProps) => JSX.Element;
+declare const PaystackProvider: ({ children, onSuccess, onClose, ...config }: PaystackProviderProps) => JSX.Element;
 export default PaystackProvider;

example/src/dist/types.d.ts

@@ -20,6 +20,6 @@ type Currency = 'NGN' | 'GHS' | 'USD' | 'ZAR' | 'KES' | 'XOF';
     email: string;
+    amount: number;
     firstname?: string;
     lastname?: string;
     phone?: phone;
-    amount: number;
     reference?: string;
@@ -39,2 +39,7 @@ metadata?: PaystackMetadata;
 }
+export type InitializePayment = (options: {
+    onSuccess?: callback;
+    onClose?: callback;
+    config?: PaystackProps;
+}) => void;
 export {};

example/src/dist/use-paystack.d.ts

@@ -1,2 +0,2 @@
-import { PaystackProps } from './types';
-export default function usePaystackPayment(options: PaystackProps): (callback?: () => void, onClose?: () => void) => void;
+import { InitializePayment, PaystackProps } from './types';
+export default function usePaystackPayment(hookConfig: Partial<PaystackProps>): InitializePayment;

libs/paystack-context.ts

 import {createContext} from 'react';
-import {callback} from './types';
+import {InitializePayment, PaystackProps} from './types';
+
 type IPaystackContext = {
-  initializePayment: (arg0: callback, arg1: callback) => void;
+  config: PaystackProps;
+  initializePayment: InitializePayment;
   onSuccess: () => void;
@@ -10,2 +12,3 @@ onClose: () => void;
 const PaystackContext = createContext<IPaystackContext>({
+  config: {} as PaystackProps,
   initializePayment: () => null,
@@ -12,0 +15,0 @@ onSuccess: () => null,

libs/types.ts

@@ -1,4 +0,4 @@
-type Currency = 'NGN' | 'GHS' | 'USD' | 'ZAR' | 'KES' | 'XOF';
+export type Currency = 'NGN' | 'GHS' | 'USD' | 'ZAR' | 'KES' | 'XOF';
 
-type PaymentChannels =
+export type PaymentChannels =
   | 'bank'
@@ -36,10 +36,10 @@ | 'card'
   email: string;
+  amount: number;
   firstname?: string;
   lastname?: string;
   phone?: phone;
-  amount: number;
   reference?: string;
   metadata?: PaystackMetadata;
-  currency?: Currency;
-  channels?: PaymentChannels[];
+  currency?: Currency | string;
+  channels?: PaymentChannels[] | string[];
   label?: string;
@@ -55,1 +55,10 @@ plan?: string;
 }
+
+export type InitializePayment = (options: {
+  onSuccess?: callback;
+  onClose?: callback;
+  config?: Omit<PaystackProps, 'publicKey'>;
+}) => void;
+
+export type HookConfig = Omit<Partial<PaystackProps>, 'publicKey'> &
+  Pick<PaystackProps, 'publicKey'>;

libs/use-paystack.ts

 import {useEffect} from 'react';
-import {callback, PaystackProps} from './types';
+import {HookConfig, InitializePayment} from './types';
 import usePaystackScript from './paystack-script';
 import {callPaystackPop} from './paystack-actions';
 
-export default function usePaystackPayment(
-  options: PaystackProps,
-): (callback?: () => void, onClose?: () => void) => void {
+export default function usePaystackPayment(hookConfig: HookConfig): InitializePayment {
   const [scriptLoaded, scriptError] = usePaystackScript();
-  const {
-    publicKey,
-    firstname,
-    lastname,
-    phone,
-    email,
-    amount,
-    reference,
-    metadata = {},
-    currency = 'NGN',
-    channels,
-    label = '',
-    plan = '',
-    quantity = '',
-    subaccount = '',
-    transaction_charge = 0,
-    bearer = 'account',
-    split,
-    split_code,
-  } = options;
 
-  function initializePayment(callback?: callback, onClose?: callback): void {
+  function initializePayment({config, onSuccess, onClose}: Parameters<InitializePayment>[0]): void {
     if (scriptError) {
@@ -36,5 +14,28 @@ throw new Error('Unable to load paystack inline script');
 
+    const args = {...hookConfig, ...config};
+
+    const {
+      publicKey,
+      firstname,
+      lastname,
+      phone,
+      email,
+      amount,
+      reference,
+      metadata = {},
+      currency = 'NGN',
+      channels,
+      label = '',
+      plan = '',
+      quantity = '',
+      subaccount = '',
+      transaction_charge = 0,
+      bearer = 'account',
+      split,
+      split_code,
+    } = args;
+
     if (scriptLoaded) {
       const paystackArgs: Record<string, any> = {
-        callback: callback ? callback : () => null,
+        callback: onSuccess ? onSuccess : () => null,
         onClose: onClose ? onClose : () => null,
@@ -51,3 +52,2 @@ key: publicKey,
         quantity,
-        'data-custom-button': options['data-custom-button'] || '',
         channels,
@@ -61,2 +61,3 @@ subaccount,
         split_code,
+        'data-custom-button': args['data-custom-button'] || '',
       };
@@ -63,0 +64,0 @@ callPaystackPop(paystackArgs);

package.json

 {
   "name": "react-paystack",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "This is an reactJS library for implementing paystack payment gateway",
@@ -45,3 +45,3 @@ "main": "dist/index.js",
     "@babel/preset-typescript": "^7.21.4",
-    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -54,19 +54,19 @@ "@rollup/plugin-typescript": "^11.0.0",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
     "eslint": "^8.37.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.32.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^2.8.7",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "rollup": "^3.20.2",
+    "rollup": "^4.9.2",
     "rollup-plugin-babel": "^4.4.0",
@@ -76,3 +76,3 @@ "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-typescript2": "^0.36.0",
     "ts-jest": "^29.1.0",
@@ -79,0 +79,0 @@ "typescript": "^5.0.3"

README.md

@@ -217,2 +217,21 @@ # react-paystack
 
+### Sending Metadata with Transaction
+If you want to send extra metadata e.g. Transaction description, user that made the transaction. Edit your config like so:
+
+```ts
+    const config = {
+       // Your required fields
+          metadata: {
+            custom_fields: [
+                {
+                    display_name: 'description',
+                    variable_name: 'description',
+                    value: 'Funding Wallet'
+                }
+                // To pass extra metadata, add an object with the same fields as above
+            ]
+        }
+    };
+```
+
 Please checkout [Paystack Documentation](https://developers.paystack.co/docs/paystack-inline) for other available options you can add to the tag
@@ -219,0 +238,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2103679

increased by0.36%

Lines of code

27734

increased by0.51%

Number of lines in readme file

262

increased by7.82%

No dependency changes