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

Comparing version 1.23.0 to 1.24.0

CHANGELOG.md

 CHANGELOG
 =========
 
+1.24.0
+------
+
+- Use `@braintree/uuid` package for uuid generation
+- Update braintree-web to v3.65.0
+- Update @braintree/asset-loader to v0.4.4
+- Update @braintree/browser-detection to v1.10.0
+- Update @braintree/class-list to v0.2.0
+- Update @braintree/event-emitter to v0.4.1
+- Update @braintree/wrap-promise to v2.1.0
+- Fix issue where `threeDSecureInfo` was not included in `requestPaymentMethod` payload
+- Add `getAvailablePaymentOptions` method to list what payment options have been presented to the customer (closes #594)
+- Add support for the shadow DOM for the card view
+
 1.23.0
@@ -5,0 +19,0 @@ ------

dropin-model.js

@@ -29,2 +29,3 @@ 'use strict';
 function DropinModel(options) {
+  this.rootNode = options.container;
   this.componentID = options.componentID;
@@ -41,2 +42,7 @@ this.merchantConfiguration = options.merchantConfiguration;
 
+  while (this.rootNode.parentNode) {
+    this.rootNode = this.rootNode.parentNode;
+  }
+  this.isInShadowDom = this.rootNode.toString() === '[object ShadowRoot]';
+
   EventEmitter.call(this);
@@ -43,0 +49,0 @@ }

index.js

@@ -40,3 +40,3 @@ 'use strict';
  *     <form id="payment-form" action="/" method="post">
- *       <script src="https://js.braintreegateway.com/web/dropin/1.23.0/js/dropin.min.js"
+ *       <script src="https://js.braintreegateway.com/web/dropin/1.24.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.23.0/js/dropin.min.js"
+ *       <script src="https://js.braintreegateway.com/web/dropin/1.24.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.23.0/js/dropin.min.js"
+ *   <script src="https://js.braintreegateway.com/web/dropin/1.24.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.23.0/js/dropin.min.js"
+ *   <script src="https://js.braintreegateway.com/web/dropin/1.24.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.23.0/js/dropin.min.js"
+ *   <script src="https://js.braintreegateway.com/web/dropin/1.24.0/js/dropin.min.js"
  *    data-braintree-dropin-authorization="CLIENT_AUTHORIZATION"
@@ -120,11 +120,11 @@ *    data-card.cardholder-name.required="true"
 
-var VERSION = '1.23.0';
+var VERSION = '1.24.0';
 
 /**
- * @typedef {object} cardCreateOptions The configuration options for cards. Internally, Drop-in uses [Hosted Fields](http://braintree.github.io/braintree-web/3.63.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.
+ * @typedef {object} cardCreateOptions The configuration options for cards. Internally, Drop-in uses [Hosted Fields](http://braintree.github.io/braintree-web/3.65.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.63.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.63.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.63.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 {object} [overrides.fields] The Hosted Fields [`fields` options](http://braintree.github.io/braintree-web/3.65.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.65.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.65.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.
@@ -149,3 +149,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.63.0/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.65.0/PayPalCheckout.html#createPayment).
  *
@@ -237,3 +237,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.63.0/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.65.0/PayPalCheckout.html#createPayment).
  *
@@ -244,3 +244,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.63.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).
+ * 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.65.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).
  *
@@ -283,3 +283,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.23.0/js/dropin.min.js"></script>
+ *     <script src="https://js.braintreegateway.com/web/dropin/1.24.0/js/dropin.min.js"></script>
  *
@@ -323,3 +323,3 @@ *     <script>
  *
- *     <script src="https://js.braintreegateway.com/web/dropin/1.23.0/js/dropin.min.js"></script>
+ *     <script src="https://js.braintreegateway.com/web/dropin/1.24.0/js/dropin.min.js"></script>
  *
@@ -402,3 +402,3 @@ *     <script>
  *
- *     <script src="https://js.braintreegateway.com/web/dropin/1.23.0/js/dropin.min.js"></script>
+ *     <script src="https://js.braintreegateway.com/web/dropin/1.24.0/js/dropin.min.js"></script>
  *
@@ -621,3 +621,3 @@ *     <script>
   /**
-   * @description The current version of Drop-in, i.e. `1.23.0`.
+   * @description The current version of Drop-in, i.e. `1.24.0`.
    * @type {string}
@@ -624,0 +624,0 @@ */

lib/create-from-script-tag.js

@@ -5,3 +5,3 @@ 'use strict';
 var find = require('./find-parent-form');
-var uuid = require('./uuid');
+var uuid = require('@braintree/uuid');
 var DropinError = require('./dropin-error');
@@ -8,0 +8,0 @@ var kebabCaseToCamelCase = require('./kebab-case-to-camel-case');

package.json

 {
   "name": "braintree-web-drop-in",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "main": "index.js",
@@ -29,7 +29,7 @@ "scripts": {
     "@wdio/browserstack-service": "^6.1.15",
-    "@wdio/cli": "^6.1.25",
-    "@wdio/local-runner": "^6.1.25",
-    "@wdio/mocha-framework": "^6.1.19",
-    "@wdio/spec-reporter": "^6.1.23",
-    "@wdio/sync": "^6.1.14",
+    "@wdio/cli": "^6.3.6",
+    "@wdio/local-runner": "^6.3.6",
+    "@wdio/mocha-framework": "^6.3.6",
+    "@wdio/spec-reporter": "^6.3.6",
+    "@wdio/sync": "^6.3.6",
     "ansi-colors": "^4.1.0",
@@ -44,3 +44,3 @@ "brfs": "^2.0.2",
     "es6-shim": "^0.35.5",
-    "eslint": "^6.8.0",
+    "eslint": "^7.5.0",
     "eslint-config-braintree": "^4.0.0",
@@ -57,5 +57,4 @@ "fancy-log": "^1.3.3",
     "hint": "^5.3.3",
-    "is-uuid": "1.0.2",
-    "jest": "^26.1.0",
-    "jsdoc": "^3.6.4",
+    "jest": "^26.2.1",
+    "jsdoc": "^3.6.5",
     "jsdoc-template": "braintree/jsdoc-template#3.2.0",
@@ -66,3 +65,3 @@ "mkdirp": "^1.0.4",
     "serve-static": "^1.14.1",
-    "through2": "^3.0.1",
+    "through2": "^4.0.2",
     "vinyl": "^2.2.0",
@@ -74,8 +73,9 @@ "vinyl-source-stream": "^2.0.0",
   "dependencies": {
-    "@braintree/asset-loader": "0.3.1",
-    "@braintree/browser-detection": "1.9.0",
-    "@braintree/class-list": "0.1.0",
-    "@braintree/event-emitter": "0.3.0",
-    "@braintree/wrap-promise": "2.0.0",
-    "braintree-web": "3.63.0",
+    "@braintree/asset-loader": "0.4.4",
+    "@braintree/browser-detection": "1.10.0",
+    "@braintree/class-list": "0.2.0",
+    "@braintree/event-emitter": "0.4.1",
+    "@braintree/uuid": "0.1.0",
+    "@braintree/wrap-promise": "2.1.0",
+    "braintree-web": "3.65.0",
     "promise-polyfill": "8.1.3"
@@ -82,0 +82,0 @@ },

README.md

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

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

@@ -165,15 +165,15 @@ 'use strict';
       number: {
-        selector: this._generateFieldSelector('number'),
+        container: this._getFieldContainer('number'),
         placeholder: generateCardNumberPlaceholder()
       },
       expirationDate: {
-        selector: this._generateFieldSelector('expiration'),
+        container: this._getFieldContainer('expiration'),
         placeholder: this.strings.expirationDatePlaceholder
       },
       cvv: {
-        selector: this._generateFieldSelector('cvv'),
+        container: this._getFieldContainer('cvv'),
         placeholder: addBullets(3)
       },
       postalCode: {
-        selector: this._generateFieldSelector('postal-code')
+        container: this._getFieldContainer('postal-code')
       }
@@ -503,4 +503,10 @@ },
 
-CardView.prototype._generateFieldSelector = function (field) {
-  return '#braintree--dropin__' + this.model.componentID + ' .braintree-form-' + field;
+CardView.prototype._getFieldContainer = function (field) {
+  // we committed to not changing the data-braintree-id fields
+  // so we need to convert this field to the id used in the HTML
+  if (field === 'expiration') {
+    field = 'expiration-date';
+  }
+
+  return this.getElementById(field + '-field-group').querySelector('.braintree-form__hosted-field');
 };
@@ -507,0 +513,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1227670

increased by1.71%

Dev dependency count

39

decreased by-2.5%

Lines of code

24866

increased by1.46%

Worsened metrics

Dependency count

8

increased by14.29%

Number of package files

69

decreased by-1.43%

Dependency changes

• + Added@braintree/uuid@0.1.0

• + Added@braintree/asset-loader@0.4.4(transitive)

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

• + Added@braintree/class-list@0.2.0(transitive)

• + Added@braintree/event-emitter@0.4.1(transitive)

• + Added@braintree/extended-promise@0.4.0(transitive)

• + Added@braintree/iframer@1.1.0(transitive)

• + Added@braintree/sanitize-url@4.1.1(transitive)

• + Added@braintree/uuid@0.1.0(transitive)

• + Added@braintree/wrap-promise@2.1.0(transitive)

• + Addedbraintree-web@3.65.0(transitive)

• + Addedcard-validator@8.1.0(transitive)

• + Addedcredit-card-type@9.0.1(transitive)

• + Addedinject-stylesheet@4.0.0(transitive)

• + Addedrestricted-input@3.0.3(transitive)

• - Removed@braintree/asset-loader@0.3.1(transitive)

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

• - Removed@braintree/class-list@0.1.0(transitive)

• - Removed@braintree/event-emitter@0.3.0(transitive)

• - Removed@braintree/extended-promise@0.3.1(transitive)

• - Removed@braintree/iframer@1.0.3(transitive)

• - Removed@braintree/sanitize-url@4.0.1(transitive)

• - Removed@braintree/wrap-promise@2.0.0(transitive)

• - Removedbraintree-web@3.63.0(transitive)

• - Removedcard-validator@6.2.0(transitive)

• - Removedcredit-card-type@8.3.0(transitive)

• - Removedinject-stylesheet@2.0.0(transitive)

• - Removedrestricted-input@2.1.1(transitive)

• Updated@braintree/asset-loader@0.4.4

• Updated@braintree/browser-detection@1.10.0

• Updated@braintree/class-list@0.2.0

• Updated@braintree/event-emitter@0.4.1

• Updated@braintree/wrap-promise@2.1.0

• Updatedbraintree-web@3.65.0