How do we use Flutterwave payment in 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'
      }}
   />

``