Nefarious Plastic Mannequins

    @plisio/react-invoice

    1.0.2 • Public • Published

    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
    

    Install

    npm i @plisio/react-invoice

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    56.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • plisio