Accept payments with Paystack in your vue 3 apps

Somto Anunobi — Fri, 29 Oct 2021 22:58:35 +0000

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

I'd love the attention