@plisio/vue-invoice v1.0.1

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

Slots

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>