A simple script for rave-payment library that + a little button for triggering the modal.

RavePayment.jsx

import React, { Component } from 'react'
    // import the library
    import RavePaymentModal from 'react-ravepayment'
    
    class App extends Component {
    
    		state = {
    		  key: "FLWPUBK-XXXXXXXXXXXXXXXXXXXXXXXXXX-X", // RavePay PUBLIC KEY
    		  email: "foo@example.com", // customer email
    		  amount: "1000" // equals NGN 1000. Minimum amount allow  of NGN500,
    	  }
    
    	  callback = (response) => console.log(response);
    	  close = () => console.log("Payment closed");
    
    	  getReference = () => {
    		  let text = "";
    		  let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.=";
    
    		  for( let i=0; i < 10; i++ )
    			  text += possible.charAt(Math.floor(Math.random() * possible.length));
    
    		  return text;
    	  }
        
        makePayment = () => {
          return (
            <RavePaymentModal
              text="Make Payment"
              class="payButton"
              reference={this.getReference()}
              email={this.state.email}
              amount={this.state.amount}
              ravePubKey={this.state.key}
              callback={this.callback}
              close={this.close}
            />
          );
        }
    
    	render () {
        return (
          <div className='App'>
            <p className='App-intro'>
    	        <button className={this.state.class} onClick={this.payWithRave} >
                {this.state.text}
              </button>
            </p>
          </div>
        )
      }
    }
    
    export default App