modify to use Checkout form

booking.stripe.js

@@ -1,65 +1,40 @@
-(function($) {
-  $(function() {
-    Stripe.setPublishableKey(Drupal.settings.booking_stripeform.pubkey);
-  });
-  Drupal.behaviors.booking_stripeform = {
-    attach: function(context, settings) {
-      $("#" + settings.booking_stripeform.form_selector, context).submit(function(e) {
-        e.preventDefault();
-        var $form = $(this);
-        var $obj;
-        var $submitBtn = $("#edit-submit", context);
-        settings.booking_stripeform.submitBtnText = $submitBtn.val();
-        try {
-          var $ccnum = $(':input[data-stripe="number"]', $form);
-          var $exp_month = $(':input[data-stripe="exp-month"]', $form);
-          var $exp_year = $(':input[data-stripe="exp-year"]', $form);
-          var $cvc = $(':input[data-stripe="cvc"]', $form);
-          if(!Stripe.card.validateCardNumber($(':input[data-stripe="number"]', $form).val())) {
-            $obj = $ccnum;
-            throw "Invalid credit card number";
-          }
-          if(!Stripe.card.validateExpiry($exp_month.val(), $exp_year.val())) {
-            $obj = $exp_month;
-            throw "Invalid expiration month/year";
-          }
-          if(!Stripe.card.validateCVC($cvc.val())) {
-            $obj = $cvc;
-            throw "Invalid CVC";
-          }
-        } catch(err) {
-          $.each([$ccnum, $exp_month, $exp_year, $cvc], function(i, e) {
-            e.addClass('error');
-          });
-          $obj.parents('div.control-group').toggleClass('error');
-          reportError(err, $obj);
-          return false;
+jQuery(document).ready(function($) {
+    var settings = Drupal.settings.booking_stripe;
+    var $form = $("#" + settings.form_selector);
+    var handler = StripeCheckout.configure({
+        key: settings.pubkey,
+        image: settings.image,
+        locale: 'auto',
+        token: function(token) {
+            // Use the token to create the charge with a server-side script.
+            // You can access the token ID with `token.id`
+            if (currentForm === undefined)
+                return;
+            currentForm.find('input[name="token_id"]').val(token.id);
+            currentForm.find('input[name="token_email"]').val(token.email);
+            currentForm.submit();
         }
-        $submitBtn.val('Please wait...').attr('disabled', true);
-        Stripe.createToken($form, stripeResponseHandler);
-        return false;
-      });
-    }
-  }
+    });
+    var currentForm = undefined;
 
-  var stripeResponseHandler = function(status, response) {
-    var $form = $("#" + Drupal.settings.booking_stripeform.form_selector);
-    if (response.error) {
-      alert(response.error.message);
-    } else {
-      // token contains id, last4, and card type
-      var token = response.id;
-      // Insert the token into the form so it gets submitted to the server
-      $('input[name=stripeToken]', $form).val(token);
-      // and submit
-      $form.get(0).submit();
-    }
-  };
-
-  /**
-   * Uses Bootstrap's popover to alert the user.
-   */
-  function reportError(msg, $el) {
-    console.log([$el, msg]);
-  }
-}(jQuery));
+    $('.form-submit').click(function (e) {
+        currentForm = $(this).closest('form');
+        if (currentForm === undefined)
+            return;
+        handler.open({
+            name: settings.name,
+            description: currentForm.find('input[name="description"]').val(),
+            email: currentForm.find('input[name="email"]').val(),
+            currency: "aud",
+            amount: currentForm.find('input[name="amount"]').val() * 100,
+            closed: function() {
+                //document.getElementById("booking_stripe_form").submit();
+            }
+        });
+        e.preventDefault();
+    });
+    // Close Checkout on page navigation
+    //$(window).on('popstate', function() {
+    //    handler.close();
+    //});
+});