# react-directpay-ipg

> directPay ipg module for React

Latest version **1.0.0** (published 2021-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-directpay-ipg
pnpm add react-directpay-ipg
yarn add react-directpay-ipg
bun add react-directpay-ipg
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-09-01 |
| First published | 2021-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 4 |
| Unpacked size | 85.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nimesh chathuranga |
| Maintainers | nimeshc64 |

## Links

- npm: https://www.npmjs.com/package/react-directpay-ipg
- Repository: https://github.com/directpaylk/react-directpay-ipg
- Homepage: https://github.com/directpaylk/react-directpay-ipg#readme
- Issues: https://github.com/directpaylk/react-directpay-ipg/issues
- npm.io page: https://npm.io/package/react-directpay-ipg

## Dependencies (4)

- [react-spinners](https://npm.io/package/react-spinners.md) ^0.11.0
- [directpay-ipg-js](https://npm.io/package/directpay-ipg-js.md) ^1.0.26
- [react-spinner-loader](https://npm.io/package/react-spinner-loader.md) ^1.1.1
- [react-fullpage-custom-loader](https://npm.io/package/react-fullpage-custom-loader.md) ^0.1.6

## Recent versions

- 1.0.0 (latest) — 2021-09-01

## README

#DirectPay ipg - React Plugin
##### Version 1.0.0

> DirectPay Payment Gateway Plugin for React can payment using MasterCard, Visa, Amex, Frimi and LankaQr.

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

![dp-ipg-react](https://media.giphy.com/media/5fHDKczZIg62zVlYHg/giphy.gif?cid=790b7611dbaec48134dafd8bc097f8ab311cdef3609126af&rid=giphy.gif)


## Install

```bash
npm install --save react-directpay-ipg
```

## Usage

```jsx
import React, { Component } from 'react'

import DirectPayIpg from 'react-directpay-ipg'
import 'react-directpay-ipg/dist/index.css'

class Example extends Component {

  const onError = (data) => {
    console.log('client-on-error', data)
    alert(JSON.stringify(data))
  }

  const onSuccess = (data) => {
    console.log('client-on-Success', data)
    alert(JSON.stringify(data))
  }

  let payRequest = {
    signature: signature,
    dataString: dataString,
    stage: 'DEV'
  }

  render() {
    return <div>
      <h3>Size: 250 / ButtonColour: white / type: round</h3>
      <DirectPayIpg
        size={150}
        type={'flat'}
        colour={'white'}
        PaymentRequest={payRequest}
        onError={onError}
        onSuccess={onSuccess}
      />

      <h3>Default Button</h3>
      <DirectPayIpg
        PaymentRequest={payRequest}
        onError={onError}
        onSuccess={onSuccess}
      />

      <h3>Size: 300 / ButtonColour: blue / type: round</h3>
      <DirectPayIpg
        size={300}
        type={'round'}
        colour={'blue'}
        PaymentRequest={payRequest}
        onError={onError}
        onSuccess={onSuccess}
      />

      <h3>Size: 250 / ButtonColour: black / type: round</h3>
      <DirectPayIpg
        size={250}
        type={'round'}
        colour={'black'}
        PaymentRequest={payRequest}
        onError={onError}
        onSuccess={onSuccess}
      />
    </div>
  }
}
```

## Properties

| Name   | Type   | Default value | Allow values                 | Description         |
|--------|--------|---------------|------------------------------|---------------------|
| size   | number | 200           | any                          | Button size         |
| type   | string | flat          | flat / round                 | Button border style |
| colour | string | gray          | blue / white / black / gray  | Button colour       |
| PaymentRequest | Object |           | {signature: object, dataString: string, stage: string (allow only: 'DEV' or 'PROD')}   | Generated payment requested included payment details      |

## Events

| Event                               | Description                           | ReturnType                                                               |
| ----------------------------------- | ------------------------------------- | ----------- |
| onSuccess   | The event is called after transaction success or failed                           | JSON
| onError  | The event is called when receive error transaction initiate or transactions processing  | JSON

## Buttons
![dp-ipg-react-button](https://i.ibb.co/BfNzxq8/button-Collection.png)

### Change log
####V1.0.0 - Initial release


## License

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

---
_Source: https://npm.io/package/react-directpay-ipg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._