Gettting Cannot read property 'chargeCard' of undefined

[chinyart]

Hi i am new to cordova and its development, i am making use of jquery mobile for the UI of the app, so the app is pure cordova not phonegap, i am having an issue with chargeCard function, my app is throwing the error of undefined, even when i test it on my device it doesn't run

Below is:

1. my config.xml
2. my custom.js file where i run all my js code

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>mmmmm</name>
<description>
********************
</description>
<content src="_index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="android-minSdkVersion" value="16" />
<custom-config-file parent="application" target="AndroidManifest.xml">
<meta-data android:name="co.paystack.android.PublicKey" android:value="pk_test_71bbb7d732c9366fba109" />
</custom-config-file>
</platform>
<preference name="Orientation" value="portrait" />
<preference name="SetFullscreen" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="Fullscreen" value="false" />
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeepRunning" value="true" />
<preference name="LoadUrlTimeoutValue" value="10000" />
<preference name="InAppBrowserStorageEnabled" value="true" />
<preference name="ErrorUrl" value="myErrorPage.html" />
<preference name="ShowTitle" value="true" />
<preference name="LogLevel" value="VERBOSE" />
<preference name="AndroidLaunchMode" value="singleTop" />
<preference name="DefaultVolumeStream" value="call" />
<preference name="OverrideUserAgent" value="Mozilla/5.0 My Browser" />
<preference name="AppendUserAgent" value="My Browser" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1000" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<platform name="android">
<preference name="android-minSdkVersion" value="16" />
<custom-config-file parent="application" target="AndroidManifest.xml">
<meta-data android:name="co.paystack.android.PublicKey" android:value="pk_test_71bbb7d732c9366fba109" />
</custom-config-file>
</platform>
<feature name="PaystackPlugin">
<param name="android-package" value="com.arttitude360.cordova.PaystackPlugin" />
</feature>
<plugin name="cordova-plugin-paystack" spec="^3.2.0" />
<engine name="android" spec="^7.1.4" />
</widget>

custom.js

$(window).on('load',function(){
$('.loader-main').addClass('loader-inactive');
});

$(document).ready(function(){
'use strict'

function init_template(){
$("#paymentform").submit(function(e){
e.preventDefault();
// Now safe to use device APIs
console.log(window.PaystackPlugin)
window.PaystackPlugin.chargeCard(
function(resp) {
// charge successful, grab transaction reference - do your thang!
console.log('charge successful: ', resp);
alert("charged:"+resp)
},
function(resp) {
// Something went wrong, oops - perhaps an invalid card.
console.log('charge failed: ', resp);
alert("not charged"+resp)
},
{
cardNumber: '4123450131001381',
expiryMonth: '10',
expiryYear: '17',
cvc: '883',
email: 'chargeIOS@master.dev',
amountInKobo: 150000,
subAccount: 'ACCT_pz61jjjsslnx1d9',
});
})
}
}

i would appreciate your rapid response to my newly raised issue, thank you very much in advance.