Main

dist/FlutterwaveButton.d.ts

@@ -5,6 +5,7 @@ interface FlutterwaveButtonProps {
     disabled?: boolean;
     alignLeft?: boolean;
     onPress?: () => void;
+    children?: React.ReactNode;
 }
 declare const FlutterwaveButton: React.FC<FlutterwaveButtonProps>;
 export default FlutterwaveButton;

dist/FlutterwaveButton.js

@@ -7,18 +7,16 @@ var FlutterwaveButton = function FlutterwaveButton(_a) {
     var style = _a.style, alignLeft = _a.alignLeft, children = _a.children, disabled = _a.disabled, onPress = _a.onPress;
     // render primary button
     return (<TouchableHighlight underlayColor={colors.primaryLight} disabled={disabled} onPress={onPress} style={[
-        styles.button,
-        disabled ? styles.buttonBusy : {},
-        alignLeft ? styles.buttonAlignLeft : {},
-        style
-    ]} activeOpacity={1} testID='flw-button'>
+            styles.button,
+            disabled ? styles.buttonBusy : {},
+            alignLeft ? styles.buttonAlignLeft : {},
+            style,
+        ]} activeOpacity={1} testID="flw-button">
         <>
-          {children ? children : (<Image source={pryContent} resizeMode="contain" resizeMethod="resize" style={styles.buttonContent} fadeDuration={0}/>)}
-          {disabled
-        ? (<View style={styles.buttonBusyOvelay}/>)
-        : null}
+          {children ? (children) : (<Image source={pryContent} resizeMode="contain" resizeMethod="resize" style={styles.buttonContent} fadeDuration={0}/>)}
+          {disabled ? <View style={styles.buttonBusyOvelay}/> : null}
         </>
-    </TouchableHighlight>);
+      </TouchableHighlight>);
 };
 // component UI styles
 var styles = StyleSheet.create({
@@ -28,13 +26,13 @@ var styles = StyleSheet.create({
         top: 0,
         bottom: 0,
         right: 0,
-        backgroundColor: 'rgba(255, 255, 255, 0.6)'
+        backgroundColor: 'rgba(255, 255, 255, 0.6)',
     },
     buttonBusy: {
-        borderColor: colors.primaryLight
+        borderColor: colors.primaryLight,
     },
     buttonAlignLeft: {
-        justifyContent: 'flex-start'
+        justifyContent: 'flex-start',
     },
     button: {
         paddingHorizontal: 16,
@@ -47,13 +45,13 @@ var styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         flexDirection: 'row',
-        overflow: 'hidden'
+        overflow: 'hidden',
     },
     buttonContent: {
         resizeMode: 'contain',
         width: 187.3,
-        height: 187.3 / contentSizeDimension
-    }
+        height: 187.3 / contentSizeDimension,
+    },
 });
 // export component as default
 export default FlutterwaveButton;

dist/FlutterwaveCheckout.js

@@ -32,16 +32,16 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
         Animated.timing(animation.current, {
             toValue: 1,
             duration: 700,
-            easing: Easing["in"](Easing.elastic(0.72)),
-            useNativeDriver: false
+            easing: Easing.in(Easing.elastic(0.72)),
+            useNativeDriver: false,
         }).start();
     }, []);
     var animateOut = React.useCallback(function () {
         return new Promise(function (resolve) {
             Animated.timing(animation.current, {
                 toValue: 0,
                 duration: 400,
-                useNativeDriver: false
+                useNativeDriver: false,
             }).start(function () {
                 setShow(false);
                 resolve();
@@ -59,15 +59,30 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
             Alert.alert('', 'Are you sure you want to cancel this payment?', [
                 { text: 'No' },
                 {
-                    text: 'Yes, Cancel',
+                    text: 'Yes',
                     style: 'destructive',
-                    onPress: function () { return handleAbort(true); }
+                    onPress: function () { return handleAbort(true); },
                 },
             ]);
             return;
         }
         // remove tx_ref and dismiss
-        animateOut().then(onAbort);
+        // animateOut()
+        //   if(onAbort){
+        //    setTimeout(() => {
+        //   onAbort();
+        // }, 500);
+        //   }
+        if (webviewRef.current) {
+            webviewRef.current.stopLoading();
+        }
+        // Stop animations
+        animation.current.stopAnimation();
+        // Close modal after cleanup
+        setTimeout(function () { return setShow(false); }, 50);
+        if (onAbort) {
+            onAbort();
+        }
     }, [onAbort, animateOut]);
     var handleNavigationStateChange = React.useCallback(function (ev) {
         // cregex to check if redirect has occured on completion/cancel
@@ -77,11 +92,28 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
             return true;
         }
         // dismiss modal
-        animateOut().then(function () {
-            if (onRedirect) {
-                onRedirect(getRedirectParams(ev.url));
-            }
-        });
+        // animateOut().then(() => {
+        //   if (onRedirect) {
+        //     // let a = getRedirectParams(ev.url);
+        //     let url = JSON.stringify(ev.url);
+        //     Alert.alert(url);
+        //     if (onAbort) {
+        //       onAbort();
+        //       return;
+        //     }
+        //     // onRedirect(a);
+        //   }
+        // });
+        animation.current.stopAnimation();
+        // Close modal after cleanup
+        setTimeout(function () { return setShow(false); }, 50);
+        var a = getRedirectParams(ev.url);
+        if (onRedirect) {
+            onRedirect(a);
+        }
+        // if (onAbort) {
+        //   onAbort();
+        // }
         return false;
     }, [onRedirect]);
     var doAnimate = React.useCallback(function () {
@@ -99,35 +131,35 @@ var FlutterwaveCheckout = function FlutterwaveCheckout(props) {
     }, [doAnimate]);
     var marginTop = animation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [windowHeight, 0]
+        outputRange: [windowHeight, 0],
     });
     var opacity = animation.current.interpolate({
         inputRange: [0, 0.3, 1],
-        outputRange: [0, 1, 1]
+        outputRange: [0, 1, 1],
     });
     return (<Modal transparent={true} animated={false} hardwareAccelerated={false} visible={show}>
-      <FlutterwaveCheckoutBackdrop onPress={function () { return handleAbort(); }} animation={animation.current}/>
-      <Animated.View style={[
-        styles.webviewContainer,
-        {
-            marginTop: marginTop,
-            opacity: opacity
-        }
-    ]} testID='flw-checkout-dialog'>
-        <WebView ref={webviewRef} source={{ uri: link || '' }} style={styles.webview} startInLoadingState={true} scalesPageToFit={true} javaScriptEnabled={true} onShouldStartLoadWithRequest={handleNavigationStateChange} renderError={function () { return <FlutterwaveCheckoutError hasLink={!!link} onTryAgain={handleReload}/>; }} renderLoading={function () { return <FlutterwaveCheckoutLoader />; }}/>
-      </Animated.View>
-    </Modal>);
+        <FlutterwaveCheckoutBackdrop onPress={function () { return handleAbort(); }} animation={animation.current}/>
+        <Animated.View style={[
+            styles.webviewContainer,
+            {
+                marginTop: marginTop,
+                opacity: opacity,
+            },
+        ]} testID="flw-checkout-dialog">
+          <WebView ref={webviewRef} source={{ uri: link || '' }} style={styles.webview} startInLoadingState={true} scalesPageToFit={true} javaScriptEnabled={true} onShouldStartLoadWithRequest={handleNavigationStateChange} renderError={function () { return (<FlutterwaveCheckoutError hasLink={!!link} onTryAgain={handleReload}/>); }} renderLoading={function () { return <FlutterwaveCheckoutLoader />; }}/>
+        </Animated.View>
+      </Modal>);
 };
 var FlutterwaveCheckoutBackdrop = function FlutterwaveCheckoutBackdrop(_a) {
     var animation = _a.animation, onPress = _a.onPress;
     // Interpolation backdrop animation
     var backgroundColor = animation.interpolate({
         inputRange: [0, 0.3, 1],
-        outputRange: [colors.transparent, colors.transparent, 'rgba(0,0,0,0.5)']
+        outputRange: [colors.transparent, colors.transparent, 'rgba(0,0,0,0.5)'],
     });
-    return (<TouchableWithoutFeedback testID='flw-checkout-backdrop' onPress={onPress}>
-      <Animated.View style={Object.assign({}, styles.backdrop, { backgroundColor: backgroundColor })}/>
-    </TouchableWithoutFeedback>);
+    return (<TouchableWithoutFeedback testID="flw-checkout-backdrop" onPress={onPress}>
+        <Animated.View style={Object.assign({}, styles.backdrop, { backgroundColor: backgroundColor })}/>
+      </TouchableWithoutFeedback>);
 };
 export var FlutterwaveCheckoutError = function (_a) {
     var hasLink = _a.hasLink, onTryAgain = _a.onTryAgain;
@@ -153,17 +185,17 @@ var styles = StyleSheet.create({
     errorActionButtonText: {
         textAlign: 'center',
         color: colors.primary,
-        fontSize: 16
+        fontSize: 16,
     },
     errorActionButton: {
         paddingHorizontal: 16,
-        paddingVertical: 16
+        paddingVertical: 16,
     },
     errorText: {
         color: colors.secondary,
         textAlign: 'center',
         marginBottom: 32,
-        fontSize: 18
+        fontSize: 18,
     },
     error: {
         position: 'absolute',
@@ -174,19 +206,19 @@ var styles = StyleSheet.create({
         backgroundColor: '#ffffff',
         justifyContent: 'center',
         alignItems: 'center',
-        paddingHorizontal: 56
+        paddingHorizontal: 56,
     },
     backdrop: {
         position: 'absolute',
         left: 0,
         right: 0,
         bottom: 0,
-        top: 0
+        top: 0,
     },
     loadingImage: {
         width: 64,
         height: 64,
-        resizeMode: 'contain'
+        resizeMode: 'contain',
     },
     loading: {
         position: 'absolute',
@@ -196,20 +228,20 @@ var styles = StyleSheet.create({
         left: 0,
         backgroundColor: 'rgba(255, 255, 255, 0.3)',
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     webviewContainer: {
-        top: Platform.select({ ios: 96, android: 64 }),
+        top: Platform.select({ ios: 96, android: 64 }), // status bar height aware for ios
         flex: 1,
         backgroundColor: '#efefef',
-        paddingBottom: Platform.select({ ios: 96, android: 64 }),
+        paddingBottom: Platform.select({ ios: 96, android: 64 }), // status bar height aware for ios
         overflow: 'hidden',
         borderTopLeftRadius: windowHeight * borderRadiusDimension,
-        borderTopRightRadius: windowHeight * borderRadiusDimension
+        borderTopRightRadius: windowHeight * borderRadiusDimension,
     },
     webview: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0)'
-    }
+        backgroundColor: 'rgba(0,0,0,0)',
+    },
 });
 export default FlutterwaveCheckout;

dist/FlutterwaveInit.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react-native" />
-export declare type Currency = 'AUD' | 'BIF' | 'CDF' | 'CAD' | 'CVE' | 'EUR' | 'GBP' | 'GHS' | 'GMD' | 'GNF' | 'KES' | 'LRD' | 'MWK' | 'MZN' | 'NGN' | 'RWF' | 'SLL' | 'STD' | 'TZS' | 'UGX' | 'USD' | 'XAF' | 'XOF' | 'ZAR' | 'ZMK' | 'ZMW' | 'ZWD';
+export type Currency = 'AUD' | 'BIF' | 'CDF' | 'CAD' | 'CVE' | 'EUR' | 'GBP' | 'GHS' | 'GMD' | 'GNF' | 'KES' | 'LRD' | 'MWK' | 'MZN' | 'NGN' | 'RWF' | 'SLL' | 'STD' | 'TZS' | 'UGX' | 'USD' | 'XAF' | 'XOF' | 'ZAR' | 'ZMK' | 'ZMW' | 'ZWD';
 export interface FlutterwaveInitSubAccount {
     id: string;
     transaction_split_ratio?: number;
@@ -28,7 +27,7 @@ export interface FlutterwaveInitCustomizations {
     logo?: string;
     description?: string;
 }
-export declare type FlutterwaveInitOptions = FlutterwaveInitOptionsBase & {
+export type FlutterwaveInitOptions = FlutterwaveInitOptionsBase & {
     authorization: string;
     tx_ref: string;
     customer: FlutterwaveInitCustomer;