radio styling

src/app/settings/settingsBillingChangePaymentController.js

@@ -45,11 +45,17 @@
 
         $scope.submit = function () {
             $scope.submitPromise = getPaymentToken($scope.card).then(function (token) {
+                if (!token) {
+                    throw 'No payment token.';
+                }
+
                 var request = {
                     paymentToken: token
                 };
 
                 return apiService.accounts.putPayment(null, request).$promise;
+            }, function (err) {
+                throw err;
             }).then(function (response) {
                 $scope.card = null;
                 if (existingPaymentMethod) {
@@ -73,6 +79,8 @@
             if ($scope.paymentMethod === 'paypal') {
                 return btInstance.requestPaymentMethod().then(function (payload) {
                     return payload.nonce;
+                }).catch(function (err) {
+                    throw err.message;
                 });
             }
             else {

src/app/settings/views/settingsBillingChangePayment.html

@@ -14,13 +14,13 @@
             </ul>
         </div>
         <div ng-if="showPaymentOptions">
-            <label class="radio-inline">
+            <label class="radio-inline radio-boxed">
                 <input type="radio" name="PaymentMethod" value="card" ng-model="paymentMethod"
-                       ng-change="changePaymentMethod('card')"> Credit Card
+                       ng-change="changePaymentMethod('card')"><i class="fa fa-fw fa-credit-card"></i> Credit Card
             </label>
-            <label class="radio-inline">
+            <label class="radio-inline radio-boxed">
                 <input type="radio" name="PaymentMethod" value="paypal" ng-model="paymentMethod"
-                       ng-change="changePaymentMethod('paypal')"> PayPal
+                       ng-change="changePaymentMethod('paypal')"><i class="fa fa-fw fa-paypal"></i> PayPal
             </label>
             <hr />
         </div>

src/app/settings/views/settingsPremium.html

@@ -89,13 +89,13 @@
                 <h3 class="box-title">Payment Information</h3>
             </div>
             <div class="box-body">
-                <label class="radio-inline">
+                <label class="radio-inline radio-lg radio-boxed">
                     <input type="radio" name="PaymentMethod" value="card" ng-model="paymentMethod"
-                           ng-change="changePaymentMethod()"> Credit Card
+                           ng-change="changePaymentMethod()"><i class="fa fa-fw fa-credit-card"></i> Credit Card
                 </label>
-                <label class="radio-inline">
+                <label class="radio-inline radio-lg radio-boxed">
                     <input type="radio" name="PaymentMethod" value="paypal" ng-model="paymentMethod"
-                           ng-change="changePaymentMethod()"> PayPal
+                           ng-change="changePaymentMethod()"><i class="fa fa-fw fa-paypal"></i> PayPal
                 </label>
                 <hr />
                 <div ng-if="paymentMethod === 'paypal'">

src/less/vault.less

@@ -332,6 +332,26 @@ form .btn .loading-icon {
     }
 }
 
+.radio-boxed {
+    border: 1px solid @table-border-color;
+    border-radius: 3px;
+    padding: 10px 10px 10px 30px;
+
+    @media (min-width: @screen-xs) {
+        padding: 10px 20px 10px 30px;
+
+        + .radio-lg {
+            margin-left: 20px;
+        }
+    }
+}
+
+.radio-lg {
+    @media (min-width: @screen-xs) {
+        font-size: @font-size-large;
+    }
+}
+
 /* Modals */
 
 .modal-footer {
@@ -620,10 +640,24 @@ h1, h2, h3, h4, h5, h6 {
     }
 }
 
-.braintree-placeholder {
+.braintree-placeholder, .braintree-sheet__header {
     display: none;
 }
 
+.braintree-sheet__content--button {
+    text-align: left;
+    padding: 0;
+    min-height: 0;
+}
+
+.braintree-sheet__container {
+    margin-bottom: 0;
+}
+
+.braintree-sheet {
+    border: none;
+}
+
 .clickable {
     cursor: pointer;
 }