Not Particularly Meaningful

    @plisio/vue-invoice

    1.0.1 • Public • Published

    Vue invoice white label

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

    Install

    yarn add @plisio/vue-invoice
    npm install @plisio/vue-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

    Slot name Description
    icons-sprite Invoice icon sprite. Uses own sprite by default.
    invoice-header Invoice header. Uses own by default.
    invoice-footer Invoice footer. Is null by default.
    step-pay Invoice step-pay. Uses own by default.
    step-pending Invoice step-pending. Uses own by default.
    step-pending Invoice step-pending. Uses own by default.
    step-overpaid Invoice step-overpaid. Uses own by default.
    step-completed Invoice step-completed. Uses own by default.
    step-underpaid Invoice step-underpaid. Uses own by default.
    step-expired Invoice step-expired. Uses own by default.
    step-error Invoice step-error. Uses own by default.
    step-loading Invoice step-loading. Uses own by default.

    Create vue-app and include Plisio invoice component. Checkout example on Github.

    Css file is extracted to separate file, so you could include it manually or customize the styles yourself.

    Every component inside can be be replaced with a slot, so you can customize any particle of invoice.

    You are free to fetch data yourself, you can add any feautures you want to.

    <template>
      <div class="awesomeApp">
        <Invoice
          :invoice="invoice"
          :preLoading="preLoading"
          @cancelFetch="cancelFetch"
        >
          <h3 slot="invoice-loading" style="text-align: center;">This is an example custom loading-step...</h3>
        </Invoice>
      </div>
    </template>
    
    <script>
    import { getQueryVariable, getResource } from './utils/services'
    import VueInvoice from '@plisio/vue-invoice'
    
    export default {
      name: 'awesomeApp',
    
      components: { Invoice },
    
      data () {
        return {
          id: undefined,
          intervalFetch: null,
          preLoading: true,
          invoice: {}
        }
      },
    
      methods: {
        async fetchData () {
          try {
            const invoice = await getResource('http://localhost:3001/invoice',
              {
                params: {
                  page: 'invoice',
                  invoice_id: this.id
                }
              }
            )
            this.invoice = invoice || {}
          } catch (error) {
            console.log('Failed to fetch data.', error)
          }
        },
        cancelFetch () {
          clearInterval(this.intervalFetch)
        },
        async init () {
          this.id = getQueryVariable('invoice_id')
          this.preLoading = true
    
          if (!this.id) {
            this.preLoading = false
            console.error('No invoice_id param found.')
          } else {
            await this.fetchData()
            this.preLoading = false
            this.intervalFetch = setInterval(async () => {
              await this.fetchData()
            }, 15 * 1000)
          }
        }
      },
    
      created () {
        this.init()
      },
    
      beforeDestroy () {
        this.cancelFetch()
      }
    
    }
    </script>
    
    <style lang="scss" scoped>
      @import "~@plisio/vue-invoice/dist/vue-invoice.css";  // optional
    </style>
    
    

    Install

    npm i @plisio/vue-invoice

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    377 kB

    Total Files

    7

    Last publish

    Collaborators

    • plisio