From a4654ac30d125ed54a64d0cd4f53d17ffc0c0f17 Mon Sep 17 00:00:00 2001
From: Owati mofiyinfoluwa <73480705+owati@users.noreply.github.com>
Date: Fri, 15 Apr 2022 08:20:39 +0100
Subject: [PATCH 1/2] Added a pre-payment functionality to the button

I was using the paystack button but I wanted the validate the form details before processing payment. In the end I had to make a custom button that made use of the usePaystackPayment hook.
---
 libs/paystack-button.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/libs/paystack-button.tsx b/libs/paystack-button.tsx
index 8d66820..635194d 100644
--- a/libs/paystack-button.tsx
+++ b/libs/paystack-button.tsx
@@ -1,4 +1,4 @@
-import React, {ReactNode} from 'react';
+// import React, {ReactNode} from 'react';
 import usePaystackPayment from './use-paystack';
 import {callback, PaystackProps} from './types';
 
@@ -6,6 +6,7 @@ interface PaystackButtonProps extends PaystackProps {
   text?: string;
   className?: string;
   children?: ReactNode;
+  onClick?: Function;  // a function that is run before the payment function, if true is returned proceed to the payment function
   onSuccess?: callback;
   onClose?: callback;
 }
@@ -16,11 +17,20 @@ const PaystackButton = ({
   children,
   onSuccess,
   onClose,
+  onClick,
   ...others
 }: PaystackButtonProps): JSX.Element => {
   const initializePayment = usePaystackPayment(others);
   return (
-    <button className={className} onClick={(): void => initializePayment(onSuccess, onClose)}>
+    <button className={className} onClick={(): void => {
+        if (onClick) {
+          if(onClick()) { // proceed to payment if true
+            initializePayment(onSuccess, onClose);
+          }
+        } else {
+        initializePayment(onSuccess, onClose);
+        }
+      }}>
       {text || children}
     </button>
   );

From 8d1a45d650065c01228b74221394250fb5520a7d Mon Sep 17 00:00:00 2001
From: Owati mofiyinfoluwa <73480705+owati@users.noreply.github.com>
Date: Fri, 15 Apr 2022 08:23:47 +0100
Subject: [PATCH 2/2] Added a pre-payment functionality to the button

I was using the paystack button but I wanted the validate the form details before processing payment. In the end I had to make a custom button that made use of the usePaystackPayment hook.
---
 libs/paystack-button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/paystack-button.tsx b/libs/paystack-button.tsx
index 635194d..833c288 100644
--- a/libs/paystack-button.tsx
+++ b/libs/paystack-button.tsx
@@ -1,4 +1,4 @@
-// import React, {ReactNode} from 'react';
+import React, {ReactNode} from 'react';
 import usePaystackPayment from './use-paystack';
 import {callback, PaystackProps} from './types';