Accept Payments on your Vue App

Introduction

We're going to use our public keys for this demo. To get your public key, login into your Paystack dashboard and click on the Settings tab, and then click on API Keys & Webhooks.

You'll notice you have two public keys: Test and Live. While building your app, it's a good idea to use your test keys, as this will allow you to simulate transactions. Once your app is production-ready, you can switch over to your live keys.

Project Setup

If you’re already familiar with Vue, then this section would be pretty familiar to you and you can skip to the next section, Installing Paystack. If not, VueJS is a Javascript library used for building frontend applications. NPM and Yarn are popular installation methods when building large scale applications with Vue.

1npm install -g @vue/cli
2# OR
3yarn global add @vue/cli

Once it’s installed, navigate to your desired folder and create a new Vue project;

1vue create project_name

The terminal would show you a couple of preset configurations, as a beginner, it’s recommended to choose the default. This would create a sample project project_name in the current directory. For the purpose of this guide, I’ll be creating a simple charity form to collect a user name, email address, and accepts payment from donors.

Here’s my App.vue snippet:

1<template>
2  <div id="app">
3    <section>
4      <h1>Lorem Ipsum Dolor Sit Amet</h1>
5      <div class="formcontainer">
6        <hr />
7      <div class="container">
8        <label for="uname">
9          <strong>Full Name</strong>
10        </label>
11        <input v-model="full_name" required type="text" placeholder="John Doe" name="uname" />
12        <label for="email">
13          <strong>Email Address</strong>
14        </label>
15        <input v-model="email" required type="text" placeholder="customer@email.com" name="email" />
16        <label for="amount">
17          <strong>Amount</strong>
18        </label>
19            <input v-model="amount" type="tel" placeholder="1000" name="amount" required />
20        </div>
21      </div>
22    </section>
23    <img style="max-width:200px;" alt="Vue logo" src="./assets/pstk.png" />
24  </div>
25</template>
26<script>
27    export default {
28    name: "App",
29    components: {},
30    data: () => {
31    return {
32        amount: 0,
33    full_name: '',
34    email: '',
35    };
36    }
37};
38</script>

Install Paystack

Now to add the Paystack Vue package, this package contains the Paystack Inline JS library and the checkout as a single component. To add this plugin to your vue project;

1npm install vue-paystack --save

Once it's installed, import the library into your App.vue file like this

1<script>
2import paystack from 'vue-paystack';
3
4export default {
5  name: "App",
6  components: {
7    paystack
8  },
9  data: () => {
10    return {
11      amount: null,
12      full_name: null,
13      email:null
14    };
15  }
16};
17</script>

Now the component is ready for you to use in the payment form.

Accept Payments

Now let's add the component to the form. The Paystack component has 5 required props:

1. amount - The amount we're charging the customer
2. email - All transactions on Paystack require a customer's email address
3. paystackkey - Remember, public keys for client-side code always
4. callback - A function that will run after a successful transaction is completed
5. close - A function that will run when the customer closes the Paystack Checkout

1<paystack
2    :amount="amount * 100"
3    :email="email"
4    :paystackkey="PUBLIC_KEY"
5    :reference="reference"
6    :callback="processPayment"
7    :close="close"
8  >
9    Make Payment
10 </paystack>

The unique reference field is auto generated, and the email and amount fields are collected from the user's input. Here are the callback methods:

1. . . 
2
3computed: {
4   reference() {
5      let text = "";
6      let possible =
7        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
8
9      for (let i = 0; i < 10; i++)
10        text += possible.charAt(Math.floor(Math.random() * possible.length));
11
12      return text;
13    }
14  },
15  methods: {
16    processPayment: () => {
17      window.alert("Payment recieved")
18    },
19    close: () => {
20     console.log("You closed checkout page")
21    }
22  },
23
24. . .

There you have it, our payment integration is now complete. The full code sample is in this repository and you can check out the live demo.

We also have another sample sneakers store built in Vue, here's the repository and live demo.