Verification purchase goes through to CyberSource

lms/djangoapps/shoppingcart/processors/CyberSource.py

@@ -103,7 +103,7 @@ def render_purchase_form_html(cart):
     Renders the HTML of the hidden POST form that must be used to initiate a purchase with CyberSource
     """
     return render_to_string('shoppingcart/cybersource_form.html', {
-        'action': purchase_endpoint,
+        'action': get_purchase_endpoint(),
         'params': get_signed_purchase_params(params),
     })
 
@@ -111,8 +111,6 @@ def get_signed_purchase_params(cart):
     return sign(get_purchase_params(cart))
 
 def get_purchase_params(cart):
-    purchase_endpoint = settings.CC_PROCESSOR['CyberSource'].get('PURCHASE_ENDPOINT', '')
-
     total_cost = cart.total_cost
     amount = "{0:0.2f}".format(total_cost)
     cart_items = cart.orderitem_set.all()
@@ -124,6 +122,9 @@ def get_purchase_params(cart):
 
     return params
 
+def get_purchase_endpoint():
+    return settings.CC_PROCESSOR['CyberSource'].get('PURCHASE_ENDPOINT', '')
+
 
 def payment_accepted(params):
     """

lms/djangoapps/verify_student/views.py

@@ -3,6 +3,7 @@
 
 """
 import json
+import logging
 
 from mitxmako.shortcuts import render_to_response
 
@@ -16,9 +17,13 @@ from course_modes.models import CourseMode
 from student.models import CourseEnrollment
 from student.views import course_from_id
 from shoppingcart.models import Order, CertificateItem
-from shoppingcart.processors.CyberSource import get_signed_purchase_params
+from shoppingcart.processors.CyberSource import (
+    get_signed_purchase_params, get_purchase_endpoint
+)
 from verify_student.models import SoftwareSecurePhotoVerification
 
+log = logging.getLogger(__name__)
+
 class VerifyView(View):
 
     def get(self, request):
@@ -40,7 +45,8 @@ class VerifyView(View):
             "progress_state" : progress_state,
             "user_full_name" : request.user.profile.name,
             "course_id" : course_id,
-            "course_name" : course_from_id(course_id).display_name
+            "course_name" : course_from_id(course_id).display_name,
+            "purchase_endpoint" : get_purchase_endpoint(),
         }
 
         return render_to_response('verify_student/photo_verification.html', context)
@@ -52,6 +58,7 @@ def create_order(request):
     attempt.save()
 
     course_id = request.POST['course_id']
+    log.critical(course_id)
 
     # I know, we should check this is valid. All kinds of stuff missing here
     # enrollment = CourseEnrollment.create_enrollment(request.user, course_id)

lms/templates/verify_student/photo_verification.html

@@ -32,22 +32,50 @@
   }, onFailSoHard);
   */
 
-  $(document).ready(function() {
-    $( ".carousel-nav" ).addClass('sr');
-
+  function initVideoCapture() {
     window.URL = window.URL || window.webkitURL;
     navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                               navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
-    var video = document.querySelector('video');
-
+    $('video').each(function(i, video) {
       if (navigator.getUserMedia) {
-      navigator.getUserMedia({audio: true, video: true}, function(stream) {
+        navigator.getUserMedia({video: true}, function(stream) {
           video.src = window.URL.createObjectURL(stream);
         }, onFailSoHard);
       } else {
         video.src = 'somevideo.webm'; // fallback.
       }
+    });
+  }
+
+  $(document).ready(function() {
+    $(".carousel-nav").addClass('sr');
+
+    initVideoCapture();
+
+    $("#pay_button").click(function(){
+        // $("#pay_form")
+        var xhr = $.post(
+          "create_order",
+          {
+            "course_id" : "${course_id|u}"
+          },
+          function(data) {
+            for (prop in data) {
+              $('<input>').attr({
+                  type: 'hidden',
+                  name: prop,
+                  value: data[prop]
+              }).appendTo('#pay_form');
+            }
+            $("#pay_form").submit()
+          }
+        )
+        .done(function(data) {
+          alert(data);
+        })
+        .fail(function() { alert("error"); });
+    });
 
   });
 
@@ -84,8 +112,7 @@
 
         <div id="facecam" class="cam">
           <div class="placeholder-cam">
-          <!-- cam image -->
-          <p>cam image</p>
+            <video autoplay></video>
           </div>
 
           <div class="controls photo-controls">
@@ -153,7 +180,6 @@
 
           <div class="placeholder-cam">
             <video autoplay></video>
-          <p>cam image</p>
           </div>
 
           <div class="controls photo-controls">
@@ -264,11 +290,11 @@
       <div class="actions">
         <ul>
           <li class="action action-next">
-            <form method="post" action="create_order">
+            <form id="pay_form" method="post" action="${purchase_endpoint}">
               <!-- <a href="#">Go to Step 4: Secure Payment</a> -->
-              <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
+              <!-- <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> -->
               <input type="hidden" name="course_id" value="${course_id | h}" />
-              <input type="submit" value="Go to Step 4" name="payment">
+              <input type="button" id="pay_button" value="Go to Step 4" name="payment">
             </form>
             <p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
           </li>