如何在React Native中实现Paystack支付网关 复制示例代码运行报错求助

原代码存在的问题 #

• JSX语法错误：TouchableOpacity 结束标签写法错误，原代码写为<TouchableOpacity/>，正确应为</TouchableOpacity>，该问题会直接导致编译失败。
• 空值风险：未给useRef传入初始值null，同时调用startTransaction前未判断ref.current是否存在，组件未完成挂载时触发点击会抛出空值错误。
• 参数类型不匹配：部分版本的react-native-paystack-webview要求amount参数为数字类型，原代码传入字符串格式可能触发类型校验错误。
• 占位参数未替换：paystackKey使用示例占位值，未替换为Paystack后台申请的真实公钥，会导致支付初始化失败。

修复后可运行代码 #

import React, { useRef } from 'react';
import { Paystack, paystackProps } from 'react-native-paystack-webview';
import { View, TouchableOpacity, Text } from 'react-native';

function Pay() {
  // 给useRef添加初始值null
  const paystackWebViewRef = useRef<paystackProps.PayStackRef>(null);

  return (
    <View style={{flex: 1}}>
      <Paystack
        // 替换为你在Paystack后台获取的真实公钥
        paystackKey="pk_test_xxxxxxxxxxxxxxx"
        billingEmail="paystackwebview@something.com"
        // amount转为数字类型
        amount={25000.00}
        onCancel={(e) => {
          // 编写取消支付的业务逻辑
        }}
        onSuccess={(res) => {
          // 编写支付成功的业务逻辑
        }}
        ref={paystackWebViewRef}
      />

      <TouchableOpacity 
        onPress={() => {
          // 增加非空判断，避免空值报错
          paystackWebViewRef.current?.startTransaction()
        }}
      >
        <Text>立即支付</Text>
        {/* 修正闭合标签 */}
      </TouchableOpacity>
    </View>
  );
}

额外注意事项 #

• iOS平台需要提前在Info.plist中配置HTTP请求权限，避免Paystack页面加载失败。
• 测试阶段请使用测试公钥，上线前再切换为生产公钥，避免产生真实交易流水。

内容的提问来源于stack exchange，提问作者Ebencharger