Accessing Cordova plugin from iOS build - ios

Question

I'm adding in-app-purchase functionality for a Framework7/Phonegap app.
Goal: Access the store object referenced in the docs for this plugin:
https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/api.md
What's currently happening: When I run the xcode build on my local device, I get the following error: Uncaught reference error: store is undefined
What I've tried: I built this test app with success. So, I'm quite sure that my protocol for setting up the store is correct. (It's a great tutorial btw, especially if you're working in swift).
https://www.raywenderlich.com/154737/app-purchases-auto-renewable-subscriptions-tutorial
What I expect to happen: When I build the project from Xcode and deploy on my device for debugging, I would like to open the remote debugging console through safari to isolate the plugin to see that it works.
Here is the relevant code from my project. I believe as soon as I can get access to the store object, I will be fine. I have read several SO questions, and no explanation is presented as to why this configuration doesn't work.
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="*bundle id*" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>*appname*</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support#phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<platform name="android">
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<splash height="480" src="www/res/screen/ios/Default~iphone.png" width="320" />
<splash height="960" src="www/res/screen/ios/Default#2x~iphone.png" width="640" />
<splash height="1024" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="2048" src="www/res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="768" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="1536" src="www/res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="1136" src="www/res/screen/ios/Default-568h#2x~iphone.png" width="640" />
<splash height="1334" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
<icon height="114" platform="ios" src="www/res/icon/ios/icon#2x.png" width="114" />
<icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
<icon height="80" platform="ios" src="www/res/icon/ios/icon-40#2x.png" width="80" />
<icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
<icon height="100" platform="ios" src="www/res/icon/ios/icon-50#2x.png" width="100" />
<icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
<icon height="120" platform="ios" src="www/res/icon/ios/icon-60#2x.png" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/icon-60#3x.png" width="180" />
<icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
<icon height="144" platform="ios" src="www/res/icon/ios/icon-72#2x.png" width="144" />
<icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
<icon height="152" platform="ios" src="www/res/icon/ios/icon-76#2x.png" width="152" />
<icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
<icon height="58" platform="ios" src="www/res/icon/ios/icon-small#2x.png" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/icon-small#3x.png" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h#2x~iphone.png" width="640" />
<splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="www/res/screen/ios/Default#2x~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
<icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
<icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
<splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
<splash src="res/screen/windows/splashscreen.png" target="SplashScreen" />
<splash src="res/screen/windows/splashscreenphone.png" target="SplashScreenPhone" />
<icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
<splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
<icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
<icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
<icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
<icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
<icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
<splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<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:*" />
<preference name="SplashScreenDelay" value="10000" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<preference name="SplashScreenDelay" value="10000" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-battery-status" spec="~1.2.4" />
<plugin name="cordova-plugin-camera" spec="~2.4.1" />
<plugin name="cordova-plugin-media-capture" spec="~1.4.3" />
<plugin name="cordova-plugin-device" spec="~1.1.6" />
<plugin name="cordova-plugin-dialogs" spec="~1.3.3" />
<plugin name="cordova-plugin-file" spec="~4.3.3" />
<plugin name="cordova-plugin-geolocation" spec="~2.4.3" />
<plugin name="cordova-plugin-globalization" spec="~1.0.7" />
<plugin name="cordova-plugin-inappbrowser" spec="~1.7.1" />
<plugin name="cordova-plugin-network-information" spec="~1.3.3" />
<plugin name="cordova-plugin-vibration" spec="~2.1.5" />
<plugin name="cordova-plugin-splashscreen" spec="https://github.com/apache/cordova-plugin-splashscreen.git" />
<gap:plugin name="cc.fovea.cordova.purchase" source="npm" />
<engine name="ios" spec="^4.5.4" />
</widget>
app.js:
document.addEventListener('deviceready', initializeStore, false);
function initializeStore() {
// Let's set a pretty high verbosity level, so that we see a lot of stuff
// in the console (reassuring us that something is happening).
store.verbosity = store.INFO;
// We register a dummy product. It's ok, it shouldn't
// prevent the store "ready" event from firing.
store.register({
id: "*myproductid*",
alias: "100 coins",
type: store.CONSUMABLE
});
// When every goes as expected, it's time to celebrate!
// The "ready" event should be welcomed with music and fireworks,
// go ask your boss about it! (just in case)
store.ready(function () {
console.log("\\o/ STORE READY \\o/");
});
// After we've done our setup, we tell the store to do
// it's first refresh. Nothing will happen if we do not call store.refresh()
store.refresh();
}
var $$ = Dom7;
function somethingelse() {
console.log('another test');
}
// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
var app = new Framework7({
id: '*mybundleid*',
root: '#app',
theme: theme,
photoBrowser: {
type: 'standalone',
theme: 'light',
navbar: true,
swiper: {
initialSlide: 0,
spaceBetween: 20,
speed: 300,
loop: false,
preloadImages: true,
navigation: {
nextEl: '.photo-browser-next',
prevEl: '.photo-browser-prev',
},
zoom: {
enabled: true,
maxRatio: 3,
minRatio: 1,
},
lazy: {
enabled: true,
},
},
},
data: function () {
return {
user: {
firstName: 'John',
lastName: 'Doe',
},
};
},
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
}
},
routes: routes,
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
var toastBottomError = app.toast.create({
text: 'There was an error-please check your connection and try again',
closeTimeout: 2000,
cssClass: 'toastError'
});
var toastBottomSuccess = app.toast.create({
text: 'Success!',
closeTimeout: 2000,
cssClass: 'toastSuccess'
});
var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i
});
}
var dynamicPopup = app.popup.create({
content: `<div class="popup">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link popup-close">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a><!--link back-->
</div><!--left-->
<div class="title">Preview</div>
</div><!--navbar-inner sliding-->
</div><!--navbar-->
<div class="block">
<p>Popup created dynamically.</p>
<p>Close me</p>
<img id='preview-image' src=''/>
</div>
</div>`,
on: {
open: function(popup){
console.log('Popup open');
console.log(popup);
},
opened: function(popup) {
console.log('Popup opened');
console.log(popup);
},
}
});
var sheet = app.sheet.create({
content: `
<div id='forced-sign-up-sheet-modal' class="sheet-modal">
<!-- Sheet Modal Toolbar, optional -->
<div class="toolbar">
<div class="toolbar-inner">
<div class="left"></div>
<div class="right">
Done
</div>
</div>
</div>
<!-- Sheet Modal Inner -->
<div class="sheet-modal-inner">
<!-- Sheet Modal content -->
<div class="block">
<p>Integer mollis nulla id nibh elementum finibus...</p>
<button id='clickMe' class='button button-fill color-red'>Click me</button>
</div>
</div>
</div>`,
on: {
open:function(){
console.log('open running...');
},
opened: function(){
console.log(app);
console.log('sup cuh');
app.dialog.confirm('text','title');
}
}
});

Answer 1

Uncaught reference error: store is undefined means one thing only: The plugin is NOT installed properly.
A few things to check here:
Have you installed the plugin using cordova plugin add
cc.fovea.cordova.purchase?
Did the plugin install without warnings or errors?
Have you run cordova build ios after adding the plugin and this worked without errors?
Have you closed Xcode before using the previous cordova commands?

Answer 2

Sadly, the answer was to simply update the plugins that came with the template. There were NO error messages that pointed to this being the cause for the deviceready event not firing. Eventually I safari-ed through enough SO articles to find this answer. For a newbie like me, I would be expecting some sort of flag that the outdated plugins were causing the issue.