Accept payments with Paystack in your vue 3 apps

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