@spot-flow/vue-spotflow-checkout NPM

Spotflow Checkout Vue.Js

This Spotflow Vue.js library wraps around the inline library, which enables users to make payments seamlessly. It integrates smoothly into your Vue.js application, providing a streamlined checkout experience.

Available Features:

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

Requirements

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

Demo

Alt text

Installation

To install the library, you can use either Yarn or npm. Choose the one that fits your project setup:

Using Yarn

yarn add @spot-flow/vue-spotflow-checkout

Using NPM

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

Usage

payment-component.vue

<template>
 <h1>Payment Component</h1>
 <div>
   <checkout 
     :amount="amount" 
     :currency="currency"
     :email="email" 
     :merchantKey="merchantKey" 
     :encryptionKey="encryptionKey" 
     :planId="planId"
     :localCurrency="localCurrency"
     :callBackUrl="callBackUrl"
     :metadata="{
       productName: 'Product Name'
     }"
   >
     Make Payment
   </checkout>
 </div>
</template>

<script lang="ts">
import checkout from "@spot-flow/vue-spotflow-checkout";
import { defineComponent, ref } from "vue";

export default defineComponent({
 components: {
   checkout,
 },
 data() {
   return {
     amount: 4000, // Not required for subscription payment
     currency: "NGN",
     email: "temi@mailinator.com", 
     merchantKey: "sk_test_fXXXXedhXXXXXXXXXXXXXXXX",
     encryptionKey: "SKKXXXXXXXXXXXXXXXXX", 
     planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034", // Not required for a one time payment
     metadata: {
       productName: "Product Name",
     },
     callBackUrl: "https://website.com",
     localCurrency: "NGN" // Not required if currency is already set to the local currency of the region
   };
 },
});
</script>

Parameters

Read more about our parameters and how they can be used here.

Parameter	Required	Description
merchantKey	True	Your API Secret
reference	False	Your transaction reference. This MUST be unique for every transaction
amount	False	Amount to charge the customer. NB: this most likely comes from the plan details. This is not required for subscription payments.
currency	True	Currency to charge in.
localCurrency	False	This is only required when a payment is being made in USD
encryptionKey	True	This is the encryption key for the merchant. This is required for card payments.
planId	False	This is the plan ID being paid for however, this is not required for one time payments.
firstName	False	This is the Customer's First Name
lastName	False	This is the Customer's Last Name
phone	False	This is the Customer's Phone Number
email	True	This is the Customer's Email Address
metadata	True	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	False	This is the URL the browser redirects to on success of a payment