expose metadata props (#185)

just1and0 · web-flow · commit b08ac80c6ca8 · 2024-11-04T22:46:22.000+01:00
diff --git a/development/paystack.tsx b/development/paystack.tsx
@@ -30,6 +30,7 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
     onSuccess,
     activityIndicatorColor = 'green',
     modalProps,
+    metadata
   },
   ref,
 ) => {
@@ -77,6 +78,8 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
 
   const invoiceLimitString = invoice_limit? `invoice_limit: ${invoice_limit},` : ''; // should only send invoice limit as integer when plan subscription is specified
 
+  const metaDataString = metadata ? `metadata: ${metadata},` : `metadata: { custom_fields: [{ display_name:  '${firstName + ' ' + lastName}', variable_name:  '${billingName}', value:'' }]},`;
+
   const Paystackcontent = `   
       <!DOCTYPE html>
       <html lang="en">
@@ -107,14 +110,7 @@ const Paystack: React.ForwardRefRenderFunction<React.ReactNode, PayStackProps> =
                 ${subAccountString}
                 ${splitCodeString}
                 ${dynamicSplitString}
-                metadata: {
-                custom_fields: [
-                        {
-                        display_name:  '${firstName + ' ' + lastName}',
-                        variable_name:  '${billingName}',
-                        value:''
-                        }
-                ]},
+                ${metaDataString}
                 onSuccess: function(response){
                       var resp = {event:'successful', transactionRef:response};
                         window.ReactNativeWebView.postMessage(JSON.stringify(resp))
diff --git a/development/types/index.ts b/development/types/index.ts
@@ -28,6 +28,26 @@ export interface DynamicMultiSplitProps {
   reference?: string;
 }
 
+type CustomField = {
+  display_name: string;
+  variable_name: string;
+  value: string | number;
+};
+
+type CustomFilters = {
+  recurring?: boolean;
+  banks?: string[];
+  card_brands?: ('verve' | 'visa' | 'mastercard')[];
+  supported_mobile_money_providers?: ('mtn' | 'atl' | 'vod')[];
+};
+
+type Metadata = {
+  cart_id?: string | number;
+  custom_fields?: CustomField[];
+  cancel_action?: string;
+  custom_filters?: CustomFilters;
+};
+
 export interface PayStackProps {
   paystackKey: string;
   billingEmail: string;
@@ -51,6 +71,7 @@ export interface PayStackProps {
   activityIndicatorColor?: string;
   ref: React.ReactElement;
   modalProps?: ModalProps;
+  metadata?: Metadata;
 }
 
 export interface PayStackRef {
