braintree-web-drop-in - npm Package Compare versions

Comparing version 1.26.1 to 1.27.0

CHANGELOG.md

 CHANGELOG
 =========
 
+1.27.0
+------
+- Update braintree-web to v3.74.0
+- Fix issue where Drop-in may error or not set up completely due to dependency setup race condition (#700)
+- Fix issue where Drop-in may report it is ready even though no payment options are actually available
+- Google Pay
+  - Fix issue where passing custom button option would caused a developer error in the console (#701)
+- 3D Secure
+  - Add `3ds:customer-canceled` event (#690)
+  - Add `3ds:authentication-modal-render` event
+  - Add `3ds:authentication-modal-close` event
+
 1.26.1
@@ -5,0 +17,0 @@ ------

constants.js

@@ -47,2 +47,8 @@ 'use strict';
   },
+  dependencySetupStates: {
+    DONE: 'done',
+    FAILED: 'failed',
+    INITIALIZING: 'initializing',
+    NOT_ENABLED: 'not-enabled'
+  },
   errors: {
@@ -49,0 +55,0 @@ NO_PAYMENT_METHOD_ERROR: 'No payment method is available.',

dropin-model.js

@@ -9,2 +9,3 @@ 'use strict';
 var paymentOptionIDs = constants.paymentOptionIDs;
+var dependencySetupStates = constants.dependencySetupStates;
 var isGuestCheckout = require('./lib/is-guest-checkout');
@@ -28,2 +29,4 @@ var Promise = require('./lib/promise');
 ];
+var ASYNC_DEPENDENCIES = DEFAULT_PAYMENT_OPTION_PRIORITY.concat(['threeDSecure', 'dataCollector']);
+var DEPENDENCY_READY_CHECK_INTERVAL = 200;
 
@@ -34,7 +37,17 @@ function DropinModel(options) {
   this.merchantConfiguration = options.merchantConfiguration;
-
   this.isGuestCheckout = isGuestCheckout(options.client);
 
-  this.dependenciesInitializing = 0;
-  this.dependencySuccessCount = 0;
+  this.dependencyStates = ASYNC_DEPENDENCIES.reduce(function (total, dependencyKey) {
+    if (dependencyKey in options.merchantConfiguration) {
+      total[dependencyKey] = dependencySetupStates.INITIALIZING;
+    }
+
+    return total;
+  }, {});
+  // card is on by default, so we need to set it's state to INITIALIZING
+  // unless the merchant has specifically opted out of using the card form
+  if (options.merchantConfiguration.card !== false) {
+    this.dependencyStates.card = dependencySetupStates.INITIALIZING;
+  }
+
   this.failedDependencies = {};
@@ -56,3 +69,20 @@ this._options = options;
   var self = this;
+  var dependencyReadyInterval = setInterval(function () {
+    var ready = true;
 
+    Object.keys(self.dependencyStates).forEach(function (dep) {
+      if (self.dependencyStates[dep] === dependencySetupStates.INITIALIZING) {
+        ready = false;
+      }
+    });
+
+    if (!ready) {
+      return;
+    }
+
+    clearInterval(dependencyReadyInterval);
+
+    self._emit('asyncDependenciesReady');
+  }, DEPENDENCY_READY_CHECK_INTERVAL);
+
   return vaultManager.create({
@@ -63,3 +93,3 @@ client: self._options.client
 
-    return getSupportedPaymentOptions(self._options);
+    return self._getSupportedPaymentOptions(self._options);
   }).then(function (paymentOptions) {
@@ -227,10 +257,17 @@ self.supportedPaymentOptions = paymentOptions;
 
-DropinModel.prototype.asyncDependencyStarting = function () {
-  this.dependenciesInitializing++;
+DropinModel.prototype.hasAtLeastOneAvailablePaymentOption = function () {
+  var self = this;
+  var i;
+
+  for (i = 0; i < this.supportedPaymentOptions.length; i++) {
+    if (self.dependencyStates[this.supportedPaymentOptions[i]] === dependencySetupStates.DONE) {
+      return true;
+    }
+  }
+
+  return false;
 };
 
-DropinModel.prototype.asyncDependencyReady = function () {
-  this.dependencySuccessCount++;
-  this.dependenciesInitializing--;
-  this._checkAsyncDependencyFinished();
+DropinModel.prototype.asyncDependencyReady = function (key) {
+  this.dependencyStates[key] = dependencySetupStates.DONE;
 };
@@ -243,12 +280,5 @@
   this.failedDependencies[options.view] = options.error;
-  this.dependenciesInitializing--;
-  this._checkAsyncDependencyFinished();
+  this.dependencyStates[options.view] = dependencySetupStates.FAILED;
 };
 
-DropinModel.prototype._checkAsyncDependencyFinished = function () {
-  if (this.dependenciesInitializing === 0) {
-    this._emit('asyncDependenciesReady');
-  }
-};
-
 DropinModel.prototype.cancelInitialization = function (error) {
@@ -339,3 +369,4 @@ this._emit('cancelInitialization', error);
 
-function getSupportedPaymentOptions(options) {
+DropinModel.prototype._getSupportedPaymentOptions = function (options) {
+  var self = this;
   var paymentOptionPriority = options.merchantConfiguration.paymentOptionPriority || DEFAULT_PAYMENT_OPTION_PRIORITY;
@@ -352,3 +383,9 @@ var promises;
   promises = paymentOptionPriority.map(function (paymentOption) {
-    return getPaymentOption(paymentOption, options);
+    return getPaymentOption(paymentOption, options).then(function (result) {
+      if (!result.success) {
+        self.dependencyStates[result.id] = dependencySetupStates.NOT_ENABLED;
+      }
+
+      return result;
+    });
   });
@@ -367,3 +404,3 @@
   });
-}
+};
 
@@ -370,0 +407,0 @@ function getPaymentOption(paymentOption, options) {

index.js

@@ -40,3 +40,3 @@ 'use strict';
  *     <form id="payment-form" action="/" method="post">
- *       <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"
+ *       <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"
  *        data-braintree-dropin-authorization="CLIENT_AUTHORIZATION"
@@ -59,3 +59,3 @@ *       ></script>
  *     <form id="payment-form" action="/" method="post">
- *       <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"
+ *       <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"
  *        data-braintree-dropin-authorization="CLIENT_AUTHORIZATION"
@@ -75,3 +75,3 @@ *        data-paypal.flow="checkout"
  * <form id="payment-form" action="/" method="post">
- *   <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"
+ *   <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"
  *    data-braintree-dropin-authorization="CLIENT_AUTHORIZATION"
@@ -91,3 +91,3 @@ *    data-locale="de_DE"
  * <form id="payment-form" action="/" method="post">
- *   <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"
+ *   <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"
  *    data-braintree-dropin-authorization="CLIENT_AUTHORIZATION"
@@ -102,3 +102,3 @@ *    data-card.cardholder-name.required="false"
  * <form id="payment-form" action="/" method="post">
- *   <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"
+ *   <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"
  *    data-braintree-dropin-authorization="CLIENT_AUTHORIZATION"
@@ -120,11 +120,11 @@ *    data-card.cardholder-name.required="true"
 
-var VERSION = '1.26.1';
+var VERSION = '1.27.0';
 
 /**
- * @typedef {object} cardCreateOptions The configuration options for cards. Internally, Drop-in uses [Hosted Fields](http://braintree.github.io/braintree-web/3.73.1/module-braintree-web_hosted-fields.html) to render the card form. The `overrides.fields` and `overrides.styles` allow the Hosted Fields to be customized.
+ * @typedef {object} cardCreateOptions The configuration options for cards. Internally, Drop-in uses [Hosted Fields](http://braintree.github.io/braintree-web/3.74.0/module-braintree-web_hosted-fields.html) to render the card form. The `overrides.fields` and `overrides.styles` allow the Hosted Fields to be customized.
  *
  * @param {(boolean|object)} [cardholderName] Will enable a cardholder name field above the card number field. If set to an object, you can specify whether or not the field is required. If set to a `true`, it will default the field to being present, but not required.
  * @param {boolean} [cardholderName.required=false] When true, the cardholder name field will be required to request the payment method nonce.
- * @param {object} [overrides.fields] The Hosted Fields [`fields` options](http://braintree.github.io/braintree-web/3.73.1/module-braintree-web_hosted-fields.html#~fieldOptions). Only `number`, `cvv`, `expirationDate` and `postalCode` can be configured. Each is a [Hosted Fields `field` object](http://braintree.github.io/braintree-web/3.73.1/module-braintree-web_hosted-fields.html#~field). `selector` cannot be modified.
- * @param {object} [overrides.styles] The Hosted Fields [`styles` options](http://braintree.github.io/braintree-web/3.73.1/module-braintree-web_hosted-fields.html#~styleOptions). These can be used to add custom styles to the Hosted Fields iframes. To style the rest of Drop-in, [review the documentation for customizing Drop-in](https://developers.braintreepayments.com/guides/drop-in/customization/javascript/v3#customize-your-ui).
+ * @param {object} [overrides.fields] The Hosted Fields [`fields` options](http://braintree.github.io/braintree-web/3.74.0/module-braintree-web_hosted-fields.html#~fieldOptions). Only `number`, `cvv`, `expirationDate` and `postalCode` can be configured. Each is a [Hosted Fields `field` object](http://braintree.github.io/braintree-web/3.74.0/module-braintree-web_hosted-fields.html#~field). `selector` cannot be modified.
+ * @param {object} [overrides.styles] The Hosted Fields [`styles` options](http://braintree.github.io/braintree-web/3.74.0/module-braintree-web_hosted-fields.html#~styleOptions). These can be used to add custom styles to the Hosted Fields iframes. To style the rest of Drop-in, [review the documentation for customizing Drop-in](https://developers.braintreepayments.com/guides/drop-in/customization/javascript/v3#customize-your-ui).
  * @param {boolean} [clearFieldsAfterTokenization=true] When false, the card form will not clear the card data when the customer returns to the card view after a successful tokenization.
@@ -148,3 +148,3 @@ * @param {object} [vault] Configuration for vaulting credit cards. Only applies when using a [client token with a customer id](https://developers.braintreepayments.com/reference/request/client-token/generate/#customer_id).
 
-/** @typedef {object} paypalCreateOptions The configuration options for PayPal and PayPalCredit. For a full list of options see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/3.73.1/PayPalCheckout.html#createPayment).
+/** @typedef {object} paypalCreateOptions The configuration options for PayPal and PayPalCredit. For a full list of options see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/3.74.0/PayPalCheckout.html#createPayment).
  *
@@ -247,3 +247,3 @@ * @param {string} flow Either `checkout` for a one-time [Checkout with PayPal](https://developers.braintreepayments.com/guides/paypal/checkout-with-paypal/javascript/v3) flow or `vault` for a [Vault flow](https://developers.braintreepayments.com/guides/paypal/vault/javascript/v3). Required when using PayPal or PayPal Credit.
  *
- * Some of the PayPal configuration options are listed [here](#~paypalCreateOptions), but for a full list see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/3.73.1/PayPalCheckout.html#createPayment).
+ * Some of the PayPal configuration options are listed [here](#~paypalCreateOptions), but for a full list see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/3.74.0/PayPalCheckout.html#createPayment).
  *
@@ -254,3 +254,3 @@ * PayPal is not [supported in Internet Explorer versions lower than 11](https://developer.paypal.com/docs/checkout/reference/faq/#which-browsers-does-paypal-checkout-support).
  *
- * Some of the PayPal Credit configuration options are listed [here](#~paypalCreateOptions), but for a full list see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/3.73.1/PayPalCheckout.html#createPayment). For more information on PayPal Credit, see the [Braintree Developer Docs](https://developers.braintreepayments.com/guides/paypal/paypal-credit/javascript/v3).
+ * Some of the PayPal Credit configuration options are listed [here](#~paypalCreateOptions), but for a full list see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/3.74.0/PayPalCheckout.html#createPayment). For more information on PayPal Credit, see the [Braintree Developer Docs](https://developers.braintreepayments.com/guides/paypal/paypal-credit/javascript/v3).
  *
@@ -295,3 +295,3 @@ * PayPal Credit is not [supported in Internet Explorer versions lower than 11](https://developer.paypal.com/docs/checkout/reference/faq/#which-browsers-does-paypal-checkout-support).
  *
- *     <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"></script>
+ *     <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"></script>
  *
@@ -335,3 +335,3 @@ *     <script>
  *
- *     <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"></script>
+ *     <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"></script>
  *
@@ -414,3 +414,3 @@ *     <script>
  *
- *     <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"></script>
+ *     <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"></script>
  *
@@ -633,3 +633,3 @@ *     <script>
   /**
-   * @description The current version of Drop-in, i.e. `1.26.1`.
+   * @description The current version of Drop-in, i.e. `1.27.0`.
    * @type {string}
@@ -636,0 +636,0 @@ */

lib/three-d-secure.js

@@ -7,6 +7,12 @@ 'use strict';
 var DEFAULT_ACS_WINDOW_SIZE = '03';
+var PASSTHROUGH_EVENTS = [
+  'customer-canceled',
+  'authentication-modal-render',
+  'authentication-modal-close'
+];
 
-function ThreeDSecure(client, merchantConfiguration) {
+function ThreeDSecure(client, model) {
   this._client = client;
-  this._config = merchantConfiguration;
+  this._model = model;
+  this._config = assign({}, model.merchantConfiguration.threeDSecure);
 }
@@ -22,2 +28,8 @@
     self._instance = instance;
+
+    PASSTHROUGH_EVENTS.forEach(function (eventName) {
+      self._instance.on(eventName, function (event) {
+        self._model._emit('3ds:' + eventName, event);
+      });
+    });
   });
@@ -24,0 +36,0 @@ };

package.json

 {
   "name": "braintree-web-drop-in",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "main": "index.js",
@@ -75,3 +75,3 @@ "scripts": {
     "@braintree/wrap-promise": "2.1.0",
-    "braintree-web": "3.73.1",
+    "braintree-web": "3.74.0",
     "promise-polyfill": "8.2.0"
@@ -78,0 +78,0 @@ },

README.md

@@ -38,3 +38,3 @@ # Braintree Web Drop-in
 
-    <script src="https://js.braintreegateway.com/web/dropin/1.26.1/js/dropin.min.js"></script>
+    <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"></script>
 
@@ -41,0 +41,0 @@ <script>

views/payment-sheet-views/apple-pay-view.js

@@ -29,4 +29,2 @@ 'use strict';
 
-  self.model.asyncDependencyStarting();
-
   return btApplePay.create({client: this.client}).then(function (applePayInstance) {
@@ -40,3 +38,3 @@ var buttonDiv = self.getElementById('apple-pay-button');
 
-    self.model.asyncDependencyReady();
+    self.model.asyncDependencyReady(ApplePayView.ID);
   }).catch(function (err) {
@@ -43,0 +41,0 @@ self.model.asyncDependencyFailed({

views/payment-sheet-views/base-paypal-view.js

@@ -37,3 +37,2 @@ 'use strict';
 
-  this.model.asyncDependencyStarting();
   asyncDependencyTimeoutHandler = setTimeout(function () {
@@ -98,3 +97,3 @@ self.model.asyncDependencyFailed({
     return global.paypal.Button.render(checkoutJSConfiguration, buttonSelector).then(function () {
-      self.model.asyncDependencyReady();
+      self.model.asyncDependencyReady(paypalType);
       setupComplete = true;
@@ -101,0 +100,0 @@ clearTimeout(asyncDependencyTimeoutHandler);

views/payment-sheet-views/card-view.js

@@ -76,4 +76,2 @@ 'use strict';
 
-  this.model.asyncDependencyStarting();
-
   return hostedFields.create(hfOptions).then(function (hostedFieldsInstance) {
@@ -93,3 +91,3 @@ this.hostedFieldsInstance = hostedFieldsInstance;
 
-    this.model.asyncDependencyReady();
+    this.model.asyncDependencyReady(CardView.ID);
   }.bind(this)).catch(function (err) {
@@ -96,0 +94,0 @@ this.model.asyncDependencyFailed({

views/payment-sheet-views/google-pay-view.js

@@ -28,5 +28,2 @@ 'use strict';
 
-  delete self.googlePayConfiguration.googlePayVersion;
-  delete self.googlePayConfiguration.merchantId;
-
   buttonOptions = assign({
@@ -46,3 +43,5 @@ buttonType: 'short'
 
-  self.model.asyncDependencyStarting();
+  delete self.googlePayConfiguration.googlePayVersion;
+  delete self.googlePayConfiguration.merchantId;
+  delete self.googlePayConfiguration.button;
 
@@ -61,3 +60,3 @@ return btGooglePay.create({
 
-    self.model.asyncDependencyReady();
+    self.model.asyncDependencyReady(GooglePayView.ID);
   }).catch(function (err) {
@@ -64,0 +63,0 @@ self.model.asyncDependencyFailed({

views/payment-sheet-views/venmo-view.js

@@ -22,4 +22,2 @@ 'use strict';
 
-  self.model.asyncDependencyStarting();
-
   return btVenmo.create(venmoConfiguration).then(function (venmoInstance) {
@@ -61,3 +59,3 @@ self.venmoInstance = venmoInstance;
 
-    self.model.asyncDependencyReady();
+    self.model.asyncDependencyReady(VenmoView.ID);
   }).catch(function (err) {
@@ -64,0 +62,0 @@ self.model.asyncDependencyFailed({

No alert changes

Improved metrics

Total package byte prevSize

1376145

increased by0.46%

Lines of code

27687

increased by0.51%

Dependency changes

• + Addedbraintree-web@3.74.0(transitive)

• - Removedbraintree-web@3.73.1(transitive)

• Updatedbraintree-web@3.74.0