#DirectPay ipg - React Plugin

Version 1.0.0

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

Install

npm install --save react-directpay-ipg

Usage

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

Change log

####V1.0.0 - Initial release

License

MIT © nimeshc64