react-nativepayment-gatewaypaymentflutterwave

How do we use Flutterwave payment in react native?


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>
    )
  }
}

Solution

  • 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

    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'
          }}
       />
    

    ``