vue-squadpay v1.0.1

GTCO Squad Payment Vue3 Library

Squad Payment is a comprehensive payments solution powered by GTCO that enables all types of businesses to make and receive payments from anywhere in the world.

Note: Before you proceed, signup for a Sandbox account at Squad Sandbox platform to obtain necessary public and private keys.

Payment Modal

Installation

To install, run:

npm install vue-squadpay 

Usage

Template

 <template>
    <SquadPay text="Pay now" :params="params" class="btn btn-primary" @err="onError" @close="onClose" @success="onSuccess" @loaded="onLoad" />
</template>

Script for Composition API

<script setup lang="js">
import SquadPay from "vue-squadpay"
import {ref} from 'vue'

const params = ref({
    key: "test_pk_sample-public-key-1",
    email: "example@mail.com", // from HTML form
    amount: 5000, // no need to multiply by 100 for kobo, its taken care for you
    currencyCode: "NGN",
    reference: Date.now().toString(),
  })

  const onSuccess = (data) => {
    console.log(data)
  }

  const onLoad = () => {
    console.log("module loaded")
  }

  const onError = () => {
    console.log("Error occured")
  }

   const onClose = () => {
    console.log("Widget Closed")
  }
</script>

Script for Composition API with Typescript

<script setup lang="ts">
import SquadPay, { SquadParams} from "vue-squadpay"
import {ref} from 'vue'

const params = ref<SquadParams>({
    key: "test_pk_sample-public-key-1",
    email: "example@mail.com", // from HTML form
    amount: 5000, // no need to multiply by 100 for kobo, its taken care for you
    currencyCode: "NGN",
    reference: Date.now().toString(),
  })

  const onSuccess = (data): void => {
    console.log(data)
  }

  const onLoad = (): void => {
    console.log("module loaded")
  }

  const onError = (): void => {
    console.log("Error occured")
  }

   const onClose = (): void => {
    console.log("Widget Closed")
  }
</script>

Script for Options

<script >
import SquadPay from "vue-squadpay"
export default {
  components: {
    SquadPay
  },
  data(){
    return {
      params:{
          key: "test_pk_sample-public-key-1",
          email: "example@mail.com", // from HTML form
          amount: 5000, // no need to multiply by 100 for kobo, its taken care for you
          currencyCode: "NGN",
          reference: Date.now().toString(),
      }
    }
  },
  methods: {
    onSuccess(data){
      console.log(data)
    }

    onLoad(){
      console.log("module loaded")
    }

    onError(){
      console.log("Error occured")
    }

    onClose(){
      console.log("Widget Closed")
    }
  }
}
</script>

Note:

• amount should be the actual amount, that is, if payment is N1,000 enter N1000 as the amount. conversion to kobo is automatically handled.
• There is an error notifier alert included

Parameters

Below is a list of all the SquadPay official supported parameters.

Response Sample

After a transaction, a sample response from the onSuccess function will be:

{
    "Customer_name": null,
    "access_token": undefined,
    "amount": 100000,
    "auth_url": undefined,
    "callback_url": null,
    "config_meta": {
        "browser_screen_height": 948,
        "browser_screen_width": 1307
    },
    "currency_code": "NGN",
    "email": "example@mail.com",
    "formattedTransactionAmount": "1,000.00",
    "is_recurring": false,
    "key": "test_pk_sample-public-key-1",
    "merchant_id": undefined,
    "merchant_logo": undefined,
    "metadata": null,
    "pass_charge": false,
    "payment_channels": null,
    "recurring": {
        "type": 0
    },
    "transaction_amount": 100000,
    "transaction_ref": null
}

SquadPay component props and Events

Below are list of the props of the <SquadPay /> component.

Go Live

to go live refer to the Squad API documentation section for live payment

You can check out Squad Documentation for other guides and options.

For Contributions

1. Fork the repo
2. Create a branch for the new feature or suggestion: git branch feature-name
3. Checkout to feature branch: git checkout feature-name
4. Commit your changes: git commit -m "commit-type: commit-message". Please specify a commit type
5. Push to the feature branch: git push origin feature-name
6. Submit a pull request

Thanks!

Samuel Henshaw

License

The MIT License (MIT). Please see License File for more information.