test-reactjs-caleb/src/index.js

paylode ReactJS Wrapper for quick integration

import React from 'react'
import PropTypes from 'prop-types'
import { loadScript } from './lib/helpers'

class PaylodeButton extends React.Component {
  constructor(props) {
    super(props)
    this.checkout = this.checkout.bind(this)
    this.state = {
      ready: false
    }
  }

  componentDidMount() {
    if (this.props.scriptStatus) this.props.scriptStatus('loading')
    // const scriptUrl = 'http://94.229.79.27:8451/checkout.js'
    const scriptUrl = 'https://checkout.paylodeservices.com/checkout.js'
    loadScript(
      scriptUrl,
      this.props.scriptId,
      (r) => this.notifyLoadScriptReady(r),
      (e) => this.notifyLoadScriptError(e)
    )
  }

  notifyLoadScriptError(e) {
    if (this.props.scriptStatus) this.props.scriptStatus('fail: ' + e)
  }

  notifyLoadScriptReady() {
    this.setState({ ready: true })
    if (this.props.scriptStatus) this.props.scriptStatus('ready')
  }

  checkout() {
    if (!this.state.ready) return false
    var handler = PaylodeCheckout.setup({
      currency: this.props.currency,
      country: this.props.country,
      amount: this.props.amount,
      redirectUrl: this.props.redirectUrl,
      publicKey: this.props.publicKey,
      firstname: this.props.firstname,
      lastname: this.props.lastname,
      email: this.props.email,
      phonenumber: this.props.phonenumber,
      onClose: this.props.onClose,
      onSuccess: this.props.onSuccess

    })

    handler.openIframe()

    // window.SeerbitPay(this.props.callback, this.props.close);
  }
  render() {
    const CTAElem = this.props.type
    return (
      <div className='seerbit-pay' id='paylode-button'>
        <CTAElem
          className={this.props.className}
          onClick={this.checkout}
          disabled={this.props.disabled}
          type={this.props.type === 'button' ? 'button' : null}
        >
          {this.props.title}
        </CTAElem>
      </div>
    )
  }
}

PaylodeButton.propTypes = {
  title: PropTypes.string,
  disabled: PropTypes.bool,
  className: PropTypes.string,
  type: PropTypes.string,
  scriptId: PropTypes.string,
  currency: PropTypes.string,
  country: PropTypes.string,
  amount: PropTypes.number,
  publicKey: PropTypes.string,
  onSuccess: PropTypes.func,
  redirectUrl: PropTypes.string,
  onClose: PropTypes.func,
  scriptStatus: PropTypes.func,
  firstname: PropTypes.string,
  lastname: PropTypes.string,
  email: PropTypes.string,
  phonenumber: PropTypes.string

}

PaylodeButton.defaultProps = {
  title: 'Checkout',
  currency: 'NGN',
  type: 'button',
  version: '2',
  ClassName: '',
  scriptId: 'paylode-reactjs',
  disabled: false
}

export default PaylodeButton