Skip to main content

​
Features

  • Collections: Card, Bank Transfers, USSD.
  • Recurring payments: Recurring payments: Tokenization and Subscriptions.

​
Requirements

  • Spoflow Encryption keys
  • Spotflow API keys
  • Node versions >= 16.x.x npm >=7.x.x

​
Installation

  • npm
  • yarn
npm install @spot-flow/vue-spotflow-checkout

​
Usage

​
Using Composable

in payment-component.vue 
  <script setup>
   import { useSpotflowPayment } from '@spot-flow/vue-spotflow-checkout'

   const loadSpotflow = useSpotflowPayment()

   const handlePayment = async () => {
     const config = {
       amount: 4000, // Not required for subscription payment
       currency: "NGN",
       email: "temi@mailinator.com", // Email of customer
       name: "John", // Name of customer: Not required
       phoneNumber: "09090909090", // Phone number of customer: Not required
       reference: "MC-123456", // Not required, a unique payment reference will be generated if not provided
       merchantKey: "pk_test_fXXXXedhXXXXXXXXXXXXXXXX",
       planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034", // Not required for a one time payment
       encryptionKey:"SKKXXXXXXXXXXXXXXXXX"
     }
       await loadSpotflow(config)
   }
 </script>

 <template>
   <div>
   <button @click="handlePayment">
     Make Payment
   </button>
   </div>
 </template>

​
Using SpotflowButton Component in Vue 3

 <script setup lang="ts">

import { SpotflowButton } from "@spot-flow/vue-spotflow-checkout";
import { defineComponent, ref } from "vue";

const config = {
 amount: 4000, // Not required for subscription payment
 currency: "NGN",
 email: "temi@mailinator.com", // Email of customer
 name: "John", // Name of customer: Not required
 phoneNumber: "09090909090", // Phone number of customer: Not required
 reference: "MC-123456", // Not required, a unique payment reference will be generated if not provided
 merchantKey: "pk_test_fXXXXedhXXXXXXXXXXXXXXXX",
 planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034", // Not required for a one time payment
 encryptionKey:"SKKXXXXXXXXXXXXXXXXX"
};
</script> 

<template>
 <h1>Payment Component</h1>
 <div>
   <!-- Just need to click the button -->
   <SpotflowButton :config="config">
      Pay Now
   </SpotflowButton>

 </div>
</template>

​
Parameters

​
merchantKey
string
required
Your API Public Key
​
reference
string
Your transaction reference. This MUST be unique for every transaction
​
amount
string
Amount to charge the customer. NB: For subscription payments, amount comes from the plan details. This is not required for subscription payments.
​
currency
string
required
Currency to charge in.
​
localCurrency
string
This is only required when a payment is being made in USD
​
encryptionKey
string
required
This is the encryption key for the merchant. This is required for card payments.
​
planId
string
This is the plan ID being paid for however, this is not required for one time payments.
​
name
string
This is the Customer’s Name
​
phoneNumber
string
This is the Customer’s Phone Number
​
email
string
required
This is the Customer’s Email Address
​
metadata
string
required
This contains other information about the product such as the product name and other additional properties. Product Name should not be passed if planId is being passed
​
callBackUrl
string
This is the URL the browser redirects to on success of a payment
Need more information check out our documentation