Vue SDK

Crater Vue SDK is a library of ready-to-use Vue components. These components can help you embed invoicing and bill pay functionality into your Vue based web application with just a few lines of code.

Installation

Step 1: Install the Crater Vue SDK via npm or yarn

The Crater Vue SDK package is available on the NPM and Yarn directories. To install:

npm install @craterapp/vue-sdk

Step 2: Configure CraterSDK instance

import { createApp } from 'vue'
import '@crater/vue-sdk/dist/style.css'
import { craterPlugin } from '@craterapp/vue-sdk'
import App from './App.vue'

const app = createApp(App)

app.use(craterPlugin, {
  apiBaseUrl: 'https://payments.your-domain.com', // We will provide you with the API URL to use
})

app.mount('#app')

Step 3: Set Crater access token

In order to authorise the SDK components to access the Crater API, you need to first generate a business access token from your backend. Once you have the access token, you need to call setToken method to save the access token in the SDK. You can view our Authentication documentation for more information on how to generate a new business access token.

import { authService } from '@crater/vue-sdk'

authService.setToken(`YOUR_ACCESS_TOKEN`)

Step 4: Import Components

Import the components you want to use from the Crater Vue SDK package.

import { InvoiceTable } from '@crater/vue-sdk';

<InvoiceTable />

Step 5: Review implementation

If you followed the above steps correctly, your code should look like this:

  import { onMounted } from 'vue'
  import { InvoiceTable } from '@crater/vue-sdk'

  onMounted(() => {
    generateToken()
  })

  async function generateToken() {
    fetch(`https://your-backend-api.com/access-token`)
      .then((response) => {
        authStore.setToken(response.token)
      })
      .catch((err) => {
        reject(err)
      })
  }
  <templte>
    <InvoiceTable />
  </template>

Step 6: Run the application

npm run start

Theme Config

You can use your own theme colors by updating the following CSS variables inside :root selector.

:root {
    --cr-color-primary-50: 247, 246, 253;
    --cr-color-primary-100: 238, 238, 251;
    --cr-color-primary-200: 213, 212, 245;
    --cr-color-primary-300: 188, 185, 239;
    --cr-color-primary-400: 138, 133, 228;
    --cr-color-primary-500: 88, 81, 216;
    --cr-color-primary-600: 79, 73, 194;
    --cr-color-primary-700: 53, 49, 130;
    --cr-color-primary-800: 40, 36, 97;
    --cr-color-primary-900: 26, 24, 65;
}

Invoice Details

This component renders the interface for displaying an existing invoice. It also allows performing various actions on the invoice such as editing, deleting, and sending it.

Preview

Usage

To view details of an existing invoice, use the InvoiceDetails component with the id prop as shown:

import { InvoiceDetails } from '@crater/vue-sdk';

<InvoiceDetails id="INVOICE_ID" />

Invoice Table

This component displays all invoices created by a business. The component shows each invoice's amount, status, due date, overdue date, and the counterpart to which they were sent.

Preview

Usage

Renders a table of invoices. Use in the InvoiceTable component in your application as shown:

import { InvoiceTable } from '@crater/vue-sdk';

<InvoiceTable/>

Invoice Create

This component serves as an interface for users to input and submit information essential for generating a new invoice. It handles the UI elements & data validation to create invoices within your application.

Preview

Usage

Renders a form for creating a new invoice. Use in the InvoiceCreate component in your application as shown:

import { InvoiceCreate } from '@crater/vue-sdk';

<InvoiceCreate />

Invoice Edit

This component renders a form for editing a pre-existing invoice. It encompasses functionalities tailored to allow users to update specific details of an invoice.

Preview

Usage

Renders a form for editing an existing invoice. Use in the InvoiceEdit component in your application as shown below:

import { InvoiceEdit } from '@crater/vue-sdk';

<InvoiceEdit id="INVOICE_ID" />

Payments Onboarding

This component displays the current onboarding status by default and provides an option to start the onboarding process if it is not completed yet. It is usually used on the dashboard of the application after the user is logged in.

Preview

Usage

Import the BusinessPaymentStatus component and use it in your application as shown below:

import { BusinessPaymentStatus } from '@crater/vue-sdk';

<BusinessPaymentStatus />

Payment Element

This component renders a payment form for paying a single invoice. It supports all the payment methods that are configured in your tenant settings.

Preview

Usage

Import the PaymentElement component and use it in your application as shown below:

  import { PaymentElement } from '@crater/vue-sdk';

  <PaymentElement id="INVOICE_ID" />

Customer Details

This component renders UI to view details of a single customer and allows performing various actions on the customer.

Preview

Usage

Use the CustomerDetails component to view details of an existing customer.

import { CustomerDetails } from '@crater/vue-sdk';

<CustomerDetails id="CUSTOMER_ID" />

Customer Table

This component displays a table of all customers. The component shows each customer's name, email and amount due as well as other required details.

Preview

Usage

Renders a table of customers. Use the CustomerTable component in your application as shown below:

import { CustomerTable } from '@crater/vue-sdk';

<CustomerTable />

Customer Create

This component serves as an interface for users to input and submit information essential for creating a new customer. It handles the UI elements, data validation, and submission of the form.

Preview

Usage

Renders a form for creating a new customer. Use the CustomerCreate component in your application as shown below:

import { CustomerCreate } from '@crater/vue-sdk';

<CustomerCreate />

Customer Edit

This component renders the UI for editing a pre-existing customer. It encompasses functionalities tailored to allow users to update specific details of a customer.

Preview

Usage

Renders a form for editing an existing customer. Use the CustomerEdit component in your application as shown below:

import { CustomerEdit } from '@crater/vue-sdk';

<CustomerEdit id="CUSTOMER_ID" />

Estimate Table

This component displays all estimates created by a business. The component shows each estimate's amount, status, due date, overdue date, and the counterpart to which they were sent.

Preview

Usage

Import the EstimateTable component and use it in your application as shown below:

import { EstimateTable } from '@crater/vue-sdk';

<EstimateTable />

Estimate Details

This component renders the interface for displaying an existing estimate. It also allows performing various actions on the estimate such as editing, deleting, and sending it.

Preview

Usage

Use the EstimateDetails component to view details of an existing estimate.

import { EstimateDetails } from '@crater/vue-sdk';

{' '}

<EstimateDetails id="ESTIAMTE_ID" />

Estimate Create

This component serves as an interface for users to input and submit information essential for generating a new estimate. It handles the UI elements & data validation to create estimates within your application.

Preview

Usage

Import the EstimateCreate component and use it in your application as shown below:

  import { EstimateCreate } from '@crater/vue-sdk';

  <EstimateCreate />

Estimate Edit

This component renders a form for editing a pre-existing estimate. It encompasses functionalities tailored to allow users to update specific details of an estimate.

Preview

Usage

Import the EstimateEdit component and use it in your application as shown below:

<EstimateEdit id="ESTIMATE_ID" />

Integration Settings

This component renders a list of integrations available on the given business. Users can choose to connect any of the given integration partners to automatically sync their data.

Preview

Usage

Import the IntegrationSettings component and use it in your application as shown below:

import { IntegrationSettings } from '@crater/vue-sdk';
<IntegrationSettings  />