             {@render_suggested_next_step()}
         </div>
 
+    render_course_payment_required: (project, pay) ->
+        if pay <= new Date()
+            due = <span>now</span>
+        else
+            due = <span><TimeAgo date={pay} /></span>
+        <div key={project.get('project_id')}>
+            The course fee for "{project.get('title')}" is due {due}.
+        </div>
+
+    render_course_payment_instructions: ->
+        if not @props.project_map?
+            return
+        projects = @props.redux.getStore('projects')
+        v = []
+        @props.project_map.map (project, project_id) =>
+            pay = projects.date_when_course_payment_required(project_id)
+            if pay
+                # found a course the needs to be paid for
+                v.push(@render_course_payment_required(project, pay))
+        return v
+
     render_page : ->
         if not @props.loaded
             # nothing loaded yet from backend

            action        : rtypes.string
            loaded        : rtypes.bool
            selected_plan : rtypes.string

    propTypes :
        redux : rtypes.object

        <div>
            {@render_action()}
            {@render_error()}
            {@render_course_payment_instructions()}
            {@render_info_link()}
            {@render_page()}
        </div>
