diff --git a/distribution/paystack.min.js b/distribution/paystack.min.js
index 969bdb4..fbf0f71 100644
--- a/distribution/paystack.min.js
+++ b/distribution/paystack.min.js
@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-	value: true
+  value: true
 });
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
@@ -23,105 +23,109 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var PayStack = function (_Component) {
-	_inherits(PayStack, _Component);
-
-	function PayStack(props) {
-		_classCallCheck(this, PayStack);
-
-		var _this = _possibleConstructorReturn(this, (PayStack.__proto__ || Object.getPrototypeOf(PayStack)).call(this, props));
-
-		_this.payWithPaystack = function () {
-			var paystackOptions = {
-				key: _this.props.paystackkey,
-				email: _this.props.email,
-				amount: _this.props.amount,
-				ref: _this.props.reference,
-				metadata: _this.state.metadata,
-				callback: function callback(response) {
-					_this.props.callback(response);
-				},
-				onClose: function onClose() {
-					_this.props.close();
-				},
-				currency: _this.state.currency,
-				plan: _this.state.plan,
-				quantity: _this.state.quantity,
-				subaccount: _this.state.subaccount,
-				transaction_charge: _this.state.transaction_charge,
-				bearer: _this.state.bearer
-			};
-			if (_this.props.embed) {
-				paystackOptions.container = "paystackEmbedContainer";
-			}
-			var handler = window.PaystackPop.setup(paystackOptions);
-			if (!_this.props.embed) {
-				handler.openIframe();
-			}
-		};
-
-		_this.state = {
-			text: _this.props.text || "Make Payment",
-			class: _this.props.class || _this.props.className || "",
-			metadata: _this.props.metadata || {},
-			currency: _this.props.currency || "NGN",
-			plan: _this.props.plan || "",
-			quantity: _this.props.quantity || "",
-			subaccount: _this.props.subaccount || "",
-			transaction_charge: _this.props.transaction_charge || 0,
-			bearer: _this.props.bearer || "",
-			disabled: _this.props.disabled || false
-		};
-		return _this;
-	}
-
-	_createClass(PayStack, [{
-		key: 'componentDidMount',
-		value: function componentDidMount() {
-			if (this.props.embed) {
-				this.payWithPaystack();
-			}
-		}
-	}, {
-		key: 'render',
-		value: function render() {
-			return this.props.embed ? _react2.default.createElement('div', { id: 'paystackEmbedContainer' }) : _react2.default.createElement(
-				'span',
-				null,
-				_react2.default.createElement(
-					'button',
-					{
-						type: 'button',
-						className: this.state.class,
-						onClick: this.payWithPaystack,
-						disabled: this.state.disabled
-					},
-					this.state.text
-				)
-			);
-		}
-	}]);
-
-	return PayStack;
+  _inherits(PayStack, _Component);
+
+  function PayStack(props) {
+    _classCallCheck(this, PayStack);
+
+    var _this = _possibleConstructorReturn(this, (PayStack.__proto__ || Object.getPrototypeOf(PayStack)).call(this, props));
+
+    _this.state = {
+      text: _this.props.text || "Make Payment",
+      class: _this.props.class || _this.props.className || "",
+      metadata: _this.props.metadata || {},
+      currency: _this.props.currency || "NGN",
+      plan: _this.props.plan || "",
+      quantity: _this.props.quantity || "",
+      subaccount: _this.props.subaccount || "",
+      transaction_charge: _this.props.transaction_charge || 0,
+      bearer: _this.props.bearer || "",
+      disabled: _this.props.disabled || false
+    };
+    return _this;
+  }
+
+  _createClass(PayStack, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.embed) {
+        this.payWithPaystack();
+      }
+    }
+  }, {
+    key: "payWithPaystack",
+    value: function payWithPaystack(e) {
+      var _this2 = this;
+
+      e.preventDefault();
+      var paystackOptions = {
+        key: this.props.paystackkey,
+        email: this.props.email,
+        amount: this.props.amount,
+        ref: this.props.reference,
+        metadata: this.state.metadata,
+        callback: function callback(response) {
+          _this2.props.callback(response);
+        },
+        onClose: function onClose() {
+          _this2.props.close();
+        },
+        currency: this.state.currency,
+        plan: this.state.plan,
+        quantity: this.state.quantity,
+        subaccount: this.state.subaccount,
+        transaction_charge: this.state.transaction_charge,
+        bearer: this.state.bearer
+      };
+      if (this.props.embed) {
+        paystackOptions.container = "paystackEmbedContainer";
+      }
+      var handler = window.PaystackPop.setup(paystackOptions);
+      if (!this.props.embed) {
+        handler.openIframe();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.embed ? _react2.default.createElement("div", { id: "paystackEmbedContainer", className: this.state.class }) : _react2.default.createElement(
+        "span",
+        null,
+        _react2.default.createElement(
+          "button",
+          {
+            type: "button",
+            className: this.state.class,
+            onClick: this.payWithPaystack,
+            disabled: this.state.disabled
+          },
+          this.state.text
+        )
+      );
+    }
+  }]);
+
+  return PayStack;
 }(_react.Component);
 
 PayStack.propTypes = {
-	embed: _propTypes2.default.bool,
-	text: _propTypes2.default.string,
-	class: _propTypes2.default.string,
-	metadata: _propTypes2.default.object,
-	currency: _propTypes2.default.string,
-	plan: _propTypes2.default.string,
-	quantity: _propTypes2.default.string,
-	subaccount: _propTypes2.default.string,
-	transaction_charge: _propTypes2.default.number,
-	bearer: _propTypes2.default.string,
-	reference: _propTypes2.default.string.isRequired,
-	email: _propTypes2.default.string.isRequired,
-	amount: _propTypes2.default.number.isRequired, //in kobo
-	paystackkey: _propTypes2.default.string.isRequired,
-	callback: _propTypes2.default.func.isRequired,
-	close: _propTypes2.default.func.isRequired,
-	disabled: _propTypes2.default.bool
+  embed: _propTypes2.default.bool,
+  text: _propTypes2.default.string,
+  class: _propTypes2.default.string,
+  metadata: _propTypes2.default.object,
+  currency: _propTypes2.default.string,
+  plan: _propTypes2.default.string,
+  quantity: _propTypes2.default.string,
+  subaccount: _propTypes2.default.string,
+  transaction_charge: _propTypes2.default.number,
+  bearer: _propTypes2.default.string,
+  reference: _propTypes2.default.string.isRequired,
+  email: _propTypes2.default.string.isRequired,
+  amount: _propTypes2.default.number.isRequired, //in kobo
+  paystackkey: _propTypes2.default.string.isRequired,
+  callback: _propTypes2.default.func.isRequired,
+  close: _propTypes2.default.func.isRequired,
+  disabled: _propTypes2.default.bool
 };
 
 exports.default = PayStack;
diff --git a/distribution/paystack.min.js.map b/distribution/paystack.min.js.map
index 5166ad6..efa6c1d 100644
--- a/distribution/paystack.min.js.map
+++ b/distribution/paystack.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/PayStack.js"],"names":[],"mappings":"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","file":"paystack.min.js","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass PayStack extends Component {\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\ttext: this.props.text || \"Make Payment\",\n\t\t\tclass: this.props.class || this.props.className || \"\",\n\t\t\tmetadata: this.props.metadata || {},\n\t\t\tcurrency: this.props.currency || \"NGN\",\n\t\t\tplan: this.props.plan || \"\",\n\t\t\tquantity: this.props.quantity || \"\",\n\t\t\tsubaccount: this.props.subaccount || \"\",\n\t\t\ttransaction_charge: this.props.transaction_charge || 0,\n\t\t\tbearer: this.props.bearer || \"\",\n\t\t\tdisabled: this.props.disabled || false\n\t\t}\n\t}\n\n\n\tcomponentDidMount() {\n\t\tif(this.props.embed){\n\t\t\tthis.payWithPaystack()\n\t\t}\n\t}\n\n\tpayWithPaystack = () => {\n\t\tlet paystackOptions = {\n\t\t\tkey: this.props.paystackkey,\n\t\t\temail: this.props.email,\n\t\t\tamount: this.props.amount,\n\t\t\tref: this.props.reference,\n\t\t\tmetadata: this.state.metadata,\n\t\t\tcallback: (response) => {\n\t\t\t\tthis.props.callback(response)\n\t\t\t},\n\t\t\tonClose: () => {\n\t\t\t\tthis.props.close()\n\t\t\t},\n\t\t\tcurrency: this.state.currency,\n\t\t\tplan: this.state.plan,\n\t\t\tquantity: this.state.quantity,\n\t\t\tsubaccount: this.state.subaccount,\n\t\t\ttransaction_charge: this.state.transaction_charge,\n\t\t\tbearer: this.state.bearer\n\t\t}\n\t\tif (this.props.embed) {\n\t\t\tpaystackOptions.container = \"paystackEmbedContainer\"\n\t\t}\n\t\tconst handler = window.PaystackPop.setup(paystackOptions);\n\t\tif (!this.props.embed) {\n\t\t\thandler.openIframe();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn this.props.embed ?\n\t\t\t(\n\t\t\t\t<div id=\"paystackEmbedContainer\"></div>\n\t\t\t)\n\t\t\t:\n\t\t\t(\n\t\t\t\t<span>\n          <button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={this.state.class}\n\t\t\t\t\t\tonClick={this.payWithPaystack}\n\t\t\t\t\t\tdisabled={this.state.disabled}\n\t\t\t\t\t>\n            {this.state.text}\n          </button>\n        </span>\n\t\t\t)\n\t}\n}\n\nPayStack.propTypes = {\n\tembed: PropTypes.bool,\n\ttext: PropTypes.string,\n\tclass: PropTypes.string,\n\tmetadata: PropTypes.object,\n\tcurrency: PropTypes.string,\n\tplan: PropTypes.string,\n\tquantity: PropTypes.string,\n\tsubaccount: PropTypes.string,\n\ttransaction_charge: PropTypes.number,\n\tbearer: PropTypes.string,\n\treference: PropTypes.string.isRequired,\n\temail: PropTypes.string.isRequired,\n\tamount: PropTypes.number.isRequired, //in kobo\n\tpaystackkey: PropTypes.string.isRequired,\n\tcallback: PropTypes.func.isRequired,\n\tclose: PropTypes.func.isRequired,\n\tdisabled: PropTypes.bool\n}\n\nexport default PayStack;\n"]}
\ No newline at end of file
+{"version":3,"sources":["../src/PayStack.js"],"names":[],"mappings":";;;;;;;;AAAA;;;;AACA;;;;;;;;;;;;IAEM,Q;;;AACJ,oBAAY,KAAZ,EAAmB;AAAA;;AAAA,oHACX,KADW;;AAEjB,UAAK,KAAL,GAAa;AACX,YAAM,MAAK,KAAL,CAAW,IAAX,IAAmB,cADd;AAEX,aAAO,MAAK,KAAL,CAAW,KAAX,IAAoB,MAAK,KAAL,CAAW,SAA/B,IAA4C,EAFxC;AAGX,gBAAU,MAAK,KAAL,CAAW,QAAX,IAAuB,EAHtB;AAIX,gBAAU,MAAK,KAAL,CAAW,QAAX,IAAuB,KAJtB;AAKX,YAAM,MAAK,KAAL,CAAW,IAAX,IAAmB,EALd;AAMX,gBAAU,MAAK,KAAL,CAAW,QAAX,IAAuB,EANtB;AAOX,kBAAY,MAAK,KAAL,CAAW,UAAX,IAAyB,EAP1B;AAQX,0BAAoB,MAAK,KAAL,CAAW,kBAAX,IAAiC,CAR1C;AASX,cAAQ,MAAK,KAAL,CAAW,MAAX,IAAqB,EATlB;AAUX,gBAAU,MAAK,KAAL,CAAW,QAAX,IAAuB;AAVtB,KAAb;AAFiB;AAclB;;;;wCAEmB;AAClB,UAAI,KAAK,KAAL,CAAW,KAAf,EAAsB;AACpB,aAAK,eAAL;AACD;AACF;;;oCAEe,C,EAAG;AAAA;;AACjB,QAAE,cAAF;AACA,UAAI,kBAAkB;AACpB,aAAK,KAAK,KAAL,CAAW,WADI;AAEpB,eAAO,KAAK,KAAL,CAAW,KAFE;AAGpB,gBAAQ,KAAK,KAAL,CAAW,MAHC;AAIpB,aAAK,KAAK,KAAL,CAAW,SAJI;AAKpB,kBAAU,KAAK,KAAL,CAAW,QALD;AAMpB,kBAAU,4BAAY;AACpB,iBAAK,KAAL,CAAW,QAAX,CAAoB,QAApB;AACD,SARmB;AASpB,iBAAS,mBAAM;AACb,iBAAK,KAAL,CAAW,KAAX;AACD,SAXmB;AAYpB,kBAAU,KAAK,KAAL,CAAW,QAZD;AAapB,cAAM,KAAK,KAAL,CAAW,IAbG;AAcpB,kBAAU,KAAK,KAAL,CAAW,QAdD;AAepB,oBAAY,KAAK,KAAL,CAAW,UAfH;AAgBpB,4BAAoB,KAAK,KAAL,CAAW,kBAhBX;AAiBpB,gBAAQ,KAAK,KAAL,CAAW;AAjBC,OAAtB;AAmBA,UAAI,KAAK,KAAL,CAAW,KAAf,EAAsB;AACpB,wBAAgB,SAAhB,GAA4B,wBAA5B;AACD;AACD,UAAM,UAAU,OAAO,WAAP,CAAmB,KAAnB,CAAyB,eAAzB,CAAhB;AACA,UAAI,CAAC,KAAK,KAAL,CAAW,KAAhB,EAAuB;AACrB,gBAAQ,UAAR;AACD;AACF;;;6BAEQ;AACP,aAAO,KAAK,KAAL,CAAW,KAAX,GACL,uCAAK,IAAG,wBAAR,EAAiC,WAAW,KAAK,KAAL,CAAW,KAAvD,GADK,GAGL;AAAA;AAAA;AACE;AAAA;AAAA;AACE,kBAAK,QADP;AAEE,uBAAW,KAAK,KAAL,CAAW,KAFxB;AAGE,qBAAS,KAAK,eAHhB;AAIE,sBAAU,KAAK,KAAL,CAAW;AAJvB;AAMG,eAAK,KAAL,CAAW;AANd;AADF,OAHF;AAcD;;;;EApEoB,gB;;AAuEvB,SAAS,SAAT,GAAqB;AACnB,SAAO,oBAAU,IADE;AAEnB,QAAM,oBAAU,MAFG;AAGnB,SAAO,oBAAU,MAHE;AAInB,YAAU,oBAAU,MAJD;AAKnB,YAAU,oBAAU,MALD;AAMnB,QAAM,oBAAU,MANG;AAOnB,YAAU,oBAAU,MAPD;AAQnB,cAAY,oBAAU,MARH;AASnB,sBAAoB,oBAAU,MATX;AAUnB,UAAQ,oBAAU,MAVC;AAWnB,aAAW,oBAAU,MAAV,CAAiB,UAXT;AAYnB,SAAO,oBAAU,MAAV,CAAiB,UAZL;AAanB,UAAQ,oBAAU,MAAV,CAAiB,UAbN,EAakB;AACrC,eAAa,oBAAU,MAAV,CAAiB,UAdX;AAenB,YAAU,oBAAU,IAAV,CAAe,UAfN;AAgBnB,SAAO,oBAAU,IAAV,CAAe,UAhBH;AAiBnB,YAAU,oBAAU;AAjBD,CAArB;;kBAoBe,Q","file":"paystack.min.js","sourcesContent":["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\n\nclass PayStack extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      text: this.props.text || \"Make Payment\",\n      class: this.props.class || this.props.className || \"\",\n      metadata: this.props.metadata || {},\n      currency: this.props.currency || \"NGN\",\n      plan: this.props.plan || \"\",\n      quantity: this.props.quantity || \"\",\n      subaccount: this.props.subaccount || \"\",\n      transaction_charge: this.props.transaction_charge || 0,\n      bearer: this.props.bearer || \"\",\n      disabled: this.props.disabled || false\n    };\n  }\n\n  componentDidMount() {\n    if (this.props.embed) {\n      this.payWithPaystack();\n    }\n  }\n\n  payWithPaystack(e) {\n    e.preventDefault();\n    let paystackOptions = {\n      key: this.props.paystackkey,\n      email: this.props.email,\n      amount: this.props.amount,\n      ref: this.props.reference,\n      metadata: this.state.metadata,\n      callback: response => {\n        this.props.callback(response);\n      },\n      onClose: () => {\n        this.props.close();\n      },\n      currency: this.state.currency,\n      plan: this.state.plan,\n      quantity: this.state.quantity,\n      subaccount: this.state.subaccount,\n      transaction_charge: this.state.transaction_charge,\n      bearer: this.state.bearer\n    };\n    if (this.props.embed) {\n      paystackOptions.container = \"paystackEmbedContainer\";\n    }\n    const handler = window.PaystackPop.setup(paystackOptions);\n    if (!this.props.embed) {\n      handler.openIframe();\n    }\n  }\n\n  render() {\n    return this.props.embed ? (\n      <div id=\"paystackEmbedContainer\" className={this.state.class} />\n    ) : (\n      <span>\n        <button\n          type=\"button\"\n          className={this.state.class}\n          onClick={this.payWithPaystack}\n          disabled={this.state.disabled}\n        >\n          {this.state.text}\n        </button>\n      </span>\n    );\n  }\n}\n\nPayStack.propTypes = {\n  embed: PropTypes.bool,\n  text: PropTypes.string,\n  class: PropTypes.string,\n  metadata: PropTypes.object,\n  currency: PropTypes.string,\n  plan: PropTypes.string,\n  quantity: PropTypes.string,\n  subaccount: PropTypes.string,\n  transaction_charge: PropTypes.number,\n  bearer: PropTypes.string,\n  reference: PropTypes.string.isRequired,\n  email: PropTypes.string.isRequired,\n  amount: PropTypes.number.isRequired, //in kobo\n  paystackkey: PropTypes.string.isRequired,\n  callback: PropTypes.func.isRequired,\n  close: PropTypes.func.isRequired,\n  disabled: PropTypes.bool\n};\n\nexport default PayStack;\n"]}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index aec8138..873782d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1080,6 +1080,41 @@
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
       "dev": true
     },
+    "@sinonjs/commons": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.0.2.tgz",
+      "integrity": "sha512-WR3dlgqJP4QNrLC4iXN/5/2WaLQQ0VijOOkmflqFGVJ6wLEpbSjo7c0ZeGIdtY8Crk7xBBp87sM6+Mkerz7alw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "@sinonjs/formatio": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-3.0.0.tgz",
+      "integrity": "sha512-vdjoYLDptCgvtJs57ULshak3iJe4NW3sJ3g36xVDGff5AE8P30S6A093EIEPjdi2noGhfuNOEkbxt3J3awFW1w==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/samsam": "2.1.0"
+      },
+      "dependencies": {
+        "@sinonjs/samsam": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.1.0.tgz",
+          "integrity": "sha512-5x2kFgJYupaF1ns/RmharQ90lQkd2ELS8A9X0ymkAAdemYHGtI2KiUHG8nX2WU0T1qgnOU5YMqnBM2V7NUanNw==",
+          "dev": true,
+          "requires": {
+            "array-from": "^2.1.1"
+          }
+        }
+      }
+    },
+    "@sinonjs/samsam": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.1.2.tgz",
+      "integrity": "sha512-ZwTHAlC9akprWDinwEPD4kOuwaYZlyMwVJIANsKNC3QVp0AHB04m7RnB4eqeWfgmxw8MGTzS9uMaw93Z3QcZbw==",
+      "dev": true
+    },
     "@svgr/core": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@svgr/core/-/core-2.4.1.tgz",
@@ -1542,6 +1577,12 @@
       "integrity": "sha1-Qmu52oQJDBg42BLIFQryCoMx4pY=",
       "dev": true
     },
+    "array-from": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz",
+      "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=",
+      "dev": true
+    },
     "array-includes": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.0.3.tgz",
@@ -2140,7 +2181,7 @@
     },
     "babel-plugin-istanbul": {
       "version": "4.1.6",
-      "resolved": "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
       "integrity": "sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==",
       "dev": true,
       "requires": {
@@ -3225,7 +3266,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -3262,7 +3303,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -3316,7 +3357,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -3976,7 +4017,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -3989,7 +4030,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -4035,7 +4076,7 @@
     },
     "css-color-names": {
       "version": "0.0.4",
-      "resolved": "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
@@ -4683,7 +4724,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -4822,7 +4863,7 @@
     },
     "duplexer": {
       "version": "0.1.1",
-      "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
@@ -5286,7 +5327,7 @@
         },
         "load-json-file": {
           "version": "2.0.0",
-          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
           "dev": true,
           "requires": {
@@ -5468,7 +5509,7 @@
     },
     "events": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
       "dev": true
     },
@@ -5808,7 +5849,7 @@
     },
     "finalhandler": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "dev": true,
       "requires": {
@@ -6625,7 +6666,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -7252,7 +7293,7 @@
     },
     "http-errors": {
       "version": "1.6.3",
-      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "dev": true,
       "requires": {
@@ -7854,7 +7895,7 @@
     },
     "is-builtin-module": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
       "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
       "dev": true,
       "requires": {
@@ -8004,7 +8045,7 @@
     },
     "is-obj": {
       "version": "1.0.1",
-      "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
@@ -9011,6 +9052,12 @@
         "array-includes": "^3.0.3"
       }
     },
+    "just-extend": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-3.0.0.tgz",
+      "integrity": "sha512-Fu3T6pKBuxjWT/p4DkqGHFRsysc8OauWr4ZRTY9dIx07Y9O0RkoR5jcv28aeD1vuAwhm3nLkDurwLXoALp4DpQ==",
+      "dev": true
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -9081,7 +9128,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
       "requires": {
@@ -9223,6 +9270,12 @@
       "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
+      "dev": true
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -9278,6 +9331,12 @@
       "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=",
       "dev": true
     },
+    "lolex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lolex/-/lolex-3.0.0.tgz",
+      "integrity": "sha512-hcnW80h3j2lbUfFdMArd5UPA/vxZJ+G8vobd+wg3nVEQA0EigStbYcrG030FJxL6xiDDPEkoMatV9xIh5OecQQ==",
+      "dev": true
+    },
     "loose-envify": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
@@ -9756,6 +9815,42 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "nise": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-1.4.6.tgz",
+      "integrity": "sha512-1GedetLKzmqmgwabuMSqPsT7oumdR77SBpDfNNJhADRIeA3LN/2RVqR4fFqwvzhAqcTef6PPCzQwITE/YQ8S8A==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/formatio": "3.0.0",
+        "just-extend": "^3.0.0",
+        "lolex": "^2.3.2",
+        "path-to-regexp": "^1.7.0",
+        "text-encoding": "^0.6.4"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "lolex": {
+          "version": "2.7.5",
+          "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.7.5.tgz",
+          "integrity": "sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "dev": true,
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -10284,7 +10379,7 @@
     },
     "parse-asn1": {
       "version": "5.1.1",
-      "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
       "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
       "dev": true,
       "requires": {
@@ -10506,7 +10601,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         },
@@ -14907,7 +15002,7 @@
         },
         "readable-stream": {
           "version": "1.0.34",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
           "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
           "dev": true,
           "requires": {
@@ -15499,7 +15594,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -15780,7 +15875,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -15873,6 +15968,34 @@
         }
       }
     },
+    "sinon": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-7.0.0.tgz",
+      "integrity": "sha512-8OrSYFPZ9xaECfi1ayVMd0ihYCW2OZYgX3rBczrB990gHZMM+aftvhNTJazGz/luS0Us9NWgD5P3KGQ7kYZvGg==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.0.2",
+        "@sinonjs/formatio": "^3.0.0",
+        "@sinonjs/samsam": "^2.1.2",
+        "diff": "^3.5.0",
+        "lodash.get": "^4.4.2",
+        "lolex": "^3.0.0",
+        "nise": "^1.4.5",
+        "supports-color": "^5.5.0",
+        "type-detect": "^4.0.8"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "sisteransi": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.1.tgz",
@@ -16591,7 +16714,7 @@
     },
     "table": {
       "version": "4.0.3",
-      "resolved": "http://registry.npmjs.org/table/-/table-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/table/-/table-4.0.3.tgz",
       "integrity": "sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==",
       "dev": true,
       "requires": {
@@ -16770,6 +16893,12 @@
         "require-main-filename": "^1.0.1"
       }
     },
+    "text-encoding": {
+      "version": "0.6.4",
+      "resolved": "http://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz",
+      "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=",
+      "dev": true
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -16784,7 +16913,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
@@ -19157,7 +19286,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
diff --git a/package.json b/package.json
index 600faba..ea5257f 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "main": "distribution/paystack.min.js",
   "scripts": {
     "test": "mocha --reporter spec test/testSetup.js \"test/**/*.spec.js\"",
-    "dist": "./node_modules/.bin/babel ./src/PayStack.js --out-file ./distribution/paystack.min.js --source-maps true"
+    "dist": "./node_modules/.bin/babel ./src/PayStack.js --out-file ./distribution/paystack.min.js --source-maps true",
+    "format": "prettier --write '**/**/*.{js,}'"
   },
   "repository": {
     "type": "git",
@@ -47,7 +48,9 @@
     "enzyme-adapter-react-16": "^1.6.0",
     "jsdom": "9.11.0",
     "mocha": "^5.2.0",
+    "prettier": "^1.14.3",
     "react-addons-test-utils": "^15.6.2",
-    "react-scripts": "^2.0.5"
+    "react-scripts": "^2.0.5",
+    "sinon": "^7.0.0"
   }
 }
diff --git a/src/PayStack.js b/src/PayStack.js
index 0d94f6f..da569b3 100644
--- a/src/PayStack.js
+++ b/src/PayStack.js
@@ -1,99 +1,95 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 class PayStack extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: this.props.text || "Make Payment",
+      class: this.props.class || this.props.className || "",
+      metadata: this.props.metadata || {},
+      currency: this.props.currency || "NGN",
+      plan: this.props.plan || "",
+      quantity: this.props.quantity || "",
+      subaccount: this.props.subaccount || "",
+      transaction_charge: this.props.transaction_charge || 0,
+      bearer: this.props.bearer || "",
+      disabled: this.props.disabled || false
+    };
+  }
 
-	constructor(props) {
-		super(props);
-		this.state = {
-			text: this.props.text || "Make Payment",
-			class: this.props.class || this.props.className || "",
-			metadata: this.props.metadata || {},
-			currency: this.props.currency || "NGN",
-			plan: this.props.plan || "",
-			quantity: this.props.quantity || "",
-			subaccount: this.props.subaccount || "",
-			transaction_charge: this.props.transaction_charge || 0,
-			bearer: this.props.bearer || "",
-			disabled: this.props.disabled || false
-		}
-	}
+  componentDidMount() {
+    if (this.props.embed) {
+      this.payWithPaystack();
+    }
+  }
 
+  payWithPaystack(e) {
+    e.preventDefault();
+    let paystackOptions = {
+      key: this.props.paystackkey,
+      email: this.props.email,
+      amount: this.props.amount,
+      ref: this.props.reference,
+      metadata: this.state.metadata,
+      callback: response => {
+        this.props.callback(response);
+      },
+      onClose: () => {
+        this.props.close();
+      },
+      currency: this.state.currency,
+      plan: this.state.plan,
+      quantity: this.state.quantity,
+      subaccount: this.state.subaccount,
+      transaction_charge: this.state.transaction_charge,
+      bearer: this.state.bearer
+    };
+    if (this.props.embed) {
+      paystackOptions.container = "paystackEmbedContainer";
+    }
+    const handler = window.PaystackPop.setup(paystackOptions);
+    if (!this.props.embed) {
+      handler.openIframe();
+    }
+  }
 
-	componentDidMount() {
-		if(this.props.embed){
-			this.payWithPaystack()
-		}
-	}
-
-	payWithPaystack = () => {
-		let paystackOptions = {
-			key: this.props.paystackkey,
-			email: this.props.email,
-			amount: this.props.amount,
-			ref: this.props.reference,
-			metadata: this.state.metadata,
-			callback: (response) => {
-				this.props.callback(response)
-			},
-			onClose: () => {
-				this.props.close()
-			},
-			currency: this.state.currency,
-			plan: this.state.plan,
-			quantity: this.state.quantity,
-			subaccount: this.state.subaccount,
-			transaction_charge: this.state.transaction_charge,
-			bearer: this.state.bearer
-		}
-		if (this.props.embed) {
-			paystackOptions.container = "paystackEmbedContainer"
-		}
-		const handler = window.PaystackPop.setup(paystackOptions);
-		if (!this.props.embed) {
-			handler.openIframe();
-		}
-	}
-
-	render() {
-		return this.props.embed ?
-			(
-				<div id="paystackEmbedContainer"></div>
-			)
-			:
-			(
-				<span>
-          <button
-						type="button"
-						className={this.state.class}
-						onClick={this.payWithPaystack}
-						disabled={this.state.disabled}
-					>
-            {this.state.text}
-          </button>
-        </span>
-			)
-	}
+  render() {
+    return this.props.embed ? (
+      <div id="paystackEmbedContainer" className={this.state.class} />
+    ) : (
+      <span>
+        <button
+          type="button"
+          className={this.state.class}
+          onClick={this.payWithPaystack}
+          disabled={this.state.disabled}
+        >
+          {this.state.text}
+        </button>
+      </span>
+    );
+  }
 }
 
 PayStack.propTypes = {
-	embed: PropTypes.bool,
-	text: PropTypes.string,
-	class: PropTypes.string,
-	metadata: PropTypes.object,
-	currency: PropTypes.string,
-	plan: PropTypes.string,
-	quantity: PropTypes.string,
-	subaccount: PropTypes.string,
-	transaction_charge: PropTypes.number,
-	bearer: PropTypes.string,
-	reference: PropTypes.string.isRequired,
-	email: PropTypes.string.isRequired,
-	amount: PropTypes.number.isRequired, //in kobo
-	paystackkey: PropTypes.string.isRequired,
-	callback: PropTypes.func.isRequired,
-	close: PropTypes.func.isRequired,
-	disabled: PropTypes.bool
-}
+  embed: PropTypes.bool,
+  text: PropTypes.string,
+  class: PropTypes.string,
+  metadata: PropTypes.object,
+  currency: PropTypes.string,
+  plan: PropTypes.string,
+  quantity: PropTypes.string,
+  subaccount: PropTypes.string,
+  transaction_charge: PropTypes.number,
+  bearer: PropTypes.string,
+  reference: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  amount: PropTypes.number.isRequired, //in kobo
+  paystackkey: PropTypes.string.isRequired,
+  callback: PropTypes.func.isRequired,
+  close: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
+};
 
 export default PayStack;
diff --git a/test/components/Paystack.spec.js b/test/components/Paystack.spec.js
index 4138933..3b3360c 100644
--- a/test/components/Paystack.spec.js
+++ b/test/components/Paystack.spec.js
@@ -1,39 +1,148 @@
-import React from 'react'
-import {expect} from 'chai';
-import { shallow, configure } from 'enzyme'
-import Paystack from '../../src/PayStack'
-import Adapter from 'enzyme-adapter-react-16';
+import React from "react";
+import { expect } from "chai";
+import { shallow, configure, mount } from "enzyme";
+import Paystack from "../../src/PayStack";
+import sinon from "sinon";
+import Adapter from "enzyme-adapter-react-16";
 
 configure({ adapter: new Adapter() });
 
-function callback(re) {}
-function close(re) {}
-const btnText = "Pay me,my money"
-const PaystackWrapper = shallow(<Paystack  reference="jjrjrjjr"
-                                           email="foobar@gmail.com"
-                                           amount={100}
-                                           close={close}
-                                           text={btnText}
-                                           callback={callback}
-                                           paystackkey="pksd" />)
-describe('Paystack Component', () => {
-	it('Paystack component renders span', () => {
-		expect(PaystackWrapper.find('span')).to.have.length(1)
-	})
-
-	it('Paystack renders button', () => {
-		expect(PaystackWrapper.find('button')).to.have.length(1)
-	})
-
-	it('should have customize button text', () => {
-		expect(PaystackWrapper.text()).to.contain(btnText)
-	})
-
-	it('should have an initial text, currency, transaction_charge and disabled state',  () => {
-		const { plan, currency, disabled, transaction_charge } = PaystackWrapper.state()
-		expect(plan).to.be.empty
-		expect(currency).to.equal('NGN')
-		expect(disabled).to.be.false
-		expect(transaction_charge).to.equal(0)
-	});
-})
\ No newline at end of file
+const callback = re => null;
+const close = () => null;
+const reference = "jjrjrjjr";
+const email = "foobar@gmail.com";
+const amount = 100;
+const btnText = "Pay me,my money";
+const key = "PKSD";
+
+describe("Paystack Component", () => {
+  it("Paystack component renders span", () => {
+    const PaystackWrapper = mount(
+      <Paystack
+        reference={reference}
+        email={email}
+        amount={amount}
+        close={close}
+        text={btnText}
+        callback={callback}
+        paystackkey={key}
+      />
+    );
+    expect(PaystackWrapper.find("span")).to.have.length(1);
+  });
+
+  it("Paystack renders button", () => {
+    const PaystackWrapper = mount(
+      <Paystack
+        reference={reference}
+        email={email}
+        amount={amount}
+        close={close}
+        text={btnText}
+        callback={callback}
+        paystackkey={key}
+      />
+    );
+    expect(PaystackWrapper.find("button")).to.have.length(1);
+  });
+
+  it("should have customize button text", () => {
+    const PaystackWrapper = mount(
+      <Paystack
+        reference={reference}
+        email={email}
+        amount={amount}
+        close={close}
+        text={btnText}
+        callback={callback}
+        paystackkey={key}
+      />
+    );
+    expect(PaystackWrapper.text()).to.contain(btnText);
+  });
+
+  it("should have an initial text, currency, transaction_charge and disabled state", () => {
+    const PaystackWrapper = mount(
+      <Paystack
+        reference={reference}
+        email={email}
+        amount={amount}
+        close={close}
+        text={btnText}
+        callback={callback}
+        paystackkey={key}
+      />
+    );
+    const {
+      plan,
+      currency,
+      disabled,
+      transaction_charge
+    } = PaystackWrapper.state();
+    expect(plan).to.be.empty;
+    expect(currency).to.equal("NGN");
+    expect(disabled).to.be.false;
+    expect(transaction_charge).to.equal(0);
+  });
+
+  it("should have props for reference, email, amount, close, text, callback, plan, embed and paystackkey", () => {
+    const PaystackWrapper = mount(
+      <Paystack
+        reference={reference}
+        email={email}
+        amount={amount}
+        close={close}
+        text={btnText}
+        callback={callback}
+        paystackkey={key}
+      />
+    );
+    expect(PaystackWrapper.props().email).to.not.be.undefined;
+    expect(PaystackWrapper.props().close).to.not.be.undefined;
+    expect(PaystackWrapper.props().text).to.not.be.undefined;
+    expect(PaystackWrapper.props().callback).to.not.be.undefined;
+    expect(PaystackWrapper.props().paystackkey).to.not.be.undefined;
+    expect(PaystackWrapper.props().amount).to.not.be.undefined;
+    expect(PaystackWrapper.props().reference).to.not.be.undefined;
+    expect(PaystackWrapper.props().plan).to.be.undefined;
+    expect(PaystackWrapper.props().embed).to.be.undefined;
+  });
+
+  it("should render embed div only", () => {
+    const PaystackWrapper = mount(
+      <Paystack
+        reference={reference}
+        email={email}
+        amount={amount}
+        close={close}
+        text={btnText}
+        callback={callback}
+        paystackkey={key}
+      />
+    );
+    PaystackWrapper.setProps({
+      embed: true
+    });
+    expect(PaystackWrapper.find("div")).to.have.length(1);
+  });
+
+  it("try something", done => {
+    const payWithPaystackSpy = sinon.mock(Paystack.prototype);
+    payWithPaystackSpy.expects("payWithPaystack").once();
+    const PaystackWrapper = mount(
+      <Paystack
+        reference={reference}
+        email={email}
+        amount={amount}
+        close={close}
+        text={btnText}
+        callback={callback}
+        paystackkey={key}
+      />
+    );
+    PaystackWrapper.find("button").simulate("click");
+    payWithPaystackSpy.restore();
+    payWithPaystackSpy.verify();
+    done();
+  });
+});
diff --git a/test/testSetup.js b/test/testSetup.js
index 1274aee..12f7e43 100644
--- a/test/testSetup.js
+++ b/test/testSetup.js
@@ -14,23 +14,25 @@ This setting assures the .babelrc dev config (which includes
  2. Tests will not display detailed error messages
  when running against production version code
 */
-process.env.NODE_ENV = 'test'
+process.env.NODE_ENV = "test";
 // Register babel so that it will transpile ES6 to ES5 before our tests run.
-require('babel-register')()
+require("babel-register")();
 // Disable webpack-specific features for tests since
 // Mocha doesn't know what to do with them.
-require.extensions['.css'] = function () {return null}
+require.extensions[".css"] = function() {
+  return null;
+};
 // Configure JSDOM and set global variables
 // to simulate a browser environment for tests.
-var jsdom = require('jsdom').jsdom
-var exposedProperties = ['window', 'navigator', 'document']
-global.document = jsdom('')
-global.navigator = { userAgent: 'node.js' }
-global.window = document.defaultView
-Object.keys(document.defaultView).forEach((property) => {
-	if (typeof global[property] === 'undefined') {
-		exposedProperties.push(property)
-		global[property] = document.defaultView[property]
-	}
-})
-documentRef = document
+var jsdom = require("jsdom").jsdom;
+var exposedProperties = ["window", "navigator", "document"];
+global.document = jsdom("");
+global.navigator = { userAgent: "node.js" };
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach(property => {
+  if (typeof global[property] === "undefined") {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+documentRef = document;