Vue Paystack Component

Common errors

• [Vue warn]: Unknown custom element: <paystack> - did you register the component correctly?

  cause The `paystack` component was not registered in the `components` option of the parent Vue component or globally.
  fix Ensure `import paystack from 'vue-paystack';` is present and the component is listed in the `components` option: `components: { paystack }`.

• Uncaught ReferenceError: VuePaystack is not defined

  cause When using the CDN version, the `<script>` tag for `vue-paystack` was either not included, or included after the script attempting to use `VuePaystack`.
  fix Ensure the `<script src="https://unpkg.com/vue-paystack/dist/paystack.min.js"></script>` tag is correctly placed in your HTML, preferably after the Vue library script and before your application script.

• Paystack: Public key not supplied

  cause The `paystackkey` prop passed to the `<paystack>` component is either missing, empty, or invalid.
  fix Provide a valid Paystack public key to the `paystackkey` prop, e.g., `:paystackkey="'pk_test_xxxxxxxxxxxxxxxxxxxxxxx'"`.

Warnings

• breaking Version 2.0.1 and 2.0.2 included a 'major upgrade implemented' which could introduce breaking changes not explicitly detailed in the commit messages beyond general dependency updates and refactoring. Users upgrading from pre-2.0.1 versions should thoroughly test their implementations.
  Fix: Review the specific changes in the GitHub commit history around 'major upgrade implemented' and 'remove promise from computed' (v2.0.2) if issues arise. Ensure props like `paystackkey`, `callback`, and `close` are correctly passed as functions or strings.
• gotcha This package is specifically designed for Vue 2.x applications. It does not officially support Vue 3. Attempting to use it in a Vue 3 project will likely lead to compatibility issues and errors.
  Fix: For Vue 3 projects, seek an alternative Paystack integration library or consider migrating the component logic to Vue 3 manually.
• gotcha The `paystackkey` prop must be your Paystack public key. For production deployments, ensure you are using your live public key and not a test key. Exposing sensitive keys directly in client-side code is generally discouraged; consider fetching it from a secure API endpoint.
  Fix: Always use a secure method for managing API keys, such as environment variables (`process.env.VUE_APP_PAYSTACK_PUBLIC_KEY`) during development and fetching from a backend service in production. Double-check that you're using the correct public key (starts with `pk_`) for your environment.
• gotcha The `amount` prop expects the value in kobo (for NGN) or the smallest currency unit for other supported currencies (e.g., cents for USD). Incorrect unit conversion is a common mistake leading to wrong transaction amounts.
  Fix: Always multiply your target currency amount by 100 to convert it to kobo/cents before passing it to the `amount` prop. E.g., for NGN 10,000, set `amount: 10000 * 100 = 1000000`.

Install

• npm install vue-paystack npm
• yarn add vue-paystack yarn
• pnpm add vue-paystack pnpm

Imports

• paystack
  wrong:

  const paystack = require('vue-paystack');

  correct:

  import paystack from 'vue-paystack';

  This is the primary way to import the component for use in a Vue 2.x SFC (Single File Component) with bundlers like Webpack or Vite. Direct `require` for components is less common.
• VuePaystack
  wrong:

  import VuePaystack from 'https://unpkg.com/vue-paystack/dist/paystack.min.js'

  correct:

  <script src="https://unpkg.com/vue-paystack/dist/paystack.min.js"></script> // Then use VuePaystack.default

  For CDN usage, the library exposes `VuePaystack` globally. The component itself is available via `VuePaystack.default`.
• Paystack Component Registration
  wrong:

  Vue.component('paystack', require('vue-paystack'));

  correct:

  components: { paystack } // In a Vue component options object

  The component is typically registered locally within other Vue components via the `components` option, not globally using `Vue.component` unless explicitly desired.

Quickstart

This quickstart demonstrates how to integrate the vue-paystack component into a Vue 2.x Single File Component, passing required props like amount, email, public key, and handling callback functions for payment success and closure.

<template>
    <paystack
        :amount="amount"
        :email="email"
        :paystackkey="paystackkey"
        :reference="reference"
        :callback="callback"
        :close="close"
        :embed="false"
    >
       <button>Make Payment</button>
    </paystack>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import paystack from 'vue-paystack';

export default defineComponent({
    components: {
        paystack
    },
    data() {
        return {
          paystackkey: process.env.VUE_APP_PAYSTACK_PUBLIC_KEY || 'pk_test_xxxxxxxxxxxxxxxxxxxxxxx', // Replace with your actual public key
          email: 'customer@example.com', // Customer email
          amount: 1000000, // Amount in kobo (10,000 NGN)
        };
    },
    computed: {
      reference(): string {
        // Generate a unique reference for each transaction
        return `PAY-${Date.now()}-${Math.floor(Math.random() * 1000000)}`;
      }
    },
    methods: {
      callback(response: any): void {
        console.log('Payment successful:', response);
        alert(`Payment successful! Reference: ${response.reference}`);
        // Verify payment on your backend using response.reference
      },
      close(): void {
          console.log('Payment window closed');
          alert('Payment was closed without completion.');
      }
    }
});
</script>