25-stripe-validation

resources/assets/js/subscribe.js

@@ -1,3 +1,29 @@
 $(document).ready(function() {
 
+  // target the form
+  // on form submission, create a token
+  $('#subscribe-form').submit(function(e) {
+    var form = $(this);
+
+    // disable the form button
+    form.find('button').prop('disabled', true);
+
+    Stripe.card.createToken(form, function(status, response) {
+      if (response.error) {
+        form.find('.stripe-errors').text(response.error.message).addClass('alert alert-danger');
+        form.find('button').prop('disabled', false);
+      } else {
+        console.log(response);
+
+        // append the token to the form
+        form.append($('<input type="hidden" name="cc_token">').val(response.id));
+
+        // submit the form
+        form.get(0).submit();
+      }
+    });
+
+    e.preventDefault();
+  });
+
 });

resources/views/layouts/app.blade.php

@@ -28,7 +28,7 @@
     {{-- JS --}}
     <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
     <script>
-        Stripe.setPublishableKey({{ env('STRIPE_KEY') }});
+        Stripe.setPublishableKey("{{ env('STRIPE_KEY') }}");
     </script>
     <script src="js/all.js"></script>
 </body>

resources/views/pages/subscribe.blade.php

@@ -114,6 +114,8 @@
             </div>
         </div>        
 
+        <div class="stripe-errors"></div>
+
         <div class="form-group text-center">
             <button type="submit" class="btn btn-lg btn-success btn-block">Join</button>
         </div>