How to integrate Paystack payment gateway in Nuxtjs application using the nuxt-paystack package

In this article, we'll be looking at how to integrate paystack payment gateway in Nuxtjs application using the Nuxt-paystack package by ECJ222

Nuxt-Paystack

Paystack payment gateway integration for Nuxt.js

Requirements

npm
NuxtJS
NodeJS

Payment gateways enable ease of payment within an application to complete a transaction or service provision.

Let's start by creating a new Nuxtjs project using yarn.

yarn create nuxt-app paystack_in_nuxtjs

Let's serve the application on port 4500 using the command below

yarn dev --port 4500

Let's add the paystack package

 yarn add nuxt-paystack

Add 'nuxt-paystack' to the modules section of your nuxt.config.js file.

{ modules: ['nuxt-paystack'] }

Head over to Paystack to obtain the public key for your account and paste it into the config file

Note: that $paystack is a function which takes in an object as its argument with your paystack details in it, for more information on this you can check here.

Next, add the paystack public key to the env object in nuxt config file

  env: {
    PAYSTACK_KEY: 'pk_test_'
  }

or create an env file

.env

  env: {
    PAYSTACK_KEY: process.env.PAYSTACK_PK
  }

Please Note: for production projects please ensure to ignore the env file or hide credentials from being committed to a Git repository.

Tailwindcss is the framework selected for this application testing.

A simple Tailwindcss checkout page - Tailwind CSS Simple Ecommerce Checkout Page UI Example

Next, Let's create a payment component Payment.vue in the component folder

<template>
  <body>
    ......
              <div class="mt-4">
                <button
                  class="
                    w-full
                    px-6
                    py-2
                    text-blue-200
                    bg-blue-600
                    hover:bg-blue-900
                  "
// on click trigger the payment function 
                  @click="initializePaystack()"
                >
                  Pay Now
                </button>
              </div>
    ......
  </body>
</template>

<script>
export default {
  methods: {
//use the code below in the methods object section to initialize payment
    initializePaystack() {
//access the paystack key from env file
      var paystack_key = process.env.PAYSTACK_KEY;
      this.$paystack({
        key: paystack_key, // Replace with your public key.
        email: "paystack_in_nuxtjs@mail.com",
//amount value is expected in kobo (charge * 100)
        amount: 1000 * 100,
        ref: "" + Math.floor(Math.random() * 100000000000000 + 1),
        currency: "NGN",
        callback: (res) => {
          console.log(res);
        },
        onClose: () => {
          alert("window cosed");
        },
      });
    },
  },
};
</script>

Update the index.vue

<template>
  <payment />
</template>

Next, after saving the changes

Click on the pay now and you'll see the paystack payment pop-up.

Click on the success option and wala!!!!

Here's the tutorial repository

Thank you for reading this article!!!.

If you find this article helpful, please share it with your network and feel free to use the comment section for questions, answers, and contributions.

How to integrate Paystack payment gateway in Nuxtjs application using the nuxt-paystack package

Using paystack payment gateway to accept payment in a Nuxtjs application

Did you find this article valuable?