diff --git a/static/directives/billing-options.html b/static/directives/billing-options.html
index ba5ac47e3..1543e5239 100644
--- a/static/directives/billing-options.html
+++ b/static/directives/billing-options.html
@@ -14,8 +14,7 @@
         <span class="not-found" ng-show="!currentCard.last4">No credit card found</span>
       </div>
 
-      <button class="btn" ng-class="currentCard.last4 ? 'btn-default' : 'btn-primary'"
-              ng-show="currentCard && !changingCard" ng-click="changeCard()">
+      <button class="btn btn-primary" ng-show="currentCard && !changingCard" ng-click="changeCard()">
         Change Credit Card
       </button>
     </div>
diff --git a/static/js/app.js b/static/js/app.js
index 02248862a..26d7aa5da 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -237,16 +237,31 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
         }, failure);
       };
 
-      planService.changePlan = function($scope, orgname, planId, hasExistingSubscription, callbacks) {
-        if (!hasExistingSubscription) {
-          planService.showSubscribeDialog($scope, orgname, planId, callbacks);
-          return;
-        }
-        
+      planService.getCardInfo = function(orgname, callback) {
+        var url = orgname ? getRestUrl('organization', orgname, 'card') : 'user/card';       
+        var getCard = Restangular.one(url);
+        getCard.customGET().then(function(resp) {
+          callback(resp.card);
+        }, function() {
+          callback({'is_valid': false});
+        });
+      };
+
+      planService.changePlan = function($scope, orgname, planId, callbacks) {
         if (callbacks['started']) {
-            callbacks['started']();
+          callbacks['started']();
         }
-        planService.setSubscription(orgname, planId, callbacks['success'], callbacks['failure']);
+
+        planService.getPlan(planId, function(plan) {
+          planService.getCardInfo(orgname, function(cardInfo) {
+            if (plan.price > 0 && !cardInfo.last4) {
+              planService.showSubscribeDialog($scope, orgname, planId, callbacks);
+              return;
+            }
+        
+            planService.setSubscription(orgname, planId, callbacks['success'], callbacks['failure']);
+          });
+        });
       };
 
       planService.changeCreditCard = function($scope, orgname, callbacks) {
@@ -752,12 +767,8 @@ quayApp.directive('billingOptions', function () {
         $scope.invoice_email = $scope.obj.invoice_email;
 
         // Load the credit card information.
-        var url = $scope.organization ? 
-          getRestUrl('organization', $scope.organization.name, 'card') : 'user/card';
-       
-        var getCard = Restangular.one(url);
-        getCard.customGET().then(function(resp) {
-          $scope.currentCard = resp.card;
+        PlanService.getCardInfo($scope.organization ? $scope.organization.name : null, function(card) {
+          $scope.currentCard = card;
         });
       };
 
@@ -819,7 +830,7 @@ quayApp.directive('planManager', function () {
           'failure': function() { $scope.planChanging = false; }
         };
 
-        PlanService.changePlan($scope, $scope.organization, planId, hasSubscription, callbacks);
+        PlanService.changePlan($scope, $scope.organization, planId, callbacks);
       };
 
       $scope.cancelSubscription = function() {