vue-paystack

library2.0.4jsnpmunverified

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.

payments web-framework

npm install vue-paystack

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PAYSTACK

vue-paystack

paymentsjavascriptv2.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

paystack

✓ import paystack from 'vue-paystack';

✗ const paystack = require('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

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

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

For CDN usage, the library exposes `VuePaystack` globally. The component itself is available via `VuePaystack.default`.

Paystack Component Registration

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

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

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

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>

Debug

Known issues

breakingVersion 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.

affects: >=2.0.1

gotchaThis 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.

affects: >=1.0.0

gotchaThe `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.

affects: >=1.0.0

gotchaThe `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`.

affects: >=1.0.0

Errors

Common errors & fixes

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

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

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

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'"`.

Upgrade

Version history

2.0.4latest on npm

Audit

Dependencies

vuerequiredRequired as a peer dependency for any Vue component library.

Agent activity

28 hits · last 30 days

node

Resources

githubhttps://github.com/iamraphson/vue-paystack ↗

packagehttps://www.npmjs.com/package/vue-paystack ↗