Add error handling to payment-processor form

Relates #25 #29 #31 #34

public/lib/payment-processor.js

@@ -1,17 +1,26 @@
-// const server = require('stripe');
+// var server = require('stripe');
 
-const stripe = Stripe('pk_test_zzdvAwrOg37SAhRt6yik1LTu'); // update with real API key
-const elements = stripe.elements(); // create a new instance of elements
+var stripe = Stripe('pk_test_zzdvAwrOg37SAhRt6yik1LTu'); // update with real API key
+var elements = stripe.elements(); // create a new instance of elements
 
 
 // Custom styling can be passed to options when creating an Element.
-const style = {
+var style = {
   base: {
     // Add your base input styles here. For example:
     fontSize: '16px',
     lineHeight: '24px',
   },
 };
 
-const card = elements.create('card', { style: style });
+var card = elements.create('card', { style: style });
 card.mount('#card-element');
+
+card.addEventListener('change', function(event) {
+  var displayError = document.getElementById('card-errors');
+  if (event.error) {
+    displayError.textContent = event.error.message;
+  } else {
+    displayError.textContent = '';
+  }
+});