react-native-directpay-ipg/lib/module/Components/IPGComponent.js

DirectSDK for IPG

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import Pusher from 'pusher-js/react-native';
import { // ActivityIndicator,
Dimensions, SafeAreaView, StyleSheet // Text,
} from 'react-native';
import { IPGStage } from 'react-native-directpay-ipg';
import WebView from 'react-native-webview';
import AwesomeLoading from 'react-native-awesome-loading';

const sessionUrl = stage => {
  return stage === IPGStage.PROD ? 'https://gateway.directpay.lk/api/v3/create-session' : 'https://test-gateway.directpay.lk/api/v3/create-session';
};

class IPGComponent extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "pusher", void 0);

    this.state = {
      link: '',
      token: null,
      loading: true,
      webloading: false
    };
  }

  async createSession() {
    try {
      const response = await fetch(sessionUrl(this.props.stage), {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'x-plugin-source': 'REACT-NATIVE',
          'x-plugin-version': '0.1.4',
          'Authorization': 'hmac ' + this.props.signature
        },
        body: this.props.dataString
      });
      const json = await response.json();
      console.log(json);

      if (json.status === 200) {
        this.setState({
          token: json.data.token,
          link: json.data.link
        });
        this.initPusher(json.data.ak, json.data.ch);
      } else {
        this.props.callback(json);
      }
    } catch (error) {
      this.props.callback({
        status: 400,
        data: {
          code: 'SERVER_ERROR',
          title: 'Failed proceed payment',
          message: 'Failed proceed payment'
        }
      });
    } finally {
      this.setState({
        loading: false
      });
    }
  }

  async initPusher(ak, ch) {
    this.pusher = new Pusher(ak, {
      cluster: 'ap2'
    });
    this.bindToPusher(ch);
  }

  bindToPusher(ch) {
    setTimeout(() => {
      let connection = this.pusher.connection.bind('error', function (err) {
        if (err.error.data.code === 4004) {
          console.log('Over limit!');
        }
      });

      if (connection.state === 'connected') {
        const channel = this.pusher.subscribe(ch);
        channel.bind('SDK_' + this.state.token, data => {
          this.props.callback(data.response);
        });
      } else if (connection.state === 'connecting') {
        this.bindToPusher(ch);
      }
    }, 1000);
  }

  componentDidMount() {
    this.createSession();
  }

  componentWillUnmount() {
    if (this.pusher) {
      this.pusher.unsubscribe('dp_plugin_dev');
      this.pusher.disconnect();
    }
  }

  IndicatorLoadingView() {
    return /*#__PURE__*/React.createElement(AwesomeLoading, {
      indicatorId: 8,
      size: 50,
      isActive: true,
      text: "Please wait..."
    });
  }

  render() {
    return this.state.loading ? this.IndicatorLoadingView() : /*#__PURE__*/React.createElement(SafeAreaView, null, /*#__PURE__*/React.createElement(WebView, {
      startInLoadingState: true,
      javaScriptEnabled: true,
      renderLoading: this.IndicatorLoadingView,
      style: styles.container,
      source: {
        uri: this.state.link
      }
    }));
  }

}

const styles = StyleSheet.create({
  container: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    marginVertical: 20
  },
  indicator: {
    position: 'absolute',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }
});
export default IPGComponent;
//# sourceMappingURL=IPGComponent.js.map