fab-manager/app/assets/javascripts/directives/stripe-form.js.erb

/* global Stripe */

Application.Directives.directive('stripeForm', ['Payment', 'growl',
  function (Payment, growl) {
    return ({
      restrict: 'A',
      scope: {
        cartItems: '='
      },
      link: function($scope, element, attributes) {
        const stripe = Stripe('<%= Rails.application.secrets.stripe_publishable_key %>');
        const elements = stripe.elements();

        const style = {
          base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
              color: '#aab7c4'
            }
          },
          invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
          }
        };

        const card = elements.create('card', { style, hidePostalCode: true });

        card.addEventListener('change', function ({ error }) {
          const displayError = document.getElementById('card-errors');
          if (error) {
            displayError.textContent = error.message;
          } else {
            displayError.textContent = '';
          }
        });

        // Add an instance of the card Element into the `card-element` <div>.
        const form = angular.element(element);
        const cardElement = form.find('#card-element');
        card.mount(cardElement[0]);

        form.bind('submit', function() {
          const button = form.find('button');
          button.prop('disabled', true);

          // TODO https://stripe.com/docs/payments/payment-intents/web-manual
          stripe.createPaymentMethod('card', card).then(function({ paymentMethod, error }) {
            if (error) {
              growl.error(error);
            } else {
              // Send paymentMethod.id to your server (see Step 2)
              Payment.confirm({ payment_method_id: paymentMethod.id, cart_items: $scope.cartItems }, function (response) {
                // Handle server response (see Step 3)
                handleServerResponse(response);
              });
            }
          });
        });

        function handleServerResponse(response) {
          if (response.error) {
            growl.error(error);
          } else if (response.requires_action) {
            // Use Stripe.js to handle required card action
            stripe.handleCardAction(
              response.payment_intent_client_secret
            ).then(function(result) {
              if (result.error) {
                growl.error(error);
              } else {
                // The card action has been handled
                // The PaymentIntent can be confirmed again on the server
                Payment.confirm({ payment_intent_id: result.paymentIntent.id, cart_items: $scope.cartItems }, function(confirmResult) {
                  paymentSuccess(confirmResult);
                }).then(handleServerResponse);
              }
            });
          } else {
            paymentSuccess(response);
          }
        }

        function paymentSuccess(response) {
          // TODO Show success message
          $scope.$apply(function () {
            $scope[form].apply($scope, response);
          });
        }
      }
    });
  }]);