Use intasend-sdk version 3.0.3

Author: Felix Cheruiyot

package.json

@@ -2,25 +2,11 @@
   "name": "intasend-react-example",
   "version": "0.1.0",
   "private": true,
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ],
-    "plugins": [
-      [
-        "@babel/plugin-proposal-class-properties",
-        {
-          "loose": true
-        }
-      ]
-    ]
-  },
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "intasend-inlinejs-sdk": "2.0.8",
+    "intasend-inlinejs-sdk": "^3.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -50,8 +36,5 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "babel-plugin-transform-class-properties": "^6.24.1"
-  }
+  "devDependencies": {}
 }

src/App.js

@@ -1,52 +1,21 @@
-// import logo from './logo.svg';
 import './App.css';
 import IntaSend from "intasend-inlinejs-sdk";
-import { useCallback, useEffect } from 'react';
 
 function App() {
+  // Replace with your public key
   const PUBLIC_KEY = "ISPubKey_test_91ffc81a-8ac4-419e-8008-7091caa8d73f";
 
-    let instance = IntaSend.setup({
+    let instance = new IntaSend({
       publicAPIKey: PUBLIC_KEY,
       live: false // Set to true when going live
     });
 
     const handleClick = () => {
       instance
-        .run({ amount: 10, currency: "KES", api_ref: "<ORDER-NUMBER-OR-USER-ID>" })
+        .run({ amount: 10, currency: "KES", api_ref: "ORDER-NUMBER-OR-USER-ID" })
+        .on("COMPLETE", (response)=>{console.log("COMPLETE:", response)})
+        .on("FAILED", (response)=>{console.log("FAILED:", response)})
     }
-
-    // Listen for events
-    const bindEvent =useCallback((element, eventName, eventHandler) => {
-        if (element.addEventListener) {
-            element.addEventListener(eventName, eventHandler, false);
-        } else if (element.attachEvent) {
-            element.attachEvent('on' + eventName, eventHandler);
-        }
-    }, []);
-
-    const handleMessageEvent = useCallback((e) =>{
-      const res = e.data.message
-      if (res) {
-          if (res.identitier === 'intasend-status-update-cdrtl') {
-              if (res.state === "COMPLETE") {
-                  // Do something on pay success
-                  alert("Complete:"+JSON.stringify(res))
-              }
-          }
-      }
-    }, []);
-    useEffect(() => {
-      bindEvent(window, 'message', handleMessageEvent);
-            return () => {
-                if (window.addEventListener) {
-                      window.removeEventListener('message', handleMessageEvent);
-                } else if (window.attachEvent) {
-                      window.detachEvent('onmessage', handleMessageEvent);
-                }
-            }
-      }, [bindEvent, handleMessageEvent]);
-
   return (
 
     <div className="App">