我们如何在React Native中使用Flutterwave支付？

Question

我想集成flutterwave到我的react native应用程序中。我下载了他们的 npm 包flutterwave-react-native并按照他们的教程进行操作，但仍然无法做到。我在Github上使用他们的示例片段，但收到一条错误消息：

this.usePaymentLink 不是函数

我到处搜索但找不到this.usePaymentLink定义的位置。您可以查看我的代码片段并告诉我我错过了什么以及this.usePaymentLink看起来如何。

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

所以我一直在尝试将其应用到世博会上，但最终取得了突破。

// 所以我在让它运行之前做了一些小修正

// 这是直接来自他们的 npm 或 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'
  }}
/>

// 我的更正

• 首先handleOnRedirect必须是一个定义的函数

• 其次，我删除了handleOnRedirect函数之前的三个点（...）

• 然后创建一个函数来生成随机参考号

• 然后我将我的公共 flutterwave 帐户密钥粘贴为“商家公钥”

• 我还粘贴了我的 flutterwave 帐户电子邮件来代替“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'
      }}
   />

``