How do we use Flutterwave payment in react native? - react-native

Question

I want to integrate flutterwave in my react native application. I downloaded their npm package called flutterwave-react-native and followed their tutorial but still can't do it. I'm using their sample snippet on Github and I'm getting an error that says:
this.usePaymentLink is not a function
I searched everywhere but couldn't find where this.usePaymentLink was defined. You can check out my snippet and tell me what I missed and how this.usePaymentLink can look like.
import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import {FlutterwaveInit} from 'flutterwave-react-native';
class MyCart extends React.Component {
abortController = null;
componentWillUnmout() {
if (this.abortController) {
this.abortController.abort();
}
}
handlePaymentInitialization = () => {
this.setState({
isPending: true,
}, () => {
// set abort controller
this.abortController = new AbortController;
try {
// initialize payment
const paymentLink = await FlutterwaveInit(
{
tx_ref: generateTransactionRef(),
authorization: '[merchant public key]',
amount: 100,
currency: 'USD',
customer: {
email: 'customer-email#example.com',
},
payment_options: 'card',
},
this.abortController
);
// use payment link
return this.usePaymentLink(paymentLink);
} catch (error) {
// do nothing if our payment initialization was aborted
if (error.code === 'ABORTERROR') {
return;
}
// handle other errors
this.displayErrorMessage(error.message);
}
});
}
render() {
const {isPending} = this.state;
return (
<View>
...
<TouchableOpacity
style={[
styles.paymentbutton,
isPending ? styles.paymentButtonBusy : {}
]}
disabled={isPending}
onPress={this.handlePaymentInitialization}
>
Pay $100
</TouchableOpacity>
</View>
)
}
}

Answer 1

so i have been trying to apply it on expo but finally got a breakthrough.
// so i made some little corrections before i could get it running
// this is the code directly from their npm or github
import {PayWithFlutterwave} from 'flutterwave-react-native';
<PayWithFlutterwave
...
onRedirect={handleOnRedirect}
options={{
tx_ref: transactionReference,
authorization: '[merchant public key]',
customer: {
email: 'customer-email#example.com'
},
amount: 2000,
currency: 'NGN',
payment_options: 'card'
}}
/>
// my correction
first of all handleOnRedirect must be a defined function
secondly i removed the three dots (...) before the handleOnRedirect function
then created a function to generate a randomized refrenced no
then i pasted my public flutterwave account key for "merchant public key"
i also pasted my flutterwave account email in place of this 'customer-email#example.com'
import {PayWithFlutterwave} from 'flutterwave-react-native';
const handleOnRedirect = () => {
console.log('sadi')
}
const generateRef = (length) => {
var a = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890".split("");
var b = [];
for (var i=0; i<length; i++) {
var j = (Math.random() * (a.length-1)).toFixed(0);
b[i] = a[j];
}
return b.join("");
}
<PayWithFlutterwave
onRedirect={handleOnRedirect}
options={{
tx_ref: generateRef(11),
authorization: 'MY_PUBLIC_KEY',
customer: {
email: 'user#gmail.com'
},
amount: 2000,
currency: 'NGN',
payment_options: 'card'
}}
/>
``