v1.2.0: Add onError, minor fixes/changes, prep for v2

CHANGELOG.md

@@ -1,3 +1,11 @@
+## v1.2.0 (2020-09-26)
+
+- Add `onError` prop
+- Add missing typings for extra callbacks
+- Fix callbacks reference changes
+- Deprecated `preselectVaultedPaymentMethod` prop (simply put in `options`)
+- Upgrade dependencies
+
 ## v1.1.2 (2020-08-26)
 
 - Upgrade dependencies

README.md

@@ -85,7 +85,7 @@ See [`example`](example/README.md).
 Options to setup Braintree.
 See [Drop-In options](https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html#.create).
 
-### `onInstance` (`function: instance`)
+### `onInstance` (`function: instance`, optional)
 
 Called with the Braintree Drop-In instance when done initializing.
 You can call all regular [Drop-In methods](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html)
@@ -119,7 +119,13 @@ Modify your configuration initially set in `options`. Can be used for any paypal
 
 If updateConfiguration is called after a user completes the PayPal authorization flow, any PayPal accounts not stored in the Vault record will be removed.
 
-### `onNoPaymentMethodRequestable`, `onPaymentMethodRequestable`, `onPaymentOptionSelected` (`function: event`)
+### `onError` (`function: error`, optional)
+
+Called when creating the instance throws an error.
+
+> Note: This doesn't propage up to React's error bounderies. If this is the desired behavior, rethrow the error inside your `onError` handler
+
+### `onNoPaymentMethodRequestable`, `onPaymentMethodRequestable`, `onPaymentOptionSelected` (`function: void/payload`, optional)
 
 Ran for [events](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#on).
 
@@ -129,9 +135,11 @@ Ran for [events](https://braintree.github.io/braintree-web-drop-in/docs/current/
 
 ### `preselectVaultedPaymentMethod` (`boolean`, default: `true`)
 
-Whether or not to initialize with a vaulted payment method pre-selected.
+Whether to initialize with a vaulted payment method pre-selected.
 Only applicable when using a client token with a customer with saved payment methods.
 
+> Note: This prop is deprecated and will be removed in v2. Simply place this prop inside your `options` instead.
+
 ## Package size
 
 Since this depends on `braintree-web-drop-in`, this can be a [quite large package](https://bundlephobia.com/result?p=braintree-web-drop-in-react) (324.5 kB minified). This package alone is only ~3 kB.

index.d.ts

@@ -1,12 +1,26 @@
-import * as React from 'react';
-import { Options as BraintreeOptions, Dropin } from 'braintree-web-drop-in';
+import * as React from "react";
+import {
+  Options as BraintreeOptions,
+  Dropin,
+  PaymentMethodRequestablePayload,
+  PaymentOptionSelectedPayload,
+} from "braintree-web-drop-in";
 
-export type Options = Omit<BraintreeOptions, 'container'>;
+export type Options = Omit<BraintreeOptions, "container">;
 
 export interface IDropInProps {
   options: Options;
-  preselectVaultedPaymentMethod?: boolean,
+  // @deprecated: Include inside options
+  preselectVaultedPaymentMethod?: boolean;
+
   onInstance?: (instance: Dropin) => void;
+  onError?: (error: any) => void;
+
+  onNoPaymentMethodRequestable?: () => void;
+  onPaymentMethodRequestable?: (
+    payload: PaymentMethodRequestablePayload
+  ) => void;
+  onPaymentOptionSelected?: (payload: PaymentOptionSelectedPayload) => void;
 }
 
-export default class DropIn extends React.Component<IDropInProps> { }
+export default class DropIn extends React.Component<IDropInProps> {}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "braintree-web-drop-in-react",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React component for Braintree Web Drop-In (v3)",
   "keywords": [
     "braintree",
@@ -24,31 +24,31 @@
     "build": "babel src -d lib --source-maps && terser lib/index.js -o lib/index.min.js --source-map 'content=lib/index.js.map'",
     "clean": "rimraf lib",
     "example": "cd example && npm install && npm run start",
-    "format": "prettier --write 'src/**.js' package.json CHANGELOG.md README.md .travis.yml example/index.html example/index.js example/README.md example/package.json",
+    "format": "prettier --write 'src/**.js' index.d.ts package.json CHANGELOG.md README.md .travis.yml example/index.html example/index.js example/README.md example/package.json",
     "test": "jest"
   },
   "dependencies": {
-    "braintree-web-drop-in": "^1.23.0",
+    "braintree-web-drop-in": "^1.24.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.4",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "^7.11.2",
     "@types/braintree-web-drop-in": "^1.22.1",
-    "@types/react": "^16.9.47",
+    "@types/react": "^16.9.49",
     "babel-jest": "^26.3.0",
     "jest": "^26.4.2",
-    "prettier": "^2.1.1",
+    "prettier": "^2.1.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.2",
-    "terser": "^5.2.1"
+    "terser": "^5.3.2"
   },
   "peerDependencies": {
     "react": ">=16.13.1",

src/index.js

@@ -8,8 +8,12 @@ export default class DropIn extends React.Component {
 
   static propTypes = {
     options: PropTypes.object.isRequired,
+    // @deprecated: Include inside options
     preselectVaultedPaymentMethod: PropTypes.bool,
+
     onInstance: PropTypes.func,
+    onError: PropTypes.func,
+
     onNoPaymentMethodRequestable: PropTypes.func,
     onPaymentMethodRequestable: PropTypes.func,
     onPaymentOptionSelected: PropTypes.func,
@@ -23,33 +27,36 @@ export default class DropIn extends React.Component {
   instance;
 
   async componentDidMount() {
-    this.instance = await BraintreeWebDropIn.create({
-      container: ReactDOM.findDOMNode(this.wrapper),
-      preselectVaultedPaymentMethod: this.props.preselectVaultedPaymentMethod,
-      ...this.props.options,
-    });
+    try {
+      this.instance = await BraintreeWebDropIn.create({
+        container: ReactDOM.findDOMNode(this.wrapper),
+        preselectVaultedPaymentMethod: this.props.preselectVaultedPaymentMethod,
+        ...this.props.options,
+      });
 
-    if (this.props.onNoPaymentMethodRequestable) {
-      this.instance.on(
-        "noPaymentMethodRequestable",
-        this.props.onNoPaymentMethodRequestable
-      );
-    }
-    if (this.props.onPaymentMethodRequestable) {
-      this.instance.on(
-        "paymentMethodRequestable",
-        this.props.onPaymentMethodRequestable
-      );
-    }
-    if (this.props.onPaymentOptionSelected) {
-      this.instance.on(
-        "paymentOptionSelected",
-        this.props.onPaymentOptionSelected
-      );
-    }
+      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);
+        }
+      });
 
-    if (this.props.onInstance) {
-      this.props.onInstance(this.instance);
+      if (this.props.onInstance) {
+        this.props.onInstance(this.instance);
+      }
+    } catch (error) {
+      if (this.props.onError) {
+        this.props.onError(error);
+      }
     }
   }