Release braintree-web 3.117.0 source

Co-authored-by: Iris Booker <ibooker@paypal.com>

Author: braintreeps

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 3.117.0
+
+- Venmo
+  - Add missing analytics events for Popup Bridge
+  - Add `styleCspNonce` option to provide nonce to whitelist injected style in content support policy.
+- Fraudnet
+  - Add new option `cb1` to `dataCollector.create()` to allow specifying a callback name that will be invoked when fraudnet has finished initializing.
+
 ## 3.116.3
 
 - PayPal Checkout

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "braintree-web",
-  "version": "3.116.3",
+  "version": "3.117.0",
   "license": "MIT",
   "main": "src/index.js",
   "private": true,

package.json

@@ -129,10 +129,10 @@ release_source() {
   set +e
 
   local CP_CMD="cp"
-  if [[ "$(uname)"="Darwin" ]]; then
+  #if [[ "$(uname)"="Darwin" ]]; then
     # Coreutils version of cp supports --parents, mac default one doesn't
-    CP_CMD="gcp"
-  fi
+  #  CP_CMD="gcp"
+  #fi
 
   git ls-files | egrep -v "$(join '|' $SOURCE_IGNORES)" | xargs "$CP_CMD" --parents -t "$BRAINTREE_JS_SOURCE_DEST"
   echo -e "Applied source changes in ${BLUE}$BRAINTREE_JS_SOURCE_DEST${RESET}."

scripts/release

@@ -47,7 +47,8 @@ Fraudnet.prototype.initialize = function (options) {
   this._parameterBlock = _createParameterBlock(
     this.sessionId,
     this._beaconId,
-    environment
+    environment,
+    options.cb1
   );
 
   return loadScript({
@@ -94,12 +95,13 @@ function _generateBeaconId(sessionId) {
   );
 }
 
-function _createParameterBlock(sessionId, beaconId, environment) {
+function _createParameterBlock(sessionId, beaconId, environment, cb1) {
   var el = document.body.appendChild(document.createElement("script"));
   var config = {
     f: sessionId,
     s: FRAUDNET_SOURCE,
     b: beaconId,
+    cb1: cb1,
   };
 
   // for some reason, the presence of the sandbox

src/data-collector/fraudnet.js

@@ -90,6 +90,7 @@ var errors = require("./errors");
  * @param {string} [options.riskCorrelationId] Pass a custom risk correlation id when creating the data collector.
  * @param {string} [options.clientMetadataId] Deprecated. Use `options.riskCorrelationId` instead.
  * @param {string} [options.correlationId] Deprecated. Use `options.riskCorrelationId` instead.
+ * @param {string} [options.cb1] Callback name for fraudnet that will be invoked on the window object when fraudnet is finished initializing.
  * @param {callback} [callback] The second argument, `data`, is the {@link DataCollector} instance.
  * @returns {(Promise|void)} Returns a promise that resolves the {@link DataCollector} instance if no callback is provided.
  */
@@ -127,6 +128,7 @@ function create(options) {
                 options.correlationId,
               clientSessionId: clientConfiguration.analyticsMetadata.sessionId,
               environment: clientConfiguration.gatewayConfiguration.environment,
+              cb1: options.cb1,
             })
             .then(function (fraudnetInstance) {
               if (fraudnetInstance) {

src/data-collector/index.js

@@ -52,6 +52,7 @@ var VERSION = process.env.npm_package_version;
  * @param {boolean} [options.allowDesktop] Used to support desktop users. When enabled, the default mode is to render a scannable QR-code customers scan with their phone's to approve via the mobile app.
  * @param {boolean} [options.allowDesktopWebLogin=false] When `true`, the customer will authorize payment via a window popup that allows them to sign in to their Venmo account. This is used explicitly for customers operating from desktop browsers wanting to avoid the QR Code flow.
  * @param {boolean} [options.mobileWebFallBack] Use this option when you want to use a web-login experience, such as if on mobile and the Venmo app isn't installed.
+ * @param {string} [options.styleCspNonce] specify a nonce for style code used by Venmo. This option requires either the option `allowDesktopWebLogin=true` or `mobileWebFallback=true`. This nonce should also appear in the `style-src` section of the content security policy. See more about nonces [here]{https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP#nonces}. 
  * @param {boolean} [options.allowAndroidRecreation=true] This flag is for when your integration uses the [Android PopupBridge](https://github.com/braintree/popup-bridge-android). Setting this flag to false will avoid a page refresh when returning to your page after payment authorization. If not specified, it defaults to true and the Android activity will be recreated, resulting in a page refresh.
  * @param {boolean} [options.collectCustomerBillingAddress] When `true`, the customer's billing address will be collected and displayed on the Venmo paysheet (provided the Enriched Customer Data checkbox is also enabled for the merchant account).
  * @param {boolean} [options.collectCustomerShippingAddress] When `true`, the customer's shipping address will be collected and displayed on the Venmo paysheet (provided the Enriched Customer Data checkbox is also enabled for the merchant account).

src/venmo/index.js

@@ -201,7 +201,7 @@ function getElementStyles() {
   return allStyles.join("\n");
 }
 
-function buildAndStyleElements() {
+function buildAndStyleElements(styleCspNonce) {
   var alreadyRenderedBackdrop = document.getElementById(ELEMENT_IDS.backdrop);
   var backdropStylesElement,
     backdropDiv,
@@ -226,6 +226,9 @@ function buildAndStyleElements() {
   continueButton = document.createElement("button");
   cancelButton = document.createElement("button");
 
+  if (styleCspNonce) {
+    backdropStylesElement.nonce = styleCspNonce;
+  }
   backdropStylesElement.id = "venmo-desktop-web__injected-styles";
   backdropStylesElement.innerHTML = getElementStyles();
 
@@ -274,7 +277,7 @@ function buildAndStyleElements() {
  * @returns {Promise} Returns a promise
  */
 function runWebLogin(options) {
-  buildAndStyleElements();
+  buildAndStyleElements(options.styleCspNonce);
 
   return openPopup(options);
 }

src/venmo/shared/web-login-backdrop.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var analytics = require("../lib/analytics");
+var assign = require("../lib/assign").assign;
 var isBrowserSupported = require("./shared/supports-venmo");
 var browserDetection = require("./shared/browser-detection");
 var constants = require("./shared/constants");
@@ -82,6 +83,9 @@ function Venmo(options) {
   this._taxAmount = options.taxAmount;
   this._shippingAmount = options.shippingAmount;
   this._totalAmount = options.totalAmount;
+  this._cspNonce =
+    (this._mobileWebFallBack || this._allowDesktop) &&
+    (options.styleCspNonce || false);
 
   this._shouldCreateVenmoPaymentContext =
     this._cannotHaveReturnUrls || !this._shouldUseLegacyFlow;
@@ -605,7 +609,7 @@ Venmo.prototype.tokenize = function (options) {
      *
      * This is an alternate, opt-in flow to be used the Desktop QR Flow is not desired for Pay with Venmo desktop experiences.
      */
-    tokenizationPromise = this._tokenizeWebLoginWithRedirect();
+    tokenizationPromise = this._tokenizeWebLoginWithRedirect(options);
   } else if (this._cannotHaveReturnUrls) {
     // in the manual return strategy, we create the payment
     // context on initialization, then continually poll once
@@ -719,23 +723,30 @@ Venmo.prototype.cancelTokenization = function () {
 
 Venmo.prototype._tokenizeWebLoginWithRedirect = function () {
   var self = this;
+  var webLoginOptions;
 
   analytics.sendEvent(self._createPromise, "venmo.tokenize.web-login.start", {
     paypal_context_id: self._venmoPaymentContextId,
   });
   this._tokenizePromise = new ExtendedPromise();
 
   return this.getUrl().then(function (url) {
+    webLoginOptions = {
+      checkForStatusChange:
+        self._checkPaymentContextStatusAndProcessResult.bind(self),
+      cancelTokenization: self.cancelTokenization.bind(self),
+      frameServiceInstance: self._frameServiceInstance,
+      venmoUrl: url,
+      debug: self._isDebug,
+      checkPaymentContextStatus: self._checkPaymentContextStatus.bind(self),
+    };
+    if (self._cspNonce) {
+      webLoginOptions = assign({}, webLoginOptions, {
+        styleCspNonce: self._cspNonce,
+      });
+    }
     desktopWebLogin
-      .runWebLogin({
-        checkForStatusChange:
-          self._checkPaymentContextStatusAndProcessResult.bind(self),
-        cancelTokenization: self.cancelTokenization.bind(self),
-        frameServiceInstance: self._frameServiceInstance,
-        venmoUrl: url,
-        debug: self._isDebug,
-        checkPaymentContextStatus: self._checkPaymentContextStatus.bind(self),
-      })
+      .runWebLogin(webLoginOptions)
       .then(function (payload) {
         analytics.sendEvent(
           self._createPromise,
@@ -1249,6 +1260,13 @@ Venmo.prototype.processHashChangeFlowResults = function (hash) {
             }
           );
 
+          if (window.popupBridge) {
+            analytics.sendEvent(
+              self._createPromise,
+              "popup-bridge:venmo:succeeded"
+            );
+          }
+
           return resolve({
             paymentMethodNonce: payload.paymentMethodId,
             username: payload.userName,
@@ -1260,8 +1278,19 @@ Venmo.prototype.processHashChangeFlowResults = function (hash) {
           if (
             err.type === errors.VENMO_MOBILE_POLLING_TOKENIZATION_CANCELED.type
           ) {
+            if (window.popupBridge) {
+              analytics.sendEvent(
+                self._createPromise,
+                "popup-bridge:venmo:canceled"
+              );
+            }
             // We want to reject in this case because if it the process was canceled, we don't want to take the happy path
             reject(err);
+          } else if (window.popupBridge) {
+            analytics.sendEvent(
+              self._createPromise,
+              "popup-bridge:venmo:failed"
+            );
           }
 
           analytics.sendEvent(
@@ -1280,9 +1309,21 @@ Venmo.prototype.processHashChangeFlowResults = function (hash) {
         "venmo.appswitch.handle.success"
       );
 
+      if (window.popupBridge) {
+        analytics.sendEvent(
+          self._createPromise,
+          "popup-bridge:venmo:succeeded"
+        );
+      }
+
       resolve(params);
     } else if (params.venmoError) {
       analytics.sendEvent(self._createPromise, "venmo.appswitch.handle.error");
+
+      if (window.popupBridge) {
+        analytics.sendEvent(self._createPromise, "popup-bridge:venmo:failed");
+      }
+
       reject(
         new BraintreeError({
           type: errors.VENMO_APP_FAILED.type,
@@ -1298,6 +1339,11 @@ Venmo.prototype.processHashChangeFlowResults = function (hash) {
       );
     } else if (params.venmoCancel) {
       analytics.sendEvent(self._createPromise, "venmo.appswitch.handle.cancel");
+
+      if (window.popupBridge) {
+        analytics.sendEvent(self._createPromise, "popup-bridge:venmo:canceled");
+      }
+
       reject(new BraintreeError(errors.VENMO_APP_CANCELED));
     } else {
       // User has either manually switched back to browser, or app is not available for app switch

src/venmo/venmo.js

@@ -23,7 +23,11 @@ describe("FraudNet", () => {
   });
 
   it("contains expected values in parsed data", async () => {
-    const result = await fraudNet.setup({ sessionId: "fake-sessionID" });
+    const testCallback = "testCallback";
+    const result = await fraudNet.setup({
+      sessionId: "fake-sessionID",
+      cb1: testCallback,
+    });
 
     const sessionId = result.sessionId;
     const el = document.querySelector('[fncls][type="application/json"]');
@@ -32,6 +36,7 @@ describe("FraudNet", () => {
     expect(parsedData.b).toContain(sessionId);
     expect(parsedData.f).toBe(sessionId);
     expect(parsedData.s).toBe("BRAINTREE_SIGNIN");
+    expect(parsedData.cb1).toBe(testCallback);
     expect(parsedData.sandbox).toBe(true);
   });