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

问题描述

我想将 flutterwave 集成到我的 react native 应用程序中。我下载了他们的名为 flutterwave-react-native 的 npm 包并遵循了他们的教程，但仍然无法做到。我在 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: '[e-mail]',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>
    )
  }
}

解决方法

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

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

// 这是直接来自他们的 npm 或 github 的代码

import {PayWithFlutterwave} from 'flutterwave-react-native';

<PayWithFlutterwave
  ...
  onRedirect={handleOnRedirect}
  options={{
    tx_ref: transactionReference,authorization: '[merchant public key]',customer: {
      email: '[e-mail]'
    },amount: 2000,currency: 'NGN',payment_options: 'card'
  }}
/>

//我的更正

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

• 其次我删除了 handleOnRedirect 函数之前的三个点 (...)

• 然后创建了一个函数来生成一个随机引用的 no

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

• 我还粘贴了我的 flutterwave 帐户电子邮件来代替这个'[e-mail]'

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: 'FLWPUBK-43019239kj8739hj945a36ab52375479-X',customer: {
             email: '[e-mail]'
         },payment_options: 'card'
      }}
   />

``