我们如何在 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: '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 0
        </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 函数前的三个点 (...)
然后创建了一个函数来生成随机参考号
然后我为 “商家 public 密钥”粘贴了我的 public 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'
      }}
   />

``

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

How do we use Flutterwave payment in react native?

payment

payment-gateway

react-native

flutterwave