# paystack-vue

> A vue 3 component for integrating the paystack payment gateway

Latest version **1.0.0-beta** (published 2022-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install paystack-vue
pnpm add paystack-vue
yarn add paystack-vue
bun add paystack-vue
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta |
| Published | 2022-06-29 |
| First published | 2022-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 231.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Utitofon Samuel |
| Maintainers | utsam |

## Links

- npm: https://www.npmjs.com/package/paystack-vue
- npm.io page: https://npm.io/package/paystack-vue

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.37
- [pinia](https://npm.io/package/pinia.md) ^2.0.14
- [vue-router](https://npm.io/package/vue-router.md) ^4.0.16

## Recent versions

- 1.0.0-beta (latest) — 2022-06-29

## README

# VUE 3 Paystack Plugin

A vue 3 component for integrating the paystack payment gateway

![Preview Image](paystack-modal.png?raw=true "Preview Image")

## Features

- [💚 Vue 3](https://v3.vuejsjs.org)

- ⚡️ Vite - Instant HMR

- 🔥 The `<script setup>` syntax

- 🦾 TypeScript, of course

## Installation

### NPM

```bash
npm install paystack-vue
```

## USAGE

#### main.ts

```javascript
    import { createApp } from 'vue'

    import App from './App.vue'
    import PayStack from 'paystack-vue'
    const paystackKey = "pk_test_27c1ac1537f006ecefc74402138941790c586e67"

    const app = createApp(App)

    app.use(PayStack, {key: paystackKey})

    app.mount('#app')
```

#### App.vue(or any component)

```vue
    <script setup lang="ts">
    const callback = (response) => {
    alert(`Ref: ${response.reference}, status: ${response.status}`)
    }
    const onClose = () => {
    alert("Payment modal closed")
    }
    </script>
    <template>
        <header>

            <div class="wrapper">
                <PayStack
                    :embedInModal="false"
                    :amount="200"
                    :callback="callback"
                    :onClose="onClose"
                    email="eve@mail.com"
                    firstName="firstname"
                    lastName="lastname"
                    paymentButtonClass="payment-button"
                />
            </div>
        </header>
    </template>
    <style>
    .payment-button{
        width: 100%;
        background-color: green;
        border-radius: 10px
    }
    </style>

```

[Example configuration file for npm global usage](example/App.vue)

For more options checkout the [paystack documentation](https://paystack.com/docs/payments/accept-payments#popup)

## Deployment
Keys used in this plugin are test keys only. Do well to change them to production ready keys.

## Contributing

1. Fork the repository
2. Create your feature branch: `git checkout -b feature-name`
3. Commit your changes: `git commit -am 'Some commit message'`
4. Push to the branch: `git push origin feature-name`
5. Submit a pull request

You can reach me on twitter at [Utitofon Udoekong](https://twitter.com/UtitofonUdoeko1)

Dont forget to leave a star if you found this useful.

Special shout out to [@iamraphson](https://github.com/iamraphson)

---
_Source: https://npm.io/package/paystack-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._