This post would be my first of both things
- First post on Dev.to
- First npm package
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.
Installation
You can install the package via the node package manager by running the following command in your terminal.
npm i vue3-paystack
Usage
To use in your app, you import with
import paystack from "vue3-paystack";
component
<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
|
|
email required
|
StringEmail 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
I'd love the attention
You can contribute, suggest features or just star the project on Github
Top comments (0)