Use React Function Component and Update Braintree

package.json

@@ -28,7 +28,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "braintree-web-drop-in": "^1.24.0",
+    "braintree-web-drop-in": "^1.27.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {

src/index.js

@@ -1,77 +1,85 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import BraintreeWebDropIn from "braintree-web-drop-in";
 
-export default class DropIn extends React.Component {
-  static displayName = "BraintreeWebDropIn";
 
-  static propTypes = {
-    options: PropTypes.object.isRequired,
-    // @deprecated: Include inside options
-    preselectVaultedPaymentMethod: PropTypes.bool,
+export default function DropIn({
+  options,
+  preselectVaultedPaymentMethod,
+  onInstance,
+  onError,
+  onNoPaymentMethodRequestable,
+  onPaymentMethodRequestable,
+  onPaymentOptionSelected
+}) {
+  const [wrapper, setWrapper] = useState();
+  const [instance, setInstance] = useState();
 
-    onInstance: PropTypes.func,
-    onError: PropTypes.func,
+  useEffect(() => {
+    (async () => {
+      if (!wrapper) return;
 
-    onNoPaymentMethodRequestable: PropTypes.func,
-    onPaymentMethodRequestable: PropTypes.func,
-    onPaymentOptionSelected: PropTypes.func,
-  };
+      try {
+        const instance = await BraintreeWebDropIn.create({
+          container: ReactDOM.findDOMNode(wrapper),
+          preselectVaultedPaymentMethod: preselectVaultedPaymentMethod,
+          ...options,
+        });
 
-  static defaultProps = {
-    preselectVaultedPaymentMethod: true,
-  };
+        instance.on("noPaymentMethodRequestable", (...args) => {
+          if (onNoPaymentMethodRequestable) {
+            onNoPaymentMethodRequestable(...args);
+          }
+        });
+        instance.on("paymentMethodRequestable", (...args) => {
+          if (onPaymentMethodRequestable) {
+            onPaymentMethodRequestable(...args);
+          }
+        });
+        instance.on("paymentOptionSelected", (...args) => {
+          if (onPaymentOptionSelected) {
+            onPaymentOptionSelected(...args);
+          }
+        });
 
-  wrapper;
-  instance;
+        setInstance(instance);
+      } catch (error) {
+        if (onError)
+          onError(error);
+      }
+    })();
 
-  async componentDidMount() {
-    try {
-      this.instance = await BraintreeWebDropIn.create({
-        container: ReactDOM.findDOMNode(this.wrapper),
-        preselectVaultedPaymentMethod: this.props.preselectVaultedPaymentMethod,
-        ...this.props.options,
-      });
+    return () => {
+      if (instance)
+        return instance.teardown();
+    }
+  }, [wrapper]);
 
-      this.instance.on("noPaymentMethodRequestable", (...args) => {
-        if (this.props.onNoPaymentMethodRequestable) {
-          this.props.onNoPaymentMethodRequestable(...args);
-        }
-      });
-      this.instance.on("paymentMethodRequestable", (...args) => {
-        if (this.props.onPaymentMethodRequestable) {
-          this.props.onPaymentMethodRequestable(...args);
-        }
-      });
-      this.instance.on("paymentOptionSelected", (...args) => {
-        if (this.props.onPaymentOptionSelected) {
-          this.props.onPaymentOptionSelected(...args);
-        }
-      });
+  // Instance change listener
+  useEffect(() => {
+    if (instance)
+      onInstance(instance);
+  }, [instance]);
 
-      if (this.props.onInstance) {
-        this.props.onInstance(this.instance);
-      }
-    } catch (error) {
-      if (this.props.onError) {
-        this.props.onError(error);
-      }
-    }
-  }
+  return <div ref={setWrapper} />;
+}
 
-  async componentWillUnmount() {
-    if (this.instance) {
-      await this.instance.teardown();
-    }
-  }
+DropIn.displayName = "BraintreeWebDropIn";
+
+DropIn.propTypes = {
+  options: PropTypes.object.isRequired,
+  // @deprecated: Include inside options
+  preselectVaultedPaymentMethod: PropTypes.bool,
+
+  onInstance: PropTypes.func,
+  onError: PropTypes.func,
 
-  shouldComponentUpdate() {
-    // Static
-    return false;
-  }
+  onNoPaymentMethodRequestable: PropTypes.func,
+  onPaymentMethodRequestable: PropTypes.func,
+  onPaymentOptionSelected: PropTypes.func,
+};
 
-  render() {
-    return <div ref={(ref) => (this.wrapper = ref)} />;
-  }
+DropIn.defaultProps = {
+  preselectVaultedPaymentMethod: true,
 }