react-paga

This is a react.js library for implementing paga checkout

Demo

Get Started

This React library provides a wrapper to add Paga Checkout to your React application

Install

npm install react-paga --save

Usage

    import React, { Component } from 'react';

    //import the library
    import PagaCheckoutButton from 'react-paga';

    class App extends Component {

    	state = {
            src: "https://beta.mypaga.com/checkout/?w=180&h=40&url=https://dl.dropboxusercontent.com/s/n1gy0iqo8kpl3lo/doroki_button.png?dl=0", // w=width of button, h=height of button // url=to customise your button add a link to your button image
            charge_url: "https://mymarket/payment/complete", // your store url for payment verification
    		    key: "######################################", // PAGA PUBLIC KEY
    		    email: "[email protected]",  // customer email
    		    amount: 10000,
            account_number: "41007258779", // account number identifying customer on the merchant's system.
            funding_sources: "BANK,CARD,PAGA" // Available options are CARD, BANK and PAGA.
            error_message: "" // Optional, error message to display to customers in the case of an error loading the script
    	}

    	getReference = () => {
    		// you can use your own unique reference implementation here
    		let text = "";
    		let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.=";

    		for( let i=0; i < 15; i++ )
    			text += possible.charAt(Math.floor(Math.random() * possible.length));

    		return text;
    	}

      render() {
        return (
          <div>
              <PagaCheckoutButton
                src={this.state.src}
                charge_url={this.state.charge_url}
                public_key={this.state.key}
                amount={this.state.amount}
                email={this.state.email}
                payment_reference={getReference()}
                account_number={this.state.account_number}
                funding_sources={this.state.funding_sources}
              />
          </div>
        );
      }
    }

    export default App;

Please checkout Paga Documentation for other available options you can add to the tag.

Deployment

REMEMBER TO CHANGE THE KEY WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b feat/feature-name
3. Commit your changes: npm run commit follow the commit message
4. Push to the branch: git push
5. Submit a pull request 😉😉

How can I thank you?

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? Spread the word!

Don't forget to follow me on twitter!

Thanks! Henry Ugochukwu.

License

This project is licensed under the MIT License - see the LICENSE.md file for details