workarea-stripe 1.0.0

data/app/assets/javascripts/workarea/storefront/stripe/config.js.erb

@@ -0,0 +1,29 @@
+(function () {
+    'use strict';
+
+    /**
+     * Config Variables
+     */
+
+    WORKAREA.config.stripe = {
+        publicKey: '<%= Workarea.config.stripe[:public_key] %>',
+        cardStyles : {
+            base: {
+                color: "#32325d",
+                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+                fontSmoothing: 'antialiased',
+                fontSize: '16px',
+                '::placeholder': {
+                    color: '#aab7c4'
+                }
+            },
+            invalid: {
+                color: '#fa755a',
+                iconColor: '#fa755a'
+            }
+        },
+        bogusToken: {
+            'id': 'tok_1DCtE5DDRzjJ0gxwvRPfQ57m'
+        }
+    };
+})();

data/app/assets/javascripts/workarea/storefront/stripe/modules/bogus_stripe_elements.js

@@ -0,0 +1,55 @@
+WORKAREA.registerModule('bogusStripeElements', (function () {
+
+    'use strict';
+
+    var createStripeTokenInput = function() {
+            return $('<input>').attr({
+                'type': 'hidden',
+                'name': 'stripeToken',
+                'value': WORKAREA.config.stripe.bogusToken.id
+            });
+        },
+
+        paymentMethod = function($form) {
+            return $('input[name="payment"]:checked', $form).val();
+        },
+
+        formNeedsTokenization = function($form) {
+            if ($form.attr('action') === '/checkout/place_order') {
+                return paymentMethod($form) === 'stripe';
+            } else {
+                return true;
+            }
+        },
+
+        setupPaymentForm = function (index, paymentForm) {
+            var $form = $(paymentForm),
+                hiddenInput = createStripeTokenInput();
+
+            if (formNeedsTokenization($form)) {
+                $form.append(hiddenInput);
+            }
+        },
+
+        disable = function() {
+            $('.checkout-payment__primary-method').css('display', 'none');
+            $('.checkout-payment__primary-method--stripe').css('display', 'block');
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.bogusStripeElements
+         */
+        init = function ($scope) {
+            var $stripePayment = $('[data-stripe-card-input]', $scope),
+                $paymentForm = $stripePayment.closest('form');
+
+            $paymentForm.each(setupPaymentForm);
+        };
+
+    return {
+        init: init,
+        disable: disable
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/stripe/modules/stripe_elements.js

@@ -0,0 +1,113 @@
+WORKAREA.registerModule('stripeElements', (function () {
+
+    'use strict';
+
+    if (!WORKAREA.config.stripe.publicKey) { return; }
+
+    var stripe = Stripe(WORKAREA.config.stripe.publicKey),
+        elements = stripe.elements(),
+        card,
+
+        createStripeTokenInput = function(token) {
+            return $('<input>').attr({
+                'type': 'hidden',
+                'name': 'stripeToken',
+                'value': token.id
+            });
+        },
+
+        stripeTokenHandler = function($form, token) {
+            var hiddenInput = createStripeTokenInput(token);
+
+            $form
+            .append(hiddenInput)
+            .unbind('submit')
+            .submit();
+        },
+
+        paymentMethod = function($form) {
+            return $('input[name="payment"]:checked', $form).val();
+        },
+
+        formNeedsTokenization = function($form) {
+            if ($form.attr('action') === '/checkout/place_order') {
+                return paymentMethod($form) === 'stripe';
+            } else {
+                return true;
+            }
+        },
+
+        tokenizeFormOnSubmit = function ($form, event) {
+            if (formNeedsTokenization($form)) {
+                event.preventDefault();
+
+                stripe.createToken(card).then(function (result) {
+                    if (result.error) {
+                        var errorElement = $('#card_errors');
+                        errorElement.textContent = result.error.message;
+                    } else {
+                        stripeTokenHandler($form, result.token);
+                    }
+                });
+            }
+        },
+
+        setupPaymentForm = function ($paymentForm) {
+            $paymentForm.on('submit', _.partial(tokenizeFormOnSubmit, $paymentForm));
+        },
+
+        displayErrorsOnChange = function(event) {
+            var displayError = $('#card_errors');
+
+            if (event.error) {
+                displayError.textContent = event.error.message;
+            } else {
+                displayError.textContent = '';
+            }
+        },
+
+        setIframeId = function($container) {
+            $('iframe', $container).attr('id', 'stripe-payment-frame');
+        },
+
+        // Inline styles are necessary here to override an inline style sometimes
+        // added by stripe elements. It seems stripe attempts to hide the card
+        // form by setting width: 1px !important; on the iframe, causing the form
+        // not to render in some checkouts. The iframe should always fill it's container
+        ensureIframeWidth = function ($container) {
+            $('iframe', $container).css('width', '100%');
+        },
+
+        setupCardInput = function($cardInput) {
+            var cardInputID = $cardInput.attr('id');
+
+            card = elements.create('card', { style: WORKAREA.config.stripe.cardStyles });
+            card.mount('#'+cardInputID);
+            card.addEventListener('change', displayErrorsOnChange);
+            setIframeId($cardInput);
+            ensureIframeWidth($cardInput);
+        },
+
+        setupStripe = function (index, cardInput) {
+            var $cardInput = $(cardInput),
+                $paymentForm = $cardInput.closest('form');
+
+            setupCardInput($cardInput);
+            setupPaymentForm($paymentForm);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.stripeElements
+         */
+        init = function ($scope) {
+            if (!WORKAREA.config.stripe.publicKey) { return; }
+
+            $('[data-stripe-card-input]', $scope).each(setupStripe);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/stylesheets/workarea/stripe/components/_checkout_payment_stripe.scss

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #CHECKOUT-PAYMENT
+\*------------------------------------*/
+
+/**
+ * Extend the `.checkout-payment` class from Workarea to hide new card form and
+ * display the stripe payment form.
+ *
+ * This is not appended in test to allow base tests to run normally.
+ */
+.checkout-payment {}
+
+    .checkout-payment__primary-method {
+        display: none;
+    }
+
+    .checkout-payment__primary-method--stripe {
+        display: block;
+    }

data/app/controllers/workarea/storefront/users/credit_cards_controller.decorator

@@ -0,0 +1,10 @@
+module Workarea
+  decorate Storefront::Users::CreditCardsController, with: :stripe do
+    def credit_card_params
+      cc_params = super
+      cc_params.merge!(stripe_token: params["stripeToken"]) if params["stripeToken"].present?
+
+      cc_params
+    end
+  end
+end

data/app/models/workarea/checkout/credit_card_params.decorator

@@ -0,0 +1,30 @@
+module Workarea
+  decorate Checkout::CreditCardParams, with: :stripe do
+
+    # HACK ALERT:
+    # Stripe does not give enough data to persist a credit card
+    # To get around this set fake data which is then updated
+    # when the card is stored on the gateway
+    def stripe_params
+      {
+       stripe_token: params["stripeToken"],
+       number: '4111111111111111',
+       display_number: '1111',
+       year:  Time.current.year + 1,
+       month:  Time.current.month,
+       first_name: 'stub',
+       last_name: 'stub',
+       cvv: '000'
+
+      }
+    end
+
+    def stripe_token
+      params["stripeToken"]
+    end
+
+    def stripe?
+      params["stripeToken"].present?
+    end
+  end
+end

data/app/models/workarea/checkout/steps/payment.decorator

@@ -0,0 +1,16 @@
+module Workarea
+  decorate Checkout::Steps::Payment, with: :stripe do
+    def set_credit_card(params)
+      payment.clear_credit_card
+      card_params = Checkout::CreditCardParams.new(params)
+
+      if card_params.stripe?
+        payment.set_credit_card(card_params.stripe_params)
+      elsif card_params.new? && card_params.number.present?
+        payment.set_credit_card(card_params.new_card)
+      elsif card_params.saved?
+        payment.set_credit_card(saved_card_id: card_params.saved_card_id)
+      end
+    end
+  end
+end

data/app/models/workarea/payment.decorator

@@ -0,0 +1,18 @@
+module Workarea
+  decorate Payment, with: :stripe do
+    def set_credit_card(attrs)
+      build_credit_card unless credit_card
+      credit_card.saved_card_id = nil
+      credit_card.attributes = attrs.slice(
+        :month,
+        :year,
+        :saved_card_id,
+        :number,
+        :cvv,
+        :amount,
+        :stripe_token
+      )
+      save
+    end
+  end
+end

data/app/models/workarea/payment/authorize/credit_card.decorator

@@ -0,0 +1,24 @@
+module Workarea
+  decorate Payment::Authorize::CreditCard, with: :stripe do
+    def transaction_options
+      {
+        customer:  tender.payment.profile.gateway_id,
+        description: order_content
+      }
+    end
+
+    private
+
+    def order
+      @order ||= Workarea::Order.find(tender.payment.id)
+    end
+
+    def order_content
+      @order_content ||= begin
+        contents = order.items.map(&:sku).join(',')
+        "Env: #{Rails.env}, Items: #{contents}"
+      end
+    end
+
+  end
+end

data/app/models/workarea/payment/credit_card.decorator

@@ -0,0 +1,27 @@
+module Workarea
+  decorate Payment::Tender::CreditCard, Payment::SavedCreditCard, with: :stripe do
+    decorated do
+      field :stripe_token, type: String
+    end
+
+    def stripe?
+      stripe_token.present?
+    end
+
+    def set_display_number
+      if !stripe? && number.present?
+        self.display_number = ActiveMerchant::Billing::CreditCard.mask(number)
+      end
+    end
+
+    def set_issuer
+      if !stripe? && number.present?
+        brand = ActiveMerchant::Billing::CreditCard.brand?(number)
+
+        if brand.present?
+          self.issuer = Workarea.config.credit_card_issuers[brand].to_s
+        end
+      end
+    end
+  end
+end

data/app/models/workarea/payment/purchase/credit_card.decorator

@@ -0,0 +1,24 @@
+module Workarea
+  decorate Payment::Purchase::CreditCard, with: :stripe do
+    def transaction_options
+      {
+        customer:  tender.payment.profile.gateway_id,
+        description: order_content
+      }
+    end
+
+    private
+
+    def order
+      @order ||= Workarea::Order.find(tender.payment.id)
+    end
+
+    def order_content
+      @order_content ||= begin
+        contents = order.items.map(&:sku).join(',')
+        "Env: #{Rails.env}, Items: #{contents}"
+      end
+    end
+
+  end
+end

data/app/models/workarea/payment/store_credit_card.decorator

@@ -0,0 +1,54 @@
+module Workarea
+  decorate Payment::StoreCreditCard, with: :stripe do
+    def perform!
+      return true if @credit_card.token.present?
+
+      response = handle_active_merchant_errors do
+        gateway.store(@credit_card.stripe_token, store_options)
+      end
+
+      params = response.params
+
+      stripe_source = card_details(params)
+
+      # workarea does not have access to the payment form
+      # to get the cc information because it is hosted by stripe.
+      # Add the information to the credit card that is
+      # returned from the tokenization request.
+      update_credit_card(stripe_source)
+
+      # store the customer ID on the profile
+      if @credit_card.profile.gateway_id.blank?
+        @credit_card.profile.gateway_id = response.params["id"]
+        @credit_card.profile.save!
+      end
+
+      response.success?
+    end
+
+    private
+
+    def store_options
+      {
+        email: @credit_card.profile.email,
+        customer: @credit_card.profile.gateway_id
+      }
+    end
+
+    def card_details(params)
+      if params["sources"].present?
+        params["sources"]["data"].first
+      else
+        params
+      end
+    end
+
+    def update_credit_card(stripe_source)
+      @credit_card.display_number = stripe_source["last4"]
+      @credit_card.month = stripe_source["exp_month"]
+      @credit_card.year = stripe_source["exp_year"]
+      @credit_card.issuer = stripe_source["brand"]
+      @credit_card.token = stripe_source["id"]
+    end
+  end
+end

data/app/views/workarea/storefront/checkouts/_stripe_dialog.html.haml

@@ -0,0 +1,2 @@
+%script.stripe-button{"data-amount" => "999", "data-description" => "Widget", "data-image" => "https://stripe.com/img/documentation/checkout/marketplace.png", "data-key" => "pk_test_MN4pzRoNbCa2lMUVVAQwpoiJ", "data-locale" => "auto", "data-name" => "Demo Site", "data-email" => step.order.email, :src => "https://checkout.stripe.com/checkout.js"}
+  :cdata

data/app/views/workarea/storefront/checkouts/_stripe_form.html.haml

@@ -0,0 +1,19 @@
+.checkout-payment__primary-method.checkout-payment__primary-method--stripe{ class: @step.using_new_card? ? 'checkout-payment__primary-method--selected': nil}
+  .button-property
+    .value
+      = radio_button_tag 'payment', 'stripe', @step.using_new_card?, data: { analytics: checkout_payment_selected_analytics_data('stripe').to_json }
+    = label_tag 'payment[stripe]', nil, class: 'button-property__name' do
+      %span.button-property__text= t('workarea.storefront.checkouts.new_credit_card')
+  %p.checkout-payment__primary-method-description
+    = all_payment_icons
+  .checkout-payment__primary-method-edit
+    .grid
+      .grid__cell.grid__cell--66-at-medium
+        .property
+          = label_tag 'credit_card[element]', nil, class: 'property__name' do
+            %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+            %span.property__text= t('workarea.storefront.credit_cards.card_number')
+          .value
+            #card_element{ data: { stripe_card_input: '' } }
+              -# Stripe element will be inserted here
+            #card_errors.value__error{ role: 'alert' }