BREAKING CHANGE: : V5 (#210)

* BREAKING CHANGE: :  V5

- ✅ Simple `checkout()` or `newTransaction()` calls
- ✅ Global callbacks with `onGlobalSuccess` or `onGlobalCancel`
- ✅ Debug logging with `debug` prop
- ✅ Fully typed params for transactions
- ✅ Works seamlessly with Expo & bare React Native
- ✅ Full test coverage

* BREAKING CHANGE: : V5

- nitpick fix

* BREAKING CHANGE: : V5

more typing

Author: just1and0

.DS_Store

@@ -0,0 +1,87 @@
+import { validateParams, sanitize, generatePaystackParams } from '../development/utils';
+import { Alert } from 'react-native';
+
+jest.mock('react-native', () => ({
+  Alert: { alert: jest.fn() }
+}));
+
+describe('Paystack Utils', () => {
+  describe('validateParams', () => {
+    it('should return true for valid params', () => {
+      const result = validateParams({
+        email: '[email protected]',
+        amount: 5000,
+        onSuccess: jest.fn(),
+        onCancel: jest.fn()
+      }, false);
+      expect(result).toBe(true);
+    });
+
+    it('should fail with missing email and show alert', () => {
+      const result = validateParams({
+        email: '',
+        amount: 5000,
+        onSuccess: jest.fn(),
+        onCancel: jest.fn()
+      }, true);
+      expect(result).toBe(false);
+      expect(Alert.alert).toHaveBeenCalledWith('Payment Error', expect.stringContaining('Email is required'));
+    });
+
+    it('should fail with invalid amount', () => {
+      const result = validateParams({
+        email: '[email protected]',
+        amount: 0,
+        onSuccess: jest.fn(),
+        onCancel: jest.fn()
+      }, true);
+      expect(result).toBe(false);
+      expect(Alert.alert).toHaveBeenCalledWith('Payment Error', expect.stringContaining('Amount must be a valid number'));
+    });
+
+    it('should fail with missing callbacks', () => {
+      const result = validateParams({
+        email: '[email protected]',
+        amount: 1000,
+        onSuccess: undefined,
+        onCancel: undefined
+      } as any, true);
+      expect(result).toBe(false);
+      expect(Alert.alert).toHaveBeenCalledWith('Payment Error', expect.stringContaining('onSuccess callback is required'));
+    });
+  });
+
+  describe('sanitize', () => {
+    it('should wrap string by default', () => {
+      expect(sanitize('hello', '', true)).toBe("'hello'");
+    });
+
+    it('should return stringified object', () => {
+      expect(sanitize({ test: true }, {})).toBe(JSON.stringify({ test: true }));
+    });
+
+    it('should return fallback on error', () => {
+      const circular = {};
+      // @ts-ignore
+      circular.self = circular;
+      expect(sanitize(circular, 'fallback')).toBe(JSON.stringify('fallback'));
+    });
+  });
+
+  describe('generatePaystackParams', () => {
+    it('should generate JS object string with all fields', () => {
+      const js = generatePaystackParams({
+        publicKey: 'pk_test',
+        email: '[email protected]',
+        amount: 100,
+        reference: 'ref123',
+        metadata: { order: 123 },
+        currency: 'NGN',
+        channels: ['card']
+      });
+      expect(js).toContain("key: 'pk_test'");
+      expect(js).toContain("email: '[email protected]'");
+      expect(js).toContain("amount: 10000");
+    });
+  });
+});

README.md

@@ -0,0 +1,103 @@
+import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { Modal, View, ActivityIndicator, } from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import {
+    PaystackParams,
+    PaystackProviderProps,
+} from './types';
+import { validateParams, paystackHtmlContent, generatePaystackParams, handlePaystackMessage } from './utils';
+import { styles } from './styles';
+
+export const PaystackContext = createContext<{
+    popup: {
+        checkout: (params: PaystackParams) => void;
+        newTransaction: (params: PaystackParams) => void;
+    };
+} | null>(null);
+
+export const PaystackProvider: React.FC<PaystackProviderProps> = ({
+    publicKey,
+    currency = 'NGN',
+    defaultChannels = ['card'],
+    debug = false,
+    children,
+    onGlobalSuccess,
+    onGlobalCancel,
+}) => {
+    const [visible, setVisible] = useState(false);
+    const [params, setParams] = useState<PaystackParams | null>(null);
+    const [method, setMethod] = useState<'checkout' | 'newTransaction'>('checkout');
+
+    const fallbackRef = useMemo(() => `ref_${Date.now()}`, []);
+
+    const open = useCallback(
+        (params: PaystackParams, selectedMethod: 'checkout' | 'newTransaction') => {
+            if (debug) console.log(`[Paystack] Opening modal with method: ${selectedMethod}`);
+            if (!validateParams(params, debug)) return;
+            setParams(params);
+            setMethod(selectedMethod);
+            setVisible(true);
+        },
+        [debug]
+    );
+
+    const checkout = (params: PaystackParams) => open(params, 'checkout');
+    const newTransaction = (params: PaystackParams) => open(params, 'newTransaction');
+
+    const close = () => {
+        setVisible(false);
+        setParams(null);
+    }
+
+    const handleMessage = (event: WebViewMessageEvent) => {
+        handlePaystackMessage({
+            event,
+            debug,
+            params,
+            onGlobalSuccess,
+            onGlobalCancel,
+            close,
+        });
+    };
+
+    const paystackHTML = useMemo(() => {
+        if (!params) return '';
+        return paystackHtmlContent(
+            generatePaystackParams({
+                publicKey,
+                email: params.email,
+                amount: params.amount,
+                reference: params.reference || fallbackRef,
+                metadata: params.metadata,
+                currency,
+                channels: defaultChannels,
+            }),
+            method
+        );
+    }, [params, method]);
+
+    if (debug && visible) {
+        console.log('[Paystack] HTML Injected:', paystackHTML);
+    }
+
+    return (
+        <PaystackContext.Provider value={{ popup: { checkout, newTransaction } }}>
+            {children}
+            <Modal visible={visible} transparent animationType="slide">
+                <View style={styles.container}>
+                    <WebView
+                        originWhitelist={["*"]}
+                        source={{ html: paystackHTML }}
+                        onMessage={handleMessage}
+                        javaScriptEnabled
+                        domStorageEnabled
+                        startInLoadingState
+                        onLoadStart={() => debug && console.log('[Paystack] WebView Load Start')}
+                        onLoadEnd={() => debug && console.log('[Paystack] WebView Load End')}
+                        renderLoading={() => <ActivityIndicator size="large" />}
+                    />
+                </View>
+            </Modal>
+        </PaystackContext.Provider>
+    );
+};

__tests__/index.test.tsx

@@ -0,0 +1,10 @@
+import { PaystackContext, PaystackProvider } from "./PaystackProvider"
+import { usePaystack } from "./usePaystack"
+import * as PaystackProps from './types'
+
+export {
+    PaystackProvider,
+    PaystackContext,
+    usePaystack,
+    PaystackProps
+}