Easily implement Flutterwave for payments in your React Native appliction. This library supports both Android and iOS, and use the Flutterwave's V3 API.

• Getting Started
  • V2 API
  • Installation
  • Dependencies
  • Activity Indicator (Android)
  • Merchant Piblic Key
  • Important Information
• Usage
  • PayWithFlutterwave
  • PayWithFlutterwave (with custom render)
  • FlutterwaveButton (Flutterwave styled button)
  • FlutterwaveInit
  • Aborting Payment Initialization
• Props
  • FlutterwaveInitOptions
  • PayWithFlutterwaveProps
  • FlutterwaveButtonProps
• Types
  • PayWithFlutterwaveProps
  • FlutterwaveButtonProps
  • FlutterwaveInitCustomer
  • FlutterwaveInitCustomization
  • FlutterwaveInitSubAccount
  • FlutterwaveInitOptions
  • FlutterwaveInitError
  • FlutterwavePaymentMeta
  • RedirectParams
  • CustomButtonProps
• Contributing

• Pay with Flutterwave button and checkout dialog.
• Standard payment initialization function.
• Flutterwave designed button.

This version of the library's docs focuses on use cases with the Version 3 of Flutterwaves API, if you are still using the Version 2 API please use this documentation instead.

This library is available on npm, you can install it by running npm install --save flutterwave-react-native or yarn add flutterwave-react-native

In order to render the Flutterwave checkout screen this library depends on react-native-webview ensure you properly install this library before continuing.

To display the Flutterwave styled activity indicator when the checkout screen is being loaded on Android you will need to add some modules in android/app/build.gradle. Skip this if you already have setup your app to support gif images.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.0.0'
}

In order to use this library you are required to use your merchant public key and not the secret key. See how to get your API Keys here

If the options property on PayWithFlutterwave changes, when next the user taps on the button a new payment will be initialized whether the last one was successful or not.

Remember you cannot use the same transaction reference for two different payments, also remember to recreate the transaction reference before allowing the user initiate a new payment.

Below are a few examples showcasing how you can use the library to implement payment in your React Native app.

View All Props

Import PayWithFlutterwave from flutterwave-react-native and use it like so.

import {PayWithFlutterwave} from 'flutterwave-react-native';
// or import PayWithFlutterwave from 'flutterwave-react-native';

interface RedirectParams {
    status: 'successful' | 'cancelled';
    transaction_id?: string;
    tx_ref: string;
  }

 /* An example function called when transaction is completed successfully or canceled */
  const handleOnRedirect = (data: RedirectParams) => {
      console.log(data);
    };

/* An example function to generate a random transaction reference */
  const generateTransactionRef = (length: number) => {
    var result = '';
    var characters =
      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return `flw_tx_ref_${result}`;
  };

<PayWithFlutterwave
  ...
  onRedirect={handleOnRedirect}
  options={{
    tx_ref: generateTransactionRef(10)
    authorization: '[merchant public key]',
    customer: {
      email: '[email protected]'
    },
    amount: 2000,
    currency: 'NGN',
    payment_options: 'card'
  }}
/>

View All Props

Import PayWithFlutterwave from flutterwave-react-native and use it like so.

import {PayWithFlutterwave} from 'flutterwave-react-native';
// or import PayWithFlutterwave from 'flutterwave-react-native';

interface RedirectParams {
    status: 'successful' | 'cancelled';
    transaction_id?: string;
    tx_ref: string;
  }

 /* An example function called when transaction is completed successfully or canceled */
  const handleOnRedirect = (data: RedirectParams) => {
      console.log(data);
    };

<PayWithFlutterwave
  ...
  onRedirect={handleOnRedirect}
  options={{...}}
  customButton={(props) => (
    <TouchableOpacity
      style={styles.paymentButton}
      onPress={props.onPress}
      isBusy={props.isInitializing}
      disabled={props.disabled}>
        <Text style={styles.paymentButtonText}>Pay $500</Text>
    </TouchableOpacity>
  )}
/>

View All Props

Import FlutterwaveButton from flutterwave-react-native and use it like so.

import {FlutterwaveButton} from 'flutterwave-react-native';

<FlutterwaveButton
  style={styles.paymentButton}
  onPress={onPress}
  disabled={disabled}>
  <Text style={styles.paymentButtonText}>Pay $500</Text>
</FlutterwaveButton>;

When called, this function returns a Promise which resolves to a string on success and rejects if an error occurs. See all config options

Import FlutterwaveInit from flutterwave-react-native and use it like so.

import {FlutterwaveInit} from 'flutterwave-react-native';

try {
  // initialize payment
  const paymentLink = await FlutterwaveInit({
    tx_ref: generateTransactionRef(),
    authorization: '[your merchant public Key]',
    amount: 100,
    currency: 'USD',
    customer: {
      email: '[email protected]',
    },
    payment_options: 'card',
  });
  // use payment link
  usePaymentLink(paymentLink);
} catch (error) {
  // handle payment error
  displayError(error.message);
}

👋 Hi, so there are cases where you have already initialized a payment with FlutterwaveInit but might also want to be able to cancel the payment initialization should in case your component is being unmounted or you want to allow users cancel the action before the payment is initialized, we have provided a way for you to do this... continue reading

See Interface

See Interface

See Interface

interface CustomButtonProps {
  disabled: boolean;
  isInitializing: boolean;
  onPress: () => void;
}

interface RedirectParams {
  status: 'successful' | 'cancelled';
  transaction_id?: string;
  tx_ref: string;
}

interface FlutterwaveInitError {
  code: string;
  message: string;
  errorId?: string;
  errors?: Array<string>;
}

interface FlutterwavePaymentMeta {
  [k: string]: any;
}

interface FlutterwaveInitCustomer {
  email: string;
  phonenumber?: string;
  name?: string;
}

interface FlutterwaveInitCustomizations {
  title?: string;
  logo?: string;
  description?: string;
}

interface FlutterwaveInitSubAccount {
  id: string;
  transaction_split_ratio?: number;
  transaction_charge_type?: string;
  transaction_charge?: number;
}

export interface FlutterwaveInitOptions {
  authorization: string;
  tx_ref: string;
  amount: number;
  currency: string;
  integrity_hash?: string;
  payment_options?: string;
  payment_plan?: number;
  redirect_url: string;
  customer: FlutterwaveInitCustomer;
  subaccounts?: Array<FlutterwaveInitSubAccount>;
  meta?: FlutterwavePaymentMeta;
  customizations?: FlutterwaveInitCustomizations;
}

interface PayWithFlutterwaveProps {
  style?: ViewStyle;
  onRedirect: (data: RedirectParams) => void;
  onWillInitialize?: () => void;
  onDidInitialize?: () => void;
  onInitializeError?: (error: FlutterwaveInitError) => void;
  onAbort?: () => void;
  options: Omit<FlutterwaveInitOptions, 'redirect_url'>;
  customButton?: (props: CustomButtonProps) => React.ReactNode;
  alignLeft?: 'alignLeft' | boolean;
}

interface FlutterwaveButtonProps {
  style?: StyleProp<ViewStyle>;
  disabled?: boolean;
  alignLeft?: boolean;
  onPress?: () => void;
}

For information on how you can contribute to this repo, simply go here, all contributions are greatly appreciated.

With love from Flutterwave. 💛