Issue #3025829: Support for ACH

js/commerce_stripe.ach.form.js

+/**
+ * @file
+ * Javascript to generate Stripe token in PCI-compliant way.
+ */
+
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  /**
+   * Attaches the commerceStripeForm behavior.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop object cardNumber
+   *   Stripe card number element.
+   * @prop object cardExpiry
+   *   Stripe card expiry element.
+   * @prop object cardCvc
+   *   Stripe card cvc element.
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the commerceStripeForm behavior.
+   * @prop {Drupal~behaviorDetach} detach
+   *   Detaches the commerceStripeForm behavior.
+   *
+   * @see Drupal.commerceStripe
+   */
+  Drupal.behaviors.commerceStripeForm = {
+    cardNumber: null,
+    cardExpiry: null,
+    cardCvc: null,
+
+    attach: function (context) {
+      if (!drupalSettings.commerceStripe || !drupalSettings.commerceStripe.publishableKey) {
+        return;
+      }
+      $('.stripe-ach-form', context).once('stripe-processed').each(function () {
+        var $form = $(this).closest('form');
+
+        // Clear the token every time the payment form is loaded. We only need the token
+        // one time, as it is submitted to Stripe after a card is validated. If this
+        // form reloads it's due to an error; received tokens are stored in the checkout pane.
+        $('#stripe_token', $form).val('');
+
+        // Create a Stripe client.
+        /* global Stripe */
+        try {
+          var stripe = Stripe(drupalSettings.commerceStripe.publishableKey);
+        } catch (e) {
+          $form.prepend(Drupal.theme('commerceStripeError', e.message));
+          $form.find(':input.button--primary').prop('disabled', true);
+          $(this).find('.form-item').hide();
+          return;
+        }
+
+        // Insert the token ID into the form so it gets submitted to the server
+        var stripeTokenHandler = function (token) {
+          // Set the Stripe token value.
+          $('#stripe_token', $form).val(token.id);
+
+          // Submit the form.
+          var $primaryButton = $form.find(':input.button--primary');
+          $form.append('<input type="hidden" name="_triggering_element_name" value="' + $primaryButton.attr('name') + '" />');
+          $form.append('<input type="hidden" name="_triggering_element_value" value="' + $primaryButton.val() + '" />');
+          $form.trigger('submit', { 'tokenized' : true });
+        };
+
+        // Helper to handle the Stripe responses with errors.
+        var stripeErrorHandler = function (result) {
+          if (result.error) {
+            // Inform the user if there was an error.
+            stripeErrorDisplay(result.error.message);
+          }
+          else {
+            // Clean up error messages.
+            $form.find('#payment-errors').html('');
+          }
+        };
+
+        // Helper for displaying the error messages within the form.
+        var stripeErrorDisplay = function (error_message) {
+          // Display the message error in the payment form.
+          $form.prepend(Drupal.theme('commerceStripeError', error_message));
+
+          // Allow the customer to re-submit the form.
+          $form.find(':input.button--primary').prop('disabled', false);
+        };
+
+        // Handle the response from the token creation method.
+        var handleTokenResponse = function (result) {
+          if (result.error) {
+            // Inform the user if there was an error.
+            stripeErrorDisplay(result.error.message);
+          }
+          else {
+            // Send the token to your server.
+            stripeTokenHandler(result.token);
+          }
+        };
+
+        // Create a Stripe token and submit the form or display an error.
+        var stripeCreateToken = function () {
+          var tokenData = {
+            country: 'US',
+            currency: 'usd',
+            routing_number: $form.find('.stripe-routing-number').val(),
+            account_number: $form.find('.stripe-account-number').val(),
+            account_holder_type: $form.find('.stripe-account-holder-type').val(),
+            account_holder_name: $form.find('[data-stripe="given_name"]').val()
+              + " " + $form.find('[data-stripe="family_name"]').val()
+          };
+          stripe.createToken('bank_account', tokenData).then(function(result) {
+            handleTokenResponse(result);
+          });
+        };
+
+        // Form submit.
+        $form.on('submit.commerce_stripe_ach', function (event, options) {
+          options = options || {};
+          if (options.tokenized) {
+            // Tokenization complete, allow the form to submit.
+            return;
+          }
+          event.preventDefault();
+          $('.messages--error', $form).remove();
+          // Disable the submit button to prevent repeated clicks.
+          $form.find(':input.button--primary').prop('disabled', true);
+          // Try to create the Stripe token and submit the form.
+          stripeCreateToken();
+        });
+      });
+    },
+
+    detach: function (context, settings, trigger) {
+      if (trigger !== 'unload') {
+        return;
+      }
+      var $form = $('.stripe-ach-form', context).closest('form');
+      if ($form.length === 0) {
+        return;
+      }
+      $form.off('submit.commerce_stripe_ach');
+    }
+  };
+
+  $.extend(Drupal.theme, /** @lends Drupal.theme */{
+    commerceStripeError: function (message) {
+      return $('<div class="messages messages--error"></div>').html(message);
+    }
+  });
+
+})(jQuery, Drupal, drupalSettings);