paylode-reactjs/README.md

palode ReactJS Wrapper for quick integration

<div align="center">
<img width="400" valign="top" src="https://i.ibb.co/XznNWXw/paylodelogo.png" alt="paylodelogo" border="0">
</div>

<h1 align="center">
  <img width="60" valign="bottom" src="https://reactnative.dev/img/header_logo.svg" alt="ReactJS">
   Paylode
</h1>

# Paylode Checkout Wrapper for ReactJS

# Requirements

This module was built and tested using React 15.0.0 - 18.0.0

## Get Started

Steps to add Paylode checkout to your React application

[![NPM](https://img.shields.io/npm/v/react-seerbit.svg)](https://www.npmjs.com/package/seerbit-reactjs) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save paylode-reactjs
```

## Usage

```jsx
import React, { Component } from "react";
import PaylodeButton from "paylode-reactjs";

const App = () => {
  const close = (close) => {
    console.log(close);
  };
  const callback = (response) => {
    console.log(response);
  };

  const checkProgress = (progress) => {
    console.log(progress);
  };

  const options = {
    publicKey: "PLPK_**************",
    phoneNumber: "0900000000",
    email: "test@gmail.com",
    amount: total,
    currency: "NGN",
    onClose: function(data) {
      // alert("iFRAME CLOSED Now");
      // console.log("Returned data:", data);
    },
    onSuccess: function(data) {
      console.log("Returned data:", data);
    },
  };

  return (
    <SeerbitCheckout
     
      type="div"
      currency={options.currency}
      country={"NG"}
      publicKey={options.publicKey}
      onClose={options.onClose}
      scriptStatus={checkProgress}
      amount={options.amount}
      tag={"button"}
      firstname={options.firstname}
      lastname={options.lastname}
      email={options.lastname}
      phoneNumber={options.phoneNumber}
      title={"Pay with paylode"}
    />
  );
};

export default App;
```

Please checkout <a href='https://doc.paylode.com'>Paylode Developer Documentation</a> for other available options you can add to the tag

## License

MIT © [paylode](https://github.com/seerbit)