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

Question

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

this.usePaymentLink is not a function

我到处搜索，但找不到 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: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187b6d6b6c77757d6a357d75797174587d60797568747d367b7775" rel="noreferrer noopener nofollow">[email protected]</a>',
            },
            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: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e1f7f1f6edefe7f0afe7efe3ebeec2e7fae3eff2eee7ace1edef" rel="noreferrer noopener nofollow">[email protected]</a>'
    },
    amount: 2000,
    currency: 'NGN',
    payment_options: 'card'
  }}
/>

//我的更正

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

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

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

• 然后我将我的公共(public) flutterwave 帐户 key 粘贴到“商家公钥”

• 我还粘贴了我的 flutterwave 帐户电子邮件来代替此“[email protected]”

从'flutterwave-react-native'导入{PayWithFlutterwave};

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: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b0e081e093b1c161a121755181416" rel="noreferrer noopener nofollow">[email protected]</a>'
         },
         amount: 2000,
         currency: 'NGN',
         payment_options: 'card'
      }}
   />

``