探索React Native Paystack WebView：轻松集成Paystack支付的解决方案

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
 
class PaystackWebView extends Component {
  constructor(props) {
    super(props);
    this.webview = React.createRef();
  }
 
  componentDidMount() {
    this.injectJavaScript();
  }
 
  injectJavaScript = () => {
    const { onSuccess, onClose } = this.props;
    const jsCode = `
      document.addEventListener('payment.success', function (event) {
        postMessage(event.detail);
      });
      document.addEventListener('transaction.closed', function () {
        postMessage('CLOSED');
      });
    `;
 
    this.webview.current.injectJavaScript(jsCode);
  };
 
  render() {
    const { url } = this.props;
    return (
      <WebView
        ref={this.webview}
        source={{ uri: url }}
        onMessage={this.handleMessage}
      />
    );
  }
 
  handleMessage = event => {
    const { onSuccess, onClose } = this.props;
    const data = event.nativeEvent.data;
 
    if (data === 'CLOSED') {
      onClose && onClose();
    } else {
      onSuccess && onSuccess(data);
    }
  };
}
 
export default PaystackWebView;

这段代码实现了一个React Native的Paystack WebView组件，用于集成Paystack的支付网页。它创建了一个WebView来加载Paystack的支付页面，并监听页面中的两个事件：payment.success和transaction.closed。当这些事件发生时，它会通过postMessage将事件数据传回给React Native应用，并通过props中定义的回调函数处理这些数据。