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>