React invoice white label

This is a react component for Plisio payment processing. Checkout docs.

Install

yarn add @plisio/react-invoice
npm install @plisio/react-invoice

Props

| Prop name | Type | Default value | Description | | ----- | ---- | ------------- | ----------- | | preLoading | Boolean | true | Invoice is loading (while data prefetch) | | invoice | Object | {} | Invoice data | | cancelFetch | Function | function () {} | Callback function that discards fetching data interval |

Slots (react-children)

If you are not satisfied with the display of any component, you can redefine it via slots (react-children):

| Slot name | Description | | ----- | ----------- | | iconSprite | Invoice icon sprite. Uses own by default. | | invoiceHeader | Invoice header. Uses own by default. | | invoiceFooter | Invoice footer. Is null by default. | | stepPay | Invoice step-pay. Uses own by default. | | stepPending | Invoice step-pending. Uses own by default. | | stepPending | Invoice step-pending. Uses own by default. | | stepOverpaid | Invoice step-overpaid. Uses own by default. | | stepCompleted | Invoice step-completed. Uses own by default. | | stepUnderpaid | Invoice step-underpaid. Uses own by default. | | stepExpired | Invoice step-expired. Uses own by default. | | stepError | Invoice step-error. Uses own by default. | | stepLoading | Invoice step-loading. Uses own by default. |

Create react white-label Plisio invoice. Css file has been extracted to separate file, so you could include it manually or customize the styles yourself.

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'
import Invoice from '@plisio/react-invoice'
import '@plisio/react-invoice/dist/style.css' // optional
import { getQueryVariable, getResource } from './utils/services'

const App = () => {
  let id = null

  const intervalFetch = useRef(null)
  const [preLoading, setPreLoading] = useState(() => true)
  const [invoice, setInvoice] = useState(() => ({}))

  const fetchData = async () => {
    try {
      const invoice = await getResource('http://localhost:3001/invoice',
        {
          params: {
            page: 'invoice',
            invoice_id: id
          }
        }
      )

      setInvoice((prevInvoice) => invoice || {})
    } catch (error) {
      console.log('Failed to fetch data.', error)
    }
  }

  const cancelFetch = () => {
    clearInterval(intervalFetch.current)
  }

  const init = async () => {
    id = getQueryVariable('invoice_id')

    setPreLoading((prevPreLoading) => true)

    if (!id) {
      setPreLoading((prevPreLoading) => false)
      console.error('No invoice_id param found.')
    } else {
      await fetchData()
      setPreLoading((prevPreLoading) => false)
      intervalFetch.current = setInterval(async () => {
        await fetchData()
      }, 15 * 1000)
    }
  }

  useEffect(() => {
    init()
    return function cleanup () {
      cancelFetch()
    }
  }, [])

  return (
    <Invoice
      preLoading={ preLoading }
      invoice={ invoice }
      cancelFetch={ cancelFetch }
    />
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

You could try out an example app with mock data via dev mode (you`ll need to install json-server additionally):

npm i -g json-server
git clone https://github.com/Plisio/react-invoice.git
cd react-invoice
npm run dev