Merge pull request #100 from iamraphson/patch/paystack-connect

Upgrade inline to v2

dist/paystack-actions.d.ts

@@ -1 +1 @@
-export declare let callPaystackPop: (paystackArgs: Record<string, any>) => void;
+export declare const callPaystackPop: (paystackArgs: Record<string, any>) => void;

dist/types.d.ts

@@ -35,11 +35,11 @@ export interface PaystackProps {
     subaccount?: string;
     transaction_charge?: number;
     bearer?: Bearer;
-    'data-custom-button'?: string;
     split_code?: string;
     split?: Record<string, any>;
     connect_split?: PaystackConnectSplit[];
     connect_account?: string;
+    onBankTransferConfirmationPending?: callback;
 }
 export type InitializePayment = (options: {
     onSuccess?: callback;

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

@@ -1 +1 @@
-export declare let callPaystackPop: (paystackArgs: Record<string, any>) => void;
+export declare const callPaystackPop: (paystackArgs: Record<string, any>) => void;

example/src/dist/types.d.ts

@@ -1,5 +1,5 @@
-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';
 type phone = number | string;
 interface PaystackCustomFields {
@@ -13,6 +13,10 @@ interface PaystackMetadata {
 interface PaystackMetadata {
     [key: string]: any;
 }
+interface PaystackConnectSplit {
+    account_id: string;
+    share: number;
+}
 export type callback = (response?: any) => void;
 export interface PaystackProps {
     publicKey: string;
@@ -23,21 +27,24 @@ export interface PaystackProps {
     phone?: phone;
     reference?: string;
     metadata?: PaystackMetadata;
-    currency?: Currency;
-    channels?: PaymentChannels[];
+    currency?: Currency | string;
+    channels?: PaymentChannels[] | string[];
     label?: string;
     plan?: string;
     quantity?: number;
     subaccount?: string;
     transaction_charge?: number;
     bearer?: Bearer;
-    'data-custom-button'?: string;
     split_code?: string;
     split?: Record<string, any>;
+    connect_split?: PaystackConnectSplit[];
+    connect_account?: string;
+    onBankTransferConfirmationPending?: callback;
 }
 export type InitializePayment = (options: {
     onSuccess?: callback;
     onClose?: callback;
-    config?: PaystackProps;
+    config?: Omit<PaystackProps, 'publicKey'>;
 }) => void;
+export type HookConfig = Omit<Partial<PaystackProps>, 'publicKey'> & Pick<PaystackProps, 'publicKey'>;
 export {};

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

@@ -1,2 +1,2 @@
-import { InitializePayment, PaystackProps } from './types';
-export default function usePaystackPayment(hookConfig: Partial<PaystackProps>): InitializePayment;
+import { HookConfig, InitializePayment } from './types';
+export default function usePaystackPayment(hookConfig: HookConfig): InitializePayment;

libs/paystack-actions.ts

@@ -1,6 +1,6 @@
-/* eslint-disable */
-export let callPaystackPop = (paystackArgs: Record<string, any>): void => {
-  // @ts-ignore
-  const handler = window.PaystackPop && window.PaystackPop.setup(paystackArgs);
-  handler && handler.openIframe();
+import PaystackPop from '@paystack/inline-js';
+
+export const callPaystackPop = (paystackArgs: Record<string, any>): void => {
+  const paystack = new PaystackPop();
+  paystack.newTransaction(paystackArgs);
 };

libs/src/types/@paystack/inline-js/index.d.ts

@@ -0,0 +1,2 @@
+//@paystack/inline-js/index.d.ts
+declare module '@paystack/inline-js';

libs/test/paystack-button.test.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-// @ts-ignore
-import {renderHook, cleanup, act} from '@testing-library/react-hooks';
+import {cleanup} from '@testing-library/react-hooks';
 import {render, fireEvent} from '@testing-library/react';
 import {callPaystackPop} from '../paystack-actions';
-import usePaystackScript from '../paystack-script';
 import PaystackButton from '../paystack-button';
 import {config} from './fixtures';
 
@@ -21,7 +19,6 @@ describe('<PaystackButton />', () => {
   beforeEach(() => {
     // @ts-ignore
     callPaystackPop = jest.fn();
-    renderHook(() => usePaystackScript());
   });
 
   afterAll(() => {

libs/test/paystack-provider.test.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-// @ts-ignore
-import {renderHook, cleanup, act} from '@testing-library/react-hooks';
+import {cleanup} from '@testing-library/react-hooks';
 import {render, fireEvent} from '@testing-library/react';
 import {callPaystackPop} from '../paystack-actions';
-import usePaystackScript from '../paystack-script';
 import PaystackConsumer from '../paystack-consumer';
 import {config} from './fixtures';
 
@@ -20,7 +18,6 @@ describe('<PaystackProvider />', () => {
   beforeEach(() => {
     // @ts-ignore
     callPaystackPop = jest.fn();
-    renderHook(() => usePaystackScript());
   });
 
   afterAll(() => {

libs/test/use-paystack.test.tsx

@@ -1,10 +1,8 @@
-// @ts-ignore
 import {renderHook, cleanup, act} from '@testing-library/react-hooks';
 import {render, fireEvent} from '@testing-library/react';
 import React from 'react';
 import usePaystackPayment from '../use-paystack';
 import {callPaystackPop} from '../paystack-actions';
-import usePaystackScript from '../paystack-script';
 import {config} from './fixtures';
 import {Currency, PaymentChannels} from '../types';
 
@@ -16,7 +14,6 @@ describe('usePaystackPayment()', () => {
   beforeEach(() => {
     // @ts-ignore
     callPaystackPop = jest.fn();
-    renderHook(() => usePaystackScript());
   });
 
   afterAll(() => {
@@ -66,7 +63,6 @@ describe('usePaystackPayment()', () => {
         channels: ['mobile_money', 'ussd'],
         plan: '1',
         subaccount: 'ACCT_olodo',
-        'data-custom-button': 'savage',
         quantity: 2,
         split_code: 'SPL_ehshjerjh1232343',
         firstname: '404',

libs/types.ts

@@ -52,11 +52,11 @@ export interface PaystackProps {
   subaccount?: string;
   transaction_charge?: number;
   bearer?: Bearer;
-  'data-custom-button'?: string;
   split_code?: string;
   split?: Record<string, any>;
   connect_split?: PaystackConnectSplit[];
   connect_account?: string;
+  onBankTransferConfirmationPending?: callback;
 }
 
 export type InitializePayment = (options: {

libs/use-paystack.ts

@@ -1,16 +1,8 @@
-import {useEffect} from 'react';
 import {HookConfig, InitializePayment} from './types';
-import usePaystackScript from './paystack-script';
 import {callPaystackPop} from './paystack-actions';
 
 export default function usePaystackPayment(hookConfig: HookConfig): InitializePayment {
-  const [scriptLoaded, scriptError] = usePaystackScript();
-
   function initializePayment({config, onSuccess, onClose}: Parameters<InitializePayment>[0]): void {
-    if (scriptError) {
-      throw new Error('Unable to load paystack inline script');
-    }
-
     const args = {...hookConfig, ...config};
 
     const {
@@ -21,56 +13,49 @@ export default function usePaystackPayment(hookConfig: HookConfig): InitializePa
       email,
       amount,
       reference,
-      metadata = {},
+      metadata,
       currency = 'NGN',
       channels,
-      label = '',
-      plan = '',
-      quantity = '',
-      subaccount = '',
-      transaction_charge = 0,
-      bearer = 'account',
+      label,
+      plan,
+      quantity,
+      subaccount,
+      transaction_charge,
+      bearer,
       split,
       split_code,
       connect_account,
       connect_split,
+      onBankTransferConfirmationPending,
     } = args;
+    const paystackArgs: Record<string, any> = {
+      onSuccess: onSuccess ? onSuccess : () => null,
+      onCancel: onClose ? onClose : () => null,
+      key: publicKey,
+      email,
+      amount,
+      ...(firstname && {firstname}),
+      ...(lastname && {lastname}),
+      ...(phone && {phone}),
+      ...(reference && {ref: reference}),
+      ...(currency && {currency}),
+      ...(channels && {channels}),
+      ...(metadata && {metadata}),
+      ...(label && {label}),
+      ...(onBankTransferConfirmationPending && {onBankTransferConfirmationPending}),
+      ...(subaccount && {subaccount}),
+      ...(transaction_charge && {transaction_charge}),
+      ...(bearer && {bearer}),
+      ...(split && {split}),
+      ...(split_code && {split_code}),
+      ...(plan && {plan}),
+      ...(quantity && {quantity}),
+      ...(connect_split && {connect_split}),
+      ...(connect_account && {connect_account}),
+    };
 
-    if (scriptLoaded) {
-      const paystackArgs: Record<string, any> = {
-        callback: onSuccess ? onSuccess : () => null,
-        onClose: onClose ? onClose : () => null,
-        key: publicKey,
-        ref: reference,
-        email,
-        firstname,
-        lastname,
-        phone,
-        amount,
-        currency,
-        plan,
-        quantity,
-        channels,
-        subaccount,
-        transaction_charge,
-        bearer,
-        label,
-        metadata,
-        split,
-        split_code,
-        connect_split,
-        connect_account,
-        'data-custom-button': args['data-custom-button'] || '',
-      };
-      callPaystackPop(paystackArgs);
-    }
+    callPaystackPop(paystackArgs);
   }
 
-  useEffect(() => {
-    if (scriptError) {
-      throw new Error('Unable to load paystack inline script');
-    }
-  }, [scriptError]);
-
   return initializePayment;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-paystack",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "This is an reactJS library for implementing paystack payment gateway",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -28,7 +28,7 @@
     "paystack",
     "Gateway"
   ],
-  "author": "Ayeni Olusegun <[email protected]>",
+  "author": "Olusegun Ayeni <[email protected]>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/iamraphson/react-paystack/issues"
@@ -38,6 +38,9 @@
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   },
+  "dependencies": {
+    "@paystack/inline-js": "^2.18.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",