Emit paymentMethodRequestable event after 3DS Challenge is completed

CHANGELOG.md

@@ -1,7 +1,10 @@
 # CHANGELOG
 
 ## UNRELEASED
-  - Apple Pay: add error message prompting the customer to click the Apple Pay button when `requestPaymentMethod` is called.
+  - Apple Pay
+    - add error message prompting the customer to click the Apple Pay button when `requestPaymentMethod` is called.
+  - 3D Secure
+    - Fix issue where `paymentMethodRequestable` event would fire before 3DS challenge has been completed. (closes [#805](https://github.com/braintree/braintree-web-drop-in/issues/805))
 
 ## 1.41.0
   - Update braintree-web to 3.97.4

src/dropin-model.js

@@ -52,6 +52,7 @@ function DropinModel(options) {
   this.failedDependencies = {};
   this._options = options;
   this._setupComplete = false;
+  this._shouldWaitForVerifyCard = false;
 
   while (this.rootNode.parentNode) {
     this.rootNode = this.rootNode.parentNode;
@@ -98,6 +99,10 @@ DropinModel.prototype.confirmDropinReady = function () {
   this._setupComplete = true;
 };
 
+DropinModel.prototype.verifyCardReady = function () {
+  this._shouldWaitForVerifyCard = !this._shouldWaitForVerifyCard;
+};
+
 DropinModel.prototype.isPaymentMethodRequestable = function () {
   return Boolean(this._paymentMethodIsRequestable);
 };
@@ -223,6 +228,10 @@ DropinModel.prototype._shouldEmitRequestableEvent = function (options) {
     return false;
   }
 
+  if (this._shouldWaitForVerifyCard) {
+    return false;
+  }
+
   if (requestableStateHasNotChanged && (!options.isRequestable || nonceHasNotChanged)) {
     return false;
   }

src/dropin.js

@@ -876,10 +876,16 @@ Dropin.prototype.requestPaymentMethod = function (options) {
       self._mainView.showLoadingIndicator();
 
       return self._threeDSecure.verify(payload, options.threeDSecure).then(function (newPayload) {
+        self._model.verifyCardReady();
         payload.nonce = newPayload.nonce;
         payload.liabilityShifted = newPayload.liabilityShifted;
         payload.liabilityShiftPossible = newPayload.liabilityShiftPossible;
         payload.threeDSecureInfo = newPayload.threeDSecureInfo;
+        self._model.setPaymentMethodRequestable({
+          isRequestable: Boolean(newPayload),
+          type: newPayload.type,
+          selectedPaymentMethod: payload
+        });
 
         self._mainView.hideLoadingIndicator();
 

src/lib/three-d-secure.js

@@ -44,7 +44,7 @@
   }, merchantProvidedData, {
     nonce: payload.nonce,
     bin: payload.details.bin,
     // TODO in the future, we will allow
     // merchants to pass in a custom
     // onLookupComplete hook
     onLookupComplete: function (data, next) {
@@ -54,6 +54,7 @@
 
   verifyOptions.additionalInformation = verifyOptions.additionalInformation || {};
   verifyOptions.additionalInformation.acsWindowSize = verifyOptions.additionalInformation.acsWindowSize || DEFAULT_ACS_WINDOW_SIZE;
+  this._model.verifyCardReady();
 
   return this._instance.verifyCard(verifyOptions);
 };

test/unit/dropin-model.js

@@ -208,6 +208,22 @@ describe('DropinModel', () => {
     });
   });
 
+  describe('verifyCardReady', () => {
+    test('toggles _shouldWaitForVerifyCard from true to false', () => {
+      const model = new DropinModel(testContext.modelOptions);
+
+      expect(model._shouldWaitForVerifyCard).toBe(false);
+
+      model.verifyCardReady();
+
+      expect(model._shouldWaitForVerifyCard).toBe(true);
+
+      model.verifyCardReady();
+
+      expect(model._shouldWaitForVerifyCard).toBe(false);
+    });
+  });
+
   describe('initialize', () => {
     test('emits asyncDependenciesReady event when no dependencies are set to initializing', (done) => {
       jest.useFakeTimers();
@@ -1084,6 +1100,31 @@ describe('DropinModel', () => {
       }
     );
 
+    test(
+      'does not emit paymentMethodRequestable event until after three D secure verification has been completed',
+      () => {
+        testContext.model._shouldWaitForVerifyCard = true;
+        testContext.model.setPaymentMethodRequestable({
+          isRequestable: true,
+          type: 'card'
+        });
+
+        expect(testContext.model._emit).not.toBeCalled();
+
+        testContext.model._shouldWaitForVerifyCard = false;
+
+        testContext.model.setPaymentMethodRequestable({
+          isRequestable: true,
+          type: 'card',
+          selectedPaymentMethod: {
+            nonce: 'fake-nonce'
+          }
+        });
+
+        expect(testContext.model._emit).toBeCalled();
+      }
+    );
+
     test(
       'sets isPaymentMethodRequestable to false when isRequestable is false',
       () => {

test/unit/dropin.js

@@ -1212,6 +1212,44 @@ describe('Dropin', () => {
       }
     );
 
+    test('calls verifyCardReady and setPaymentMethodRequestable when 3D secure is called', done => {
+      let instance;
+      const fakePayload = {
+        nonce: 'cool-nonce',
+        type: 'CreditCard'
+      };
+      const fakeNewPayload = {
+        nonce: 'new-nonce',
+        liabilityShifted: true,
+        liabilityShiftPossible: true,
+        type: fakePayload.type
+      };
+
+      testContext.dropinOptions.merchantConfiguration.threeDSecure = {};
+
+      instance = new Dropin(testContext.dropinOptions);
+
+      instance._initialize(() => {
+        jest.spyOn(instance._mainView, 'requestPaymentMethod').mockResolvedValue(fakePayload);
+        jest.spyOn(instance._model, 'verifyCardReady').mockResolvedValue();
+        jest.spyOn(instance._model, 'setPaymentMethodRequestable').mockResolvedValue();
+        instance._threeDSecure = {
+          verify: jest.fn().mockResolvedValue(fakeNewPayload)
+        };
+
+        instance.requestPaymentMethod(() => {
+          expect(instance._model.verifyCardReady).toBeCalled();
+          expect(instance._model.setPaymentMethodRequestable).toBeCalledWith({
+            isRequestable: true,
+            type: fakeNewPayload.type,
+            selectedPaymentMethod: fakeNewPayload
+          });
+
+          done();
+        });
+      });
+    });
+
     test(
       'does not call 3D Secure if network tokenized google pay',
       done => {

test/unit/lib/three-d-secure.js

@@ -119,6 +119,19 @@ describe('ThreeDSecure', () => {
       });
     });
 
+    test('calls verifyCardReady', () => {
+      jest.spyOn(testContext.model, 'verifyCardReady').mockResolvedValue();
+
+      return testContext.tds.verify({
+        nonce: 'old-nonce',
+        details: {
+          bin: '123456'
+        }
+      }).then(() => {
+        expect(testContext.model.verifyCardReady).toBeCalled();
+      });
+    });
+
     test('rejects if verifyCard rejects', () => {
       testContext.threeDSecureInstance.verifyCard.mockRejectedValue({
         message: 'A message'