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

Comparing version 1.4.0 to 1.5.0

CHANGELOG.md

 CHANGELOG
 =========
 
+1.5.0
+----------
+- Use version 3.20.1 of braintree-web
+- Update browser-detection to v1.6.0
+- Add `aria-label` attribute to payment options
+- Update checkout.js to v4.0.95
+- Add `clearSelectedPaymentMethod` to remove selected payment method
+
 1.4.0
@@ -16,2 +24,3 @@ ------
 - Use version 3.19.1 of braintree-web
+- Add `paymentMethodIsSelected` property on `paymentMethodRequestable` events
 - Improve UI in older versions of iOS Safari
@@ -18,0 +27,0 @@

constants.js

@@ -45,3 +45,3 @@ 'use strict';
   CHANGE_ACTIVE_PAYMENT_METHOD_TIMEOUT: 200,
-  CHECKOUT_JS_SOURCE: 'https://www.paypalobjects.com/api/checkout.4.0.82.min.js',
+  CHECKOUT_JS_SOURCE: 'https://www.paypalobjects.com/api/checkout.4.0.95.min.js',
   INTEGRATION: 'dropin2',
@@ -48,0 +48,0 @@ PAYPAL_CHECKOUT_SCRIPT_ID: 'braintree-dropin-paypal-checkout-script',

dropin-model.js

@@ -62,2 +62,10 @@ 'use strict';
 
+DropinModel.prototype.removeActivePaymentMethod = function () {
+  this._activePaymentMethod = null;
+  this._emit('removeActivePaymentMethod');
+  this.setPaymentMethodRequestable({
+    isRequestable: false
+  });
+};
+
 DropinModel.prototype.selectPaymentOption = function (paymentViewID) {
@@ -82,2 +90,6 @@ this._emit('paymentOptionSelected', {
   var shouldEmitEvent = this._shouldEmitRequestableEvent(options);
+  var paymentMethodRequestableResponse = {
+    paymentMethodIsSelected: Boolean(options.selectedPaymentMethod),
+    type: options.type
+  };
 
@@ -97,3 +109,3 @@ this._paymentMethodIsRequestable = options.isRequestable;
   if (options.isRequestable) {
-    this._emit('paymentMethodRequestable', {type: options.type});
+    this._emit('paymentMethodRequestable', paymentMethodRequestableResponse);
   } else {
@@ -100,0 +112,0 @@ this._emit('noPaymentMethodRequestable');

dropin.js

@@ -32,3 +32,3 @@ 'use strict';
 var DEFAULT_CHECKOUTJS_LOG_LEVEL = 'warn';
-var VERSION = "1.4.0";
+var VERSION = "1.5.0";
 
@@ -57,3 +57,6 @@ /**
  * @param {function} handler A callback to handle the event.
- * @description Subscribes a handler function to a named event. `event` should be {@link HostedFields#event:paymentMethodRequestable|`paymentMethodRequestable`} or {@link HostedFields#event:noPaymentMethodRequestable|`noPaymentMethodRequestable`}.
+ * @description Subscribes a handler function to a named event. `event` should be one of the following:
+ *  * [`paymentMethodRequestable`](#event:paymentMethodRequestable)
+ *  * [`noPaymentMethodRequestable`](#event:noPaymentMethodRequestable)
+ *  * [`paymentOptionSelected`](#event:paymentOptionSelected)
  * @returns {void}
@@ -83,2 +86,3 @@ * @example
  *     console.log(event.type); // The type of Payment Method, e.g 'CreditCard', 'PayPalAccount'.
+ *     console.log(event.paymentMethodIsSelected); // true if a customer has selected a payment method when paymentMethodRequestable fires
  *
@@ -92,2 +96,35 @@ *     submitButton.removeAttribute('disabled');
  * });
+ * @example
+ * <caption>Automatically submit nonce to server as soon as it becomes available</caption>
+ * var submitButton = document.querySelector('#submit-button');
+ *
+ * braintree.dropin.create({
+ *   authorization: 'CLIENT_AUTHORIZATION',
+ *   container: '#dropin-container'
+ * }, function (err, dropinInstance) {
+ *   function sendNonceToServer() {
+ *     dropinInstance.requestPaymentMethod(function (err, payload) {
+ *       if (err) {
+ *         // handle errors
+ *       }
+ *
+ *       // send payload.nonce to your server
+ *     });
+ *   }
+ *
+ *   // allows us to still request the payment method manually, such as
+ *   // when filling out a credit card form
+ *   submitButton.addEventListener('click', sendNonceToServer);
+ *
+ *   dropinInstance.on('paymentMethodRequestable', function (event) {
+ *     // if the nonce is already available (via PayPal authentication
+ *     // or by using a stored payment method), we can request the
+ *     // nonce right away. Otherwise, we wait for the customer to
+ *     // request the nonce by pressing the submit button once they
+ *     // are finished entering their credit card details
+ *     if (event.paymentMethodIsSelected) {
+ *       sendNonceToServer();
+ *     }
+ *   });
+ * });
  */
@@ -105,2 +142,7 @@
  * @property {string} type The type of payment method that is requestable. Either `CreditCard` or `PayPalAccount`.
+ * @property {boolean} paymentMethodIsSelected A property to determine if a payment method is currently selected when the payment method becomes requestable.
+ *
+ * This will be `true` any time a payment method is visably selected in the Drop-in UI, such as when PayPal authentication completes or a stored payment method is selected.
+ *
+ * This will be `false` when {@link Dropin#requestPaymentMethod|`requestPaymentMethod`} can be called, but a payment method is not currently selected. For instance, when a card form has been filled in with valid values, but has not been submitted to be converted into a payment method nonce.
  */
@@ -275,4 +317,2 @@
 Dropin.prototype.updateConfiguration = function (property, key, value) {
-  var isOnMethodsView, hasNoSavedPaymentMethods, hasOnlyOneSupportedPaymentOption;
-
   if (UPDATABLE_CONFIGURATION_OPTIONS.indexOf(property) === -1) {
@@ -288,9 +328,53 @@ return;
 
+  this._removeUnvaultedPaymentMethods(function (paymentMethod) {
+    return paymentMethod.type === constants.paymentMethodTypes[property];
+  });
+  this._navigateToInitialView();
+};
+
+/**
+ * Removes the currently selected payment method and returns the customer to the payment options view. Does not remove vaulted payment methods.
+ * @public
+ * @returns {void}
+ * @example
+ * dropinInstance.requestPaymentMethod(function (requestPaymentMethodError, payload) {
+ *   if (requestPaymentMethodError) {
+ *     // handle errors
+ *     return;
+ *   }
+ *
+ *   functionToSendNonceToServer(payload.nonce, function (transactionError, response) {
+ *     if (transactionError) {
+ *       // transaction sale with selected payment method failed
+ *       // clear the selected payment method and add a message
+ *       // to the checkout page about the failure
+ *       dropinInstance.clearSelectedPaymentMethod();
+ *       divForErrorMessages.textContent = 'my error message about entering a different payment method.';
+ *     } else {
+ *       // redirect to success page
+ *     }
+ *   });
+ * });
+ */
+Dropin.prototype.clearSelectedPaymentMethod = function () {
+  this._removeUnvaultedPaymentMethods();
+
+  this._navigateToInitialView();
+
+  this._model.removeActivePaymentMethod();
+};
+
+Dropin.prototype._removeUnvaultedPaymentMethods = function (filter) {
+  filter = filter || function () { return true; };
+
   this._model.getPaymentMethods().forEach(function (paymentMethod) {
-    if (paymentMethod.type === constants.paymentMethodTypes[property] && !paymentMethod.vaulted) {
+    if (filter(paymentMethod) && !paymentMethod.vaulted) {
       this._model.removePaymentMethod(paymentMethod);
     }
   }.bind(this));
+};
 
-  isOnMethodsView = this._mainView.primaryView.ID === paymentMethodsViewID;
+Dropin.prototype._navigateToInitialView = function () {
+  var hasNoSavedPaymentMethods, hasOnlyOneSupportedPaymentOption;
+  var isOnMethodsView = this._mainView.primaryView.ID === paymentMethodsViewID;
 
@@ -297,0 +381,0 @@ if (isOnMethodsView) {

index.js

@@ -86,5 +86,20 @@ 'use strict';
 
-var VERSION = "1.4.0";
+var VERSION = "1.5.0";
 
 /**
+ * @typedef {object} cardCreateOptions The configuration options for cards. Internally, Drop-in uses [Hosted Fields](http://braintree.github.io/braintree-web/{@pkg bt-web-version}/module-braintree-web_hosted-fields.html) to render the card form. The `overrides.fields` and `overrides.styles` allow the Hosted Fields to be customized.
+ *
+ * @property {object} [overrides.fields] The Hosted Fields [`fields` options](http://braintree.github.io/braintree-web/{@pkg bt-web-version}/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/{@pkg bt-web-version}/module-braintree-web_hosted-fields.html#~field). `selector` cannot be modified.
+ * @property {object} [overrides.styles] The Hosted Fields [`styles` options](http://braintree.github.io/braintree-web/{@pkg bt-web-version}/module-braintree-web_hosted-fields.html#~styleOptions).
+ */
+
+/** @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/{@pkg bt-web-version}/PayPalCheckout.html#createPayment).
+ *
+ * @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.
+ * @param {string|number} [amount] The amount of the transaction. Required when using the Checkout flow.
+ * @param {string} [currency] The currency code of the amount, such as `USD`. Required when using the Checkout flow.
+ * @param {string} [buttonStyle] The style object to apply to the PayPal button. Button customization includes color, shape, size, and label. The options [found here](https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/#button-styles) are available.
+ */
+
+/**
  * @static
@@ -125,20 +140,10 @@ * @function create
  *
- * @param {object} [options.card] The configuration options for cards. If this option is omitted, cards will still appear as a payment option. To remove cards as a payment option, use `paymentOptionPriority`. Internally, Drop-in uses [Hosted Fields](http://braintree.github.io/braintree-web/current/module-braintree-web_hosted-fields.html) to render the card form. The `overrides.fields` and `overrides.styles` configuration can be customized.
- * @param {object} [options.card.overrides.fields] The Hosted Fields [`fields` options](http://braintree.github.io/braintree-web/current/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/current/module-braintree-web_hosted-fields.html#~field). `selector` cannot be modified.
- * @param {object} [options.card.overrides.styles] The Hosted Fields [`styles` options](http://braintree.github.io/braintree-web/current/module-braintree-web_hosted-fields.html#~styleOptions).
+ * @param {object} [options.card] The configuration options for cards. See [`cardCreateOptions`](#~cardCreateOptions) for all `card` options. If this option is omitted, cards will still appear as a payment option. To remove cards as a payment option, use `paymentOptionPriority`.
  * @param {object} [options.paypal] The configuration options for PayPal. To include a PayPal option in your Drop-in integration, include the `paypal` parameter and [enable PayPal in the Braintree Control Panel](https://developers.braintreepayments.com/guides/paypal/testing-go-live/#go-live). To test in Sandbox, you will need to [link a PayPal sandbox test account to your Braintree sandbox account](https://developers.braintreepayments.com/guides/paypal/testing-go-live/#linked-paypal-testing).
  *
- * Some of the PayPal configuration options are listed here, but for a full list see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/{@pkg bt-web-version}/PayPalCheckout.html#createPayment).
- * @param {string} options.paypal.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.
- * @param {string|number} [options.paypal.amount] The amount of the transaction. Required when using the Checkout flow.
- * @param {string} [options.paypal.currency] The currency code of the amount, such as `USD`. Required when using the Checkout flow.
- * @param {string} [options.paypal.buttonStyle] The style object to apply to the PayPal button. The options [found here](https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/) are available.
+ * 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/{@pkg bt-web-version}/PayPalCheckout.html#createPayment).
  *
  * @param {object} [options.paypalCredit] The configuration options for PayPal Credit. To include a PayPal Credit option in your Drop-in integration, include the `paypalCredit` parameter and [enable PayPal in the Braintree Control Panel](https://developers.braintreepayments.com/guides/paypal/testing-go-live/#go-live).
  *
- * Some of the PayPal Credit configuration options are listed here, but for a full list see the [PayPal Checkout client reference options](http://braintree.github.io/braintree-web/{@pkg bt-web-version}/PayPalCheckout.html#createPayment). For more information on PayPal Credit, see the [Braintree Developer Docs](https://developers.braintreepayments.com/guides/paypal/paypal-credit/javascript/v3).
- * @param {string} [options.paypalCredit.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.
- * @param {string|number} [options.paypalCredit.amount] The amount of the transaction. Required when using the Checkout flow.
- * @param {string} [options.paypalCredit.currency] The currency code of the amount, such as `USD`. Required when using the Checkout flow.
- * @param {string} [options.paypalCredit.buttonStyle] The style object to apply to the PayPal Credit button. The options [found here](https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/) are available. The `label` property cannot be adjusted.
+ * 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/{@pkg bt-web-version}/PayPalCheckout.html#createPayment). For more information on PayPal Credit, see the [Braintree Developer Docs](https://developers.braintreepayments.com/guides/paypal/paypal-credit/javascript/v3).
  * @param {function} [callback] The second argument, `data`, is the {@link Dropin} instance. Returns a promise if no callback is provided.
@@ -145,0 +150,0 @@ * @returns {void|Promise} Returns a promise if no callback is provided.

package.json

 {
   "name": "braintree-web-drop-in",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "index.js",
@@ -13,2 +13,5 @@ "scripts": {
     "test:integration": ". ./.env && bundle exec rake sauce:spec test_files=spec",
+    "test:integration:paypal-only": "RUN_PAYPAL_ONLY=true npm run test:integration",
+    "test:integration:paypal-skipped": "SKIP_PAYPAL=true npm run test:integration",
+    "test:publishing": "mocha test/publishing",
     "deploy:gh-pages": "./scripts/deploy-gh-pages"
@@ -62,4 +65,4 @@ },
   "dependencies": {
-    "braintree-web": "3.19.1",
-    "@braintree/browser-detection": "1.4.1",
+    "braintree-web": "3.20.1",
+    "@braintree/browser-detection": "1.6.0",
     "promise-polyfill": "6.0.2",
@@ -66,0 +69,0 @@ "@braintree/wrap-promise": "1.1.1"

views/main-view.js

@@ -109,2 +109,10 @@ 'use strict';
 
+  this.model.on('removeActivePaymentMethod', function () {
+    var activePaymentView = this.getView(this.model.getActivePaymentView());
+
+    if (activePaymentView && typeof activePaymentView.removeActivePaymentMethod === 'function') {
+      activePaymentView.removeActivePaymentMethod();
+    }
+  }.bind(this));
+
   if (hasMultiplePaymentOptions) {
@@ -174,3 +182,4 @@ paymentOptionsView = new PaymentOptionsView({
     isRequestable: Boolean(paymentMethod),
-    type: paymentMethod && paymentMethod.type
+    type: paymentMethod && paymentMethod.type,
+    selectedPaymentMethod: paymentMethod
   });
@@ -177,0 +186,0 @@

views/payment-methods-view.js

@@ -5,2 +5,5 @@ 'use strict';
 var PaymentMethodView = require('./payment-method-view');
+var DropinError = require('../lib/dropin-error');
+var classlist = require('../lib/classlist');
+var errors = require('../constants').errors;
 var Promise = require('../lib/promise');
@@ -40,2 +43,11 @@
 
+PaymentMethodsView.prototype.removeActivePaymentMethod = function () {
+  if (!this.activeMethodView) {
+    return;
+  }
+  this.activeMethodView.setActive(false);
+  this.activeMethodView = null;
+  classlist.add(this._headingLabel, 'braintree-no-payment-method-selected');
+};
+
 PaymentMethodsView.prototype._getPaymentMethodString = function () {
@@ -98,5 +110,9 @@ var stringKey = PAYMENT_METHOD_TYPE_TO_TRANSLATION_STRING[this.activeMethodView.paymentMethod.type];
   this.activeMethodView.setActive(true);
+  classlist.remove(this._headingLabel, 'braintree-no-payment-method-selected');
 };
 
 PaymentMethodsView.prototype.requestPaymentMethod = function () {
+  if (!this.activeMethodView) {
+    return Promise.reject(new DropinError(errors.NO_PAYMENT_METHOD_ERROR));
+  }
   return Promise.resolve(this.activeMethodView.paymentMethod);
@@ -103,0 +119,0 @@ };

views/payment-options-view.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var paymentMethodOptionHTML = "<div class=\"braintree-option__logo\">\n  <svg width=\"48\" height=\"29\" class=\"@CLASSNAME\">\n    <use xlink:href=\"#@ICON\"></use>\n  </svg>\n</div>\n\n<div class=\"braintree-option__label\">\n  @OPTION_TITLE\n  <div class=\"braintree-option__disabled-message\"></div>\n</div>\n";
+var paymentMethodOptionHTML = "<div class=\"braintree-option__logo\">\n  <svg width=\"48\" height=\"29\" class=\"@CLASSNAME\">\n    <use xlink:href=\"#@ICON\"></use>\n  </svg>\n</div>\n\n<div class=\"braintree-option__label\" aria-label=\"@OPTION_LABEL\">\n  @OPTION_TITLE\n  <div class=\"braintree-option__disabled-message\"></div>\n</div>\n";
 
@@ -32,2 +32,3 @@ function PaymentOptionsView() {
 PaymentOptionsView.prototype._addPaymentOption = function (paymentOptionID) {
+  var paymentSource;
   var div = document.createElement('div');
@@ -46,8 +47,12 @@ var html = paymentMethodOptionHTML;
     case paymentOptionIDs.card:
+      paymentSource = this.strings.Card;
       html = html.replace(/@ICON/g, 'iconCardFront');
-      html = html.replace(/@OPTION_TITLE/g, this.strings.Card);
+      html = html.replace(/@OPTION_LABEL/g, this._generateOptionLabel(paymentSource));
+      html = html.replace(/@OPTION_TITLE/g, paymentSource);
       html = html.replace(/@CLASSNAME/g, 'braintree-icon--bordered');
       break;
     case paymentOptionIDs.paypal:
+      paymentSource = this.strings.PayPal;
       html = html.replace(/@ICON/g, 'logoPayPal');
+      html = html.replace(/@OPTION_LABEL/g, this._generateOptionLabel(this.strings.PayPal));
       html = html.replace(/@OPTION_TITLE/g, this.strings.PayPal);
@@ -57,4 +62,6 @@ html = html.replace(/@CLASSNAME/g, '');
     case paymentOptionIDs.paypalCredit:
+      paymentSource = this.strings['PayPal Credit'];
       html = html.replace(/@ICON/g, 'logoPayPalCredit');
-      html = html.replace(/@OPTION_TITLE/g, this.strings['PayPal Credit']);
+      html = html.replace(/@OPTION_LABEL/g, this._generateOptionLabel(paymentSource));
+      html = html.replace(/@OPTION_TITLE/g, paymentSource);
       html = html.replace(/@CLASSNAME/g, '');
@@ -77,2 +84,6 @@ break;
 
+PaymentOptionsView.prototype._generateOptionLabel = function (paymentSourceString) {
+  return this.strings.payingWith.replace('{{paymentSource}}', paymentSourceString);
+};
+
 module.exports = PaymentOptionsView;

No alert changes

Improved metrics

Total package byte prevSize

234329

increased by2.53%

Lines of code

4407

increased by2.99%

Dependency changes

• + Added@braintree/browser-detection@1.6.0(transitive)

• + Addedbraintree-web@3.20.1(transitive)

• + Addedrestricted-input@1.2.5(transitive)

• - Removed@braintree/browser-detection@1.4.1(transitive)

• - Removedbraintree-web@3.19.1(transitive)

• - Removedrestricted-input@1.2.4(transitive)

• Updated@braintree/browser-detection@1.6.0

• Updatedbraintree-web@3.20.1