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>