{"id":15040,"library":"vue-paystack","title":"Vue Paystack Component","description":"vue-paystack is a Vue 2.x component designed to integrate the Paystack payment gateway into web applications. It provides a `<paystack>` component that wraps the Paystack inline and popup payment experiences, allowing developers to configure payment details such as amount, email, and public key via props, and handle callbacks for success and closure events. The package is currently at version 2.0.4 and appears to have a sporadic release cadence, primarily focusing on maintaining compatibility with Vue 2.x. A key differentiator is its straightforward, declarative integration for Vue 2 projects, abstracting the direct Paystack API calls into a component-based structure. It is specifically designed for Vue 2 applications, with no explicit support for Vue 3.","status":"maintenance","version":"2.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/iamraphson/vue-paystack","tags":["javascript","PayStack","Vue","Vuejs","Vue 2","Payment Gateway"],"install":[{"cmd":"npm install vue-paystack","lang":"bash","label":"npm"},{"cmd":"yarn add vue-paystack","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-paystack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for any Vue component library.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const paystack = require('vue-paystack');","symbol":"paystack","correct":"import paystack from 'vue-paystack';"},{"note":"For CDN usage, the library exposes `VuePaystack` globally. The component itself is available via `VuePaystack.default`.","wrong":"import VuePaystack from 'https://unpkg.com/vue-paystack/dist/paystack.min.js'","symbol":"VuePaystack","correct":"<script src=\"https://unpkg.com/vue-paystack/dist/paystack.min.js\"></script> // Then use VuePaystack.default"},{"note":"The component is typically registered locally within other Vue components via the `components` option, not globally using `Vue.component` unless explicitly desired.","wrong":"Vue.component('paystack', require('vue-paystack'));","symbol":"Paystack Component Registration","correct":"components: { paystack } // In a Vue component options object"}],"quickstart":{"code":"<template>\n    <paystack\n        :amount=\"amount\"\n        :email=\"email\"\n        :paystackkey=\"paystackkey\"\n        :reference=\"reference\"\n        :callback=\"callback\"\n        :close=\"close\"\n        :embed=\"false\"\n    >\n       <button>Make Payment</button>\n    </paystack>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport paystack from 'vue-paystack';\n\nexport default defineComponent({\n    components: {\n        paystack\n    },\n    data() {\n        return {\n          paystackkey: process.env.VUE_APP_PAYSTACK_PUBLIC_KEY || 'pk_test_xxxxxxxxxxxxxxxxxxxxxxx', // Replace with your actual public key\n          email: 'customer@example.com', // Customer email\n          amount: 1000000, // Amount in kobo (10,000 NGN)\n        };\n    },\n    computed: {\n      reference(): string {\n        // Generate a unique reference for each transaction\n        return `PAY-${Date.now()}-${Math.floor(Math.random() * 1000000)}`;\n      }\n    },\n    methods: {\n      callback(response: any): void {\n        console.log('Payment successful:', response);\n        alert(`Payment successful! Reference: ${response.reference}`);\n        // Verify payment on your backend using response.reference\n      },\n      close(): void {\n          console.log('Payment window closed');\n          alert('Payment was closed without completion.');\n      }\n    }\n});\n</script>\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.1"},{"fix":"For Vue 3 projects, seek an alternative Paystack integration library or consider migrating the component logic to Vue 3 manually.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import paystack from 'vue-paystack';` is present and the component is listed in the `components` option: `components: { paystack }`.","cause":"The `paystack` component was not registered in the `components` option of the parent Vue component or globally.","error":"[Vue warn]: Unknown custom element: <paystack> - did you register the component correctly?"},{"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.","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`.","error":"Uncaught ReferenceError: VuePaystack is not defined"},{"fix":"Provide a valid Paystack public key to the `paystackkey` prop, e.g., `:paystackkey=\"'pk_test_xxxxxxxxxxxxxxxxxxxxxxx'\"`.","cause":"The `paystackkey` prop passed to the `<paystack>` component is either missing, empty, or invalid.","error":"Paystack: Public key not supplied"}],"ecosystem":"npm"}