Added API Tracker

Author: Toyeeb

dev/serve.js

@@ -1,8 +1,13 @@
 import Vue from 'vue';
 import Dev from './serve.vue';
+import Flutterwave from "../src/entry";
 
 Vue.config.productionTip = false;
 
+Vue.use(Flutterwave, { publicKey: 'FLWPUBK_TEST-0b04581c8d73fd08d5c720e1e0f803b4-X' } )
+
+
+
 new Vue({
   render: (h) => h(Dev),
 }).$mount('#app');

dev/serve.vue

@@ -6,12 +6,52 @@ export default Vue.extend({
   name: 'ServeDev',
   components: {
     FlutterwavePayButton,
+  },
+  data(){
+    return {
+      paymentData: {
+        tx_ref: this.generateReference(),
+        amount: 10,
+        currency: 'NGN',
+        payment_options: '',
+        redirect_url: '',
+        meta: {
+          'counsumer_id': '7898',
+          'consumer_mac': 'kjs9s8ss7dd'
+        },
+        customer: {
+          name: 'Demo Customer  Name',
+          email: 'customer@mail.com',
+          phone_number: '0818450***44'
+        } ,
+        customizations: {
+          title: 'Customization Title',
+          description: 'Customization Description',
+          logo: 'https://flutterwave.com/images/logo-colored.svg'
+        },
+        callback: this.makePaymentCallback,
+        onclose: this.closedPaymentModal
+      }
+    }
+  } ,
+  methods: {
+    makePaymentCallback(response) {
+      console.log("Pay", response)
+    },
+    closedPaymentModal() {
+      console.log('payment is closed');
+    },
+    generateReference(){
+      let date = new Date()
+      return date.getTime().toString();
+    }
   }
 });
 </script>
 
+
 <template>
-  <div id="app">
-    <flutterwave-pay-button> Test </flutterwave-pay-button>
+  <div>
+    <flutterwave-pay-button   v-bind="paymentData" > Click To Pay </flutterwave-pay-button>
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flutterwave-vue-v3",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "description": "Flutterwave official Vue library to accept payment via Card , USSD, QrCode etc.",
   "author": "Flutterwave",

src/api_tracker.js

@@ -0,0 +1,75 @@
+export class ApiTracker {
+
+   static  trackingEndPoint = 'https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent';
+
+    static  packageVersion = '1.0.2';
+    static  language = 'Vue V3'
+
+  /*  static  trackingFeatures = {
+
+        'initiateCardCharge': 'Initiate-Card-charge',
+        'initiateCardChargeError': 'Initiate-Card-charge-error',
+        'validateCardCharge': 'Validate-Card-charge',
+        'validateCardChargeError': 'Validate-Card-charge-error',
+        'verifyCardCharge': 'Verify-Card-charge',
+        'verifyCardChargeError': 'Verify-Card-charge-error',
+        'initiateAccountCharge': 'Initiate-Account-charge',
+        'initiateAccountChargeError': 'Initiate-Account-charge-error',
+        'accountChargeValidate': 'Account-charge-validate',
+        'accountChargeValidateError': 'Account-charge-validate-error',
+        'accountChargeVerify': 'Account-charge-verify',
+        'accountChargeVerifyError': 'Account-charge-verify-error',
+
+    }*/
+
+
+    constructor() {
+    }
+/* {
+    paymentData: object | any
+,
+    response: object | any
+    responseTime: string
+}*/
+
+  static  track(data) {
+
+        const trackingData = {
+            publicKey: data.paymentData.public_key,
+            language: this.language,
+            version: this.packageVersion,
+            title: '',
+            message: '0' // data.responseTime
+
+        }
+
+      const paymentOptions = data.paymentData.payment_options || ''
+      const paymentOptionsArray = paymentOptions ?  paymentOptions.split(',') : []
+
+      let title = ''
+
+      if (paymentOptionsArray.length === 0) {
+          title = 'Initiate-Charge-Dashboard'
+      } else if (paymentOptionsArray.length === 1) {
+          title = 'Initiate-Charge-' + paymentOptions
+
+      } else {
+          title = 'Initiate-Charge-Multiple'
+
+      }
+
+      trackingData.title = data.response.status === 'successful' ? title : title + '-error'
+
+
+        this.submitTracking(trackingData)
+
+    }
+
+    static submitTracking(trackingData) {
+        fetch(this.trackingEndPoint, {
+            method: 'POST',
+            body: JSON.stringify(trackingData)
+        }).then((res) => {
+        })
+    }
+}

src/entry.js

@@ -1,51 +1,67 @@
 // Import vue components
 import * as components from '@/lib-components/index';
+import {ApiTracker} from "./api_tracker";
 
 // install function executed by Vue.use()
-const install = function installFlutterwaveVueV3(Vue, { publicKey = ''}) {
-  if (install.installed) return;
-  install.installed = true;
-  Object.entries(components).forEach(([componentName, component]) => {
-    Vue.component(componentName, component);
-  });
-  Vue.mixin({
-    mounted() {
-      const inlineSdk = "https://checkout.flutterwave.com/v3.js";
-      const script = document.createElement('script')
-      script.src = inlineSdk;
-      if (!document.querySelector(`[src="${inlineSdk}"]`)) {
-        document.body.appendChild(script)
-      }
-    },
-    methods: {
-      payWithFlutterwave(paymentParams) {
-        window.FlutterwaveCheckout({
-          ...paymentParams,
-          public_key: paymentParams.public_key || publicKey,
-        })
-      },
-    }
-  })
+const install = function installFlutterwaveVueV3(Vue, {publicKey = ''}) {
+    if (install.installed) return;
+    install.installed = true;
+    Object.entries(components).forEach(([componentName, component]) => {
+        Vue.component(componentName, component);
+    });
+    Vue.mixin({
+        mounted() {
+            const inlineSdk = "https://checkout.flutterwave.com/v3.js";
+            const script = document.createElement('script')
+            script.src = inlineSdk;
+            if (!document.querySelector(`[src="${inlineSdk}"]`)) {
+                document.body.appendChild(script)
+            }
+        },
+        methods: {
+            payWithFlutterwave(paymentParams) {
+
+                let payData = {
+                    ...paymentParams,
+                    public_key: paymentParams.public_key || publicKey,
+                    callback: (response) => {
+
+                        ApiTracker.track(
+                            {
+                                paymentData: payData,
+                                response: response,
+                                responseTime: 1000
+                            })
+
+                        paymentParams.callback(response)
+                    }
+                }
+
+
+                window.FlutterwaveCheckout(payData)
+            },
+        }
+    })
 };
 
 // Create module definition for Vue.use()
 const Flutterwave = {
-  install,
+    install,
 };
 
 // To auto-install on non-es builds, when vue is found
 // eslint-disable-next-line no-redeclare
 /* global window, global */
 if ('false' === process.env.ES_BUILD) {
-  let GlobalVue = null;
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue;
-  }
-  if (GlobalVue) {
-    GlobalVue.use(Flutterwave);
-  }
+    let GlobalVue = null;
+    if (typeof window !== 'undefined') {
+        GlobalVue = window.Vue;
+    } else if (typeof global !== 'undefined') {
+        GlobalVue = global.Vue;
+    }
+    if (GlobalVue) {
+        GlobalVue.use(Flutterwave);
+    }
 }
 // Default export is library as a whole, registered via Vue.use()
 export default Flutterwave;