Merge pull request #8456 from edx/renzo/payment-button-ui

Payment button UI modifications

lms/static/js/spec/verify_student/make_payment_step_view_spec.js

@@ -103,11 +103,15 @@ define([
                 expect($el.length).toEqual(_.size(buttons));
                 _.each(buttons, function( expectedText, expectedId ) {
                     var buttonEl = $( '#' + expectedId );
+
                     buttonEl.removeAttr('disabled');
                     expect( buttonEl.length ).toEqual( 1 );
                     expect( buttonEl[0] ).toHaveClass( 'payment-button' );
                     expect( buttonEl[0] ).toHaveText( expectedText );
+
                     buttonEl[0].click();
+                    expect( buttonEl[0] ).toHaveClass( 'is-selected' );
+                    expectPaymentButtonEnabled( false );
                     expect(requests[requests.length - 1].requestBody.split('&')).toContain('processor=' + expectedId);
                 });
             };
@@ -136,15 +140,15 @@ define([
 
             it( 'provides working payment buttons for a single processor', function() {
                 createView({processors: ['cybersource']});
-                checkPaymentButtons( AjaxHelpers.requests(this), {cybersource: "Pay with Credit Card"});
+                checkPaymentButtons( AjaxHelpers.requests(this), {cybersource: "Checkout"});
             });
 
             it( 'provides working payment buttons for multiple processors', function() {
                 createView({processors: ['cybersource', 'paypal', 'other']});
                 checkPaymentButtons( AjaxHelpers.requests(this), {
-                    cybersource: "Pay with Credit Card",
-                    paypal: "Pay with PayPal",
-                    other: "Pay with other"
+                    cybersource: "Checkout",
+                    paypal: "Checkout with PayPal",
+                    other: "Checkout with other"
                 });
             });
 

lms/static/js/verify_student/views/make_payment_step_view.js

@@ -45,13 +45,13 @@ var edx = edx || {};
 
         _getPaymentButtonText: function(processorName) {
             if (processorName.toLowerCase().substr(0, 11)=='cybersource') {
-                return gettext('Pay with Credit Card');
+                return gettext('Checkout');
             } else if (processorName.toLowerCase()=='paypal') {
-                return gettext('Pay with PayPal');
+                return gettext('Checkout with PayPal');
             } else {
                 // This is mainly for testing as no other processors are supported right now.
                 // Translators: 'processor' is the name of a third-party payment processing vendor (example: "PayPal")
-                return interpolate_text(gettext('Pay with {processor}'), {processor: processorName});
+                return interpolate_text(gettext('Checkout with {processor}'), {processor: processorName});
             }
         },
 
@@ -134,6 +134,8 @@ var edx = edx || {};
             // Disable the payment button to prevent multiple submissions
             this.setPaymentEnabled( false );
 
+            $( event.target ).toggleClass( 'is-selected' );
+
             // Create the order for the amount
             $.ajax({
                 url: '/verify_student/create_order/',
@@ -194,6 +196,8 @@ var edx = edx || {};
 
             // Re-enable the button so the user can re-try
             this.setPaymentEnabled( true );
+
+            $( '.payment-button' ).toggleClass( 'is-selected', false );
         },
 
         getPaymentAmount: function() {

lms/static/sass/_developer.scss

@@ -67,6 +67,10 @@
   .payment-button {
     float: right;
     @include margin-left( ($baseline/2) );
+    
+    &.is-selected {
+      background: $m-blue-d3 !important;
+    }
   }
 }