bank account payment method for orgs

src/app/organization/organizationBillingChangePaymentController.js

@@ -6,11 +6,30 @@
         $analytics.eventTrack('organizationBillingChangePaymentController', { category: 'Modal' });
         $scope.existingPaymentMethod = existingPaymentMethod;
         $scope.paymentMethod = 'card';
-        $scope.showPaymentOptions = false;
+        $scope.showPaymentOptions = true;
+        $scope.hidePaypal = true;
         $scope.card = {};
+        $scope.bank = {};
+
+        $scope.changePaymentMethod = function (val) {
+            $scope.paymentMethod = val;
+        };
 
         $scope.submit = function () {
-            $scope.submitPromise = stripe.card.createToken($scope.card).then(function (response) {
+            var stripeReq = null;
+            if ($scope.paymentMethod === 'card') {
+                stripeReq = stripe.card.createToken($scope.card);
+            }
+            else if ($scope.paymentMethod === 'bank') {
+                $scope.bank.currency = 'USD';
+                $scope.bank.country = 'US';
+                stripeReq = stripe.bankAccount.createToken($scope.bank);
+            }
+            else {
+                return;
+            }
+
+            $scope.submitPromise = stripeReq.then(function (response) {
                 var request = {
                     paymentToken: response.id
                 };

src/app/organization/organizationBillingController.js

@@ -80,6 +80,18 @@
             });
         };
 
+        $scope.verifyBank = function () {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/organization/views/organizationBillingVerifyBank.html',
+                controller: 'organizationBillingVerifyBankController'
+            });
+
+            modal.result.then(function () {
+                load();
+            });
+        };
+
         $scope.cancel = function () {
             if (!confirm('Are you sure you want to cancel? All users will lose access to the organization ' +
                 'at the end of this billing cycle.')) {
@@ -167,7 +179,8 @@
                     $scope.paymentSource = {
                         type: org.PaymentSource.Type,
                         description: org.PaymentSource.Description,
-                        cardBrand: org.PaymentSource.CardBrand
+                        cardBrand: org.PaymentSource.CardBrand,
+                        needsVerification: org.PaymentSource.NeedsVerification
                     };
                 }
 

src/app/organization/organizationBillingVerifyBankController.js

@@ -0,0 +1,25 @@
+angular
+    .module('bit.organization')
+
+    .controller('organizationBillingVerifyBankController', function ($scope, $state, $uibModalInstance, apiService,
+        $analytics, toastr) {
+        $analytics.eventTrack('organizationBillingVerifyBankController', { category: 'Modal' });
+
+        $scope.submit = function () {
+            var request = {
+                amount1: $scope.amount1,
+                amount2: $scope.amount2
+            };
+
+            $scope.submitPromise = apiService.organizations.postVerifyBank({ id: $state.params.orgId }, request)
+                .$promise.then(function (response) {
+                    $analytics.eventTrack('Verified Bank Account');
+                    toastr.success('You have successfully verified your bank account.');
+                    $uibModalInstance.close();
+                });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/organization/views/organizationBilling.html

@@ -140,6 +140,15 @@
                 <i class="fa fa-credit-card"></i> No payment method on file.
             </div>
             <div ng-show="!loading && paymentSource">
+                <div class="callout callout-warning" ng-if="paymentSource.type === 1 && paymentSource.needsVerification">
+                    <h4><i class="fa fa-warning"></i> You must verify your bank account</h4>
+                    <p>
+                        We have made two micro-deposits to your bank account (it may take 1-2 business days to show up).
+                        Enter these amounts to verify the bank account. Failure to verify the bank account will result in a
+                        missed payment and your organization being disabled.
+                    </p>
+                    <button class="btn btn-default btn-flat" ng-click="verifyBank()">Verify Now</button>
+                </div>
                 <i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
                    'fa-university': paymentSource.type === 1, 'fa-paypal fa-fw text-blue': paymentSource.type === 2}"></i>
                 {{paymentSource.description}}

src/app/organization/views/organizationBillingVerifyBank.html

@@ -0,0 +1,43 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h4 class="modal-title">
+        <i class="fa fa-check-square-o"></i>
+        Verify Bank Account
+    </h4>
+</div>
+<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
+    <div class="modal-body">
+        <p>
+            Enter the two micro-deposit amounts from your bank account. Both amounts will be less than $1.00 each.
+            For example, if we deposited $0.32 and $0.45 you would enter the values "32" and "45".
+        </p>
+        <div class="callout callout-danger validation-errors" ng-show="form.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in form.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group">
+            <label for="amount1">Amount 1</label>
+            <div class="input-group">
+                <span class="input-group-addon">$ 0.</span>
+                <input type="number" id="amount1" name="Amount1" ng-model="amount1" class="form-control"
+                       required min="1" max="99" placeholder="xx" />
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="amount2">Amount 2</label>
+            <div class="input-group">
+                <span class="input-group-addon">$ 0.</span>
+                <input type="number" id="amount2" name="Amount2" ng-model="amount2" class="form-control"
+                       required min="1" max="99" placeholder="xx" />
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>