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

Question

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

this.usePaymentLink 不是函数

我到处搜索，但找不到 this.usePaymentLink 的定义位置。您可以查看我的 sn-p 并告诉我我错过了什么以及 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

所以我一直在尝试将它应用到expo上，但最终取得了突破。

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

// 这是直接来自他们的 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: 'FLWPUBK-43019239kj8739hj945a36ab52375479-X',
         customer: {
             email: 'user@gmail.com'
         },
         amount: 2000,
         currency: 'NGN',
         payment_options: 'card'
      }}
   />

``