Accept payments with Paystack in your vue 3 apps
Tags: paystack, vue, payments
Published: 2021-10-29 22:58:35

This post would be my first of both things
* First post on [Dev.to](https://dev.to)
* First [npm package] (https://www.npmjs.com/package/vue3-paystack)

Paystack is an online payment processor for Africans, so if you are reading this. You are most likely familiar with Vue and want to accept payments in your Vue app.
This post is not an exhaustive guide on how to use Paystack, a more detailed guide is here.

If you happen to be using Vue 2, there is an existing plugin here
While working on a Vue 3 app, I had many unsuccessful attempts to use the plugin intended for Vue 2. I quickly realized that I needed to write my solution to integrate Paystack into my app. 

In the spirit of sharing, I decided to host the solution on npm for anyone who might run into the same issues and contributors.

![Vue 3 paystack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz2k6g9rc437d66hoxk4.png)

##Installation
You can install the package via the node package manager by running the following command in your terminal. 
```javascript
npm i vue3-paystack
```
##Usage
To use in your app, you import with
```javascript
import paystack from "vue3-paystack";
```

###component
```javascript
<paystack
   buttonClass="'button-class btn btn-primary'"
   buttonText="Pay Online"
   :publicKey="publicKey"
   :email="email"
   :amount="amount"
   :reference="reference"
   :onSuccess="onSuccessfulPayment"
   :onCanel="onCancelledPayment">
</paystack>
```
##Some useful props

| Name | Type & Description | Default                                                                 |
| ------- | ---------- | --- |
| `buttonClass` | `String` CSS class names for the button, to style the component | `""`                                                                    |
| `buttonText` | `String` Displayed text for the button                                | `"Pay Now"`                                                             |
| `publicKey` *required* | `String`  Public key from your [Paystack developer dashboard](https://dashboard.paystack.com)   |                                                                         |
| `email` *required*     | `String`Email of user making payment                                                        |                                                                         |
| `amount` *required*    | `Number` in lowest denomition, so payment is `500 Naira`, the amount pass should be `500*100 = 5000`                                                                      |
| `reference` *required* | `String` a randomly generated code, made up of characters and numbers |                                                                         |
| `currency`  *required*  | `String` International payments are supported  | `"NGN"`                                                                 |
| `onSuccess` | `Function` Function that gets called when the transaction is successful                                                              | `function() { console.log(response); }`                                 |
| `onCancel`             |`Function` Function that gets called when the transaction is cancelled                                                              | `function() { console.log("payment closed"); }`                         |
| `channels`             | `Array` Sets up the payment channels                                                              | `function() { return ["card", "bank", "ussd", "qr", "mobile_money"]; }` |

The component is fully stylable, hence the need to pass in the text and the CSS classes via props for the component to inherit.

This is not an official plugin from paystack, but rather my own solution, you can read more about this plugin [here](https://vue3paystack.netlify.app/)

##I'd love the attention
You can contribute, suggest features or just star the project on [Github](https://github.com/somteacodes/vue3-paystack)