DEV Community 👩‍💻👨‍💻

Cover image for Accept payments with Paystack in your vue 3 apps
Somto Anunobi
Somto Anunobi

Posted on

Accept payments with Paystack in your vue 3 apps

This post would be my first of both things

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

Installation

You can install the package via the node package manager by running the following command in your terminal.

npm i vue3-paystack
Enter fullscreen mode Exit fullscreen mode

Usage

To use in your app, you import with

import paystack from "vue3-paystack";
Enter fullscreen mode Exit fullscreen mode

component

<paystack
   buttonClass="'button-class btn btn-primary'"
   buttonText="Pay Online"
   :publicKey="publicKey"
   :email="email"
   :amount="amount"
   :reference="reference"
   :onSuccess="onSuccessfulPayment"
   :onCanel="onCancelledPayment">
</paystack>
Enter fullscreen mode Exit fullscreen mode

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)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.