Receive payments on a Vue App

This article guides us through the process of initializing Asyncpay checkout and receiving payments on a Vue Application.

Introduction

In this guide, we'll walk through using the Asyncpay SDK to receive payments online on a Vue application.

Before you begin

In order to follow along with this guide, there are a few prerequisites you'll need to have in place:

1. Create a free Asyncpay account which would allow you have the public key required to follow along this guide.

2. Create the payment channels that Asyncpay can route your checkouts through. You can learn more about payment channels and how to create them here.

Set up the Vue Project

The first thing we'll do is to setup an empty Next Project by running the command below in the terminal.

 npm create vue@latest

You can clone the Github repo to get the final working code being described in this guide.

Create a form to collect payments

We'll then write some React code to create a form that will collect the details we'll use to simulate a payment. We'll store this content in the App.vue file.

<script setup>
import { reactive } from 'vue'

const state = reactive({
  firstName: '',
  lastName: '',
  email: '',
  amount: 10
})

const handleCheckout = () => {

}
</script>

<template>
  <section>
    <h1>A Simple Asyncpay Checkout</h1>
    <hr />
    <form @submit.prevent="handleCheckout">
      <div>
        <label for="firstName">First Name</label>
        <input name="firstName" type="text" v-model="state.firstName" />
      </div>
      <div>
        <label for="lastName">Last Name</label>
        <input name="lastName" type="text" v-model="state.lastName" />
      </div>
      <div>
        <label for="email">Email</label>
        <input name="email" type="email" v-model="state.email" />
      </div>
      <div>
        <label for="amount">Amount</label>
        <input type="number" v-model="state.amount" />
      </div>
      <div>
        <button>Pay NGN {{ state.amount }}</button>
      </div>
    </form>
  </section>
</template>

<style scoped>
label {
  display: block;
}
section {
  padding: 30px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Install Asyncpay CheckoutJS

Asyncpay provides a JS SDK that can be used to initiate checkout for Asyncpay. It exports a function that provides Asyncpay's pop-up checkout experience.

npm install @asyncpay/checkout

Once the package has been installed, you can import the checkout function in your project like so:

import {AsyncpayCheckout} from "@asyncpay/checkout"

The AsyncpayCheckout function allows you to initiate Asyncpay's checkout pop-up experience. We can then import this function to our code and initiate the checkout. Our final code on App.vue would look like this:

<script setup>
import { reactive } from 'vue'
import { AsyncpayCheckout } from '@asyncpay/checkout'

const state = reactive({
  firstName: '',
  lastName: '',
  email: '',
  amount: 10
})

const handleCheckout = () => {
  AsyncpayCheckout({
    publicKey: import.meta.env.VITE_APP_PUBLIC_KEY,
    customer: {
      firstName: state.firstName,
      lastName: state.lastName,
      email: state.email
    },
    amount: state.amount,
    onSuccess: () => {
      // Run a function to process the payment
      alert('Payment successful')
    },
    onClose: () => {
      // Run a function whenever the user closes the popup regardless of the payment status
    }
  })
}
</script>

<template>
  <section>
    <h1>A Simple Asyncpay Checkout</h1>
    <hr />
    <form @submit.prevent="handleCheckout">
      <div>
        <label for="firstName">First Name</label>
        <input name="firstName" type="text" v-model="state.firstName" />
      </div>
      <div>
        <label for="lastName">Last Name</label>
        <input name="lastName" type="text" v-model="state.lastName" />
      </div>
      <div>
        <label for="email">Email</label>
        <input name="email" type="email" v-model="state.email" />
      </div>
      <div>
        <label for="amount">Amount</label>
        <input type="number" v-model="state.amount" />
      </div>
      <div>
        <button>Pay NGN {{ state.amount }}</button>
      </div>
    </form>
  </section>
</template>

<style scoped>
label {
  display: block;
}
section {
  padding: 30px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

You can read more about the AsyncpayCheckout function here

In the code above we call the AsyncpayCheckout function when the form is submitted and this fires the Asyncpay checkout pop-up.