Show order errors in page instead of in an alert.

lms/static/js/verify_student/photocapture.js

@@ -50,7 +50,11 @@ var submitToPaymentProcessing = function() {
     $("#pay_form").submit();
   })
   .fail(function(jqXhr,text_status, error_thrown) {
-    alert(jqXhr.responseText);
+      if(jqXhr.status == 400) {
+          $('#order-error .copy p').html(jqXhr.responseText);
+      }
+      $('#order-error').show();
+      $("html, body").animate({ scrollTop: 0 });
   });
 }
 

lms/templates/verify_student/photo_verification.html

@@ -38,6 +38,17 @@
   </div>
 </div>
 
+<div id="order-error" style="display: none;" class="wrapper-msg wrapper-msg-activate">
+  <div class=" msg msg-activate">
+    <i class="msg-icon icon-warning-sign"></i>
+    <div class="msg-content">
+      <h3 class="title">${_("Error processing your order")}</h3>
+      <div class="copy">
+        <p>${_("We encountered an error trying to process your order. Please try again later.")}</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 <div class="container">
   <section class="wrapper">