Merge pull request #963 from edx/diana/better-order-error-handling

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>${_("Oops! Something went wrong. Please confirm your details again and click the button to move on to payment. If you are still having trouble, please try again later.")}</p>
+      </div>
+    </div>
+  </div>
+</div>
 
 <div class="container">
   <section class="wrapper">