react-native-flutterwave-sdk

This library uses the official flutterwave's native android sdk and ios sdk

Demo

Installation

``sh
npm install react-native-flutterwave-sdk
`

or using yarn

`sh
yarn add react-native-flutterwave-sdk
`

Usage

$3

`js
import { initializeRaveSdk } from 'react-native-flutterwave-sdk';

return (

title={'Make Payment'}
onPress={async () => {
try {
// this will display flutterwave payment page
const response = await initializeRaveSdk({
ref: 'unique_txn_ref...', // this is your transaction reference
publicKey: 'FLWPUBK_TEST-XXXXXXXXXXXXXXX-X',
encryptionKey: 'FLWSECK_TESTxxxxxxxxx',
amount: 3500,
currency: 'NGN',
email: 'string',
fName: 'Richard',
lName: 'Hendricks',
bankTransferPayments: { enabled: true },
acceptCardPayments: true,
acceptAccountPayments: true,
acceptMpesaPayments: true,
acceptUssdPayments: true,
acceptBarterPayments: true,
isStagingEnv: true,
allowSaveCardFeature: true,
shouldDisplayFee: true,
showStagingLabel: true,
});
if (response.status === 'success') {
// handle payment completion
}
} catch (e) {
// handle error here
console.error(e);
}
}}
/>

);
`

$3

Please Note: calling toggleDarkMode(boolean) method will change color scheme of your entire app

`js
import { toggleDarkMode } from 'react-native-flutterwave-sdk';
const [isDarkMode, setDarkMode] = useState();

useEffect(() => {
toggleDarkMode(!!isDarkMode);
}, [isDarkMode]);

return (

title={'Toggle theme'}
onPress={() => {
setDarkMode(!isDarkMode);
}}
/>

);
`

$3

You can apply custom styling to Flutterwave's Drop Ui.
To do this, you need to provide styling in your styles.xml in the android folder of your react native app.
You can edit the following styling example to your own taste

`xml

`

then you can provide the name of your styling to the argument of initializeRaveSdk()

`js
initializeRaveSdk({
...props,
theme: 'MyCustomRaveTheme',
});
`

Known Issues

The ios sdk library contains alot of bugs and should not be use in production.

Example Demo

run the /example` directory

License

MIT