Display an error message if no payment processors are available.

Otto is gaining the ability to temporarily disable payment
processors. If all are disabled, no checkout buttons will appear on
the payment page, and so we need to communicate to the user that they
cann't pay right now but should try again later.

ECOM-2346

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

@@ -206,6 +206,16 @@ define([
                 expectPaymentButtonEnabled( true );
             });
 
+            it('displays an error if no payment processors are available', function () {
+                var view = createView({processors: []});
+                expect(view.errorModel.get('shown')).toBe(true);
+                expect(view.errorModel.get('errorTitle')).toEqual(
+                    "We're currently experiencing technical problems."
+                );
+                expect(view.errorModel.get('errorMsg')).toEqual(
+                    'Try the transaction again in a few minutes.'
+                );
+            });
         });
     }
 );

lms/static/js/spec/verify_student/pay_and_verify_view_spec.js

@@ -56,7 +56,8 @@ define(['jquery', 'common/js/spec_helpers/template_helpers', 'js/verify_student/
             var createView = function( displaySteps, currentStep ) {
                 return new PayAndVerifyView({
                     displaySteps: displaySteps,
-                    currentStep: currentStep
+                    currentStep: currentStep,
+                    errorModel: new ( Backbone.Model.extend({}) )()
                 }).render();
             };
 

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

@@ -105,10 +105,20 @@ var edx = edx || {};
                 self._getProductText( templateContext.courseModeSlug, templateContext.upgrade )
             );
 
-            // create a button for each payment processor
-            _.each(processors.reverse(), function(processorName) {
-                $( 'div.payment-buttons' ).append( self._getPaymentButtonHtml(processorName) );
-            });
+            if (processors.length === 0) {
+                // No payment processors are enabled at the moment, so show an error message
+                this.errorModel.set({
+                    errorTitle: gettext("We're currently experiencing technical problems."),
+                    errorMsg: gettext('Try the transaction again in a few minutes.'),
+                    shown: true
+                })
+            }
+            else {
+                // create a button for each payment processor
+                _.each(processors.reverse(), function(processorName) {
+                    $( 'div.payment-buttons' ).append( self._getPaymentButtonHtml(processorName) );
+                });
+            }
 
             // Handle payment submission
             $( '.payment-button' ).on( 'click', _.bind( this.createOrder, this ) );