class Weaver::CreditCardForm

Creates the credit card form

Public Class Methods

new(page, anchors, options = {}, &block) click to toggle source
Calls superclass method Weaver::Elements::new
# File lib/weaver/element_types/credit_card_form.rb, line 6
def initialize(page, anchors, options = {}, &block)
  super(page, anchors)
  @options = options
  instance_eval(&block) if block
end

Public Instance Methods

apply_script(scripts) click to toggle source
# File lib/weaver/element_types/credit_card_form.rb, line 12
    def apply_script(scripts)
      scripts << <<~SCRIPT
        object["#{card_input_name}_type"] = $('##{card_input_name}_type').val();
        object["#{card_input_name}_number"] = $('##{card_input_name}_number').val();
        object["#{card_input_name}_exp_month"] = $('##{card_input_name}_exp_month').val();
        object["#{card_input_name}_exp_year"] = $('##{card_input_name}_exp_year').val();
        object["#{card_input_name}_name"] = $('##{card_input_name}_name').val();
        object["#{card_input_name}_cvc"] = $('##{card_input_name}_cvc').val();
      SCRIPT
    end
generate() click to toggle source
Calls superclass method Weaver::Elements#generate
# File lib/weaver/element_types/credit_card_form.rb, line 23
def generate
  setup!
  generate_html!
  super
end

Private Instance Methods

background_for_issuer_bin(network, bin, image) click to toggle source
# File lib/weaver/element_types/credit_card_form.rb, line 31
    def background_for_issuer_bin(network, bin, image)
      style <<~STYLE
        ##{card_input_name}.skeuocard.product-#{network}.issuer-#{bin} .face.front {
          background-image: url(#{@page.root}images/#{image});
        }
      STYLE
      @page.on_page_load <<~SCRIPT
        var product = Skeuocard.prototype.CardProduct.firstMatchingShortname('#{network}');
        // register a new variation of the #{network} cards
        product.createVariation({
          pattern: /^#{bin}/,
          issuerShortname: "#{bin}"
        });
      SCRIPT
    end
brands() click to toggle source
# File lib/weaver/element_types/credit_card_form.rb, line 92
def brands
  {
    visa: 'Visa',
    discover: 'Discover',
    mastercard: 'MasterCard',
    maestro: 'Maestro',
    jcb: 'JCB',
    unionpay: 'UnionPay',
    amex: 'American Express',
    dinersclubintl: 'Diners Club'
  }
end
card_input_name() click to toggle source
# File lib/weaver/element_types/credit_card_form.rb, line 47
def card_input_name
  @card_input_name ||= @options[:id] || @page.create_anchor('credit_card')
end
elements() click to toggle source
# File lib/weaver/element_types/credit_card_form.rb, line 105
def elements
  {
    number: 'Card Number',
    exp_month: 'Expiration Month',
    exp_year: 'Expiration Year',
    name: 'Cardholder Name',
    cvc: 'Card Validation Code'
  }
end
generate_html!() click to toggle source
# File lib/weaver/element_types/credit_card_form.rb, line 115
def generate_html!
  thebrands = brands
  theelements = elements
  input_name = card_input_name
  div id: input_name, class: 'credit-card-input no-js' do
    p 'Javascript unavailable', class: 'no-support-warning'

    label 'Card Type', for: :"#{input_name}_type"
    method_missing(:select,
                   name: :"#{input_name}_type",
                   id: "#{input_name}_type") do
      thebrands.each do |k, v|
        option v, value: k
      end
    end

    theelements.each do |k, v|
      label v, for: :"#{input_name}_#{k}"
      input type: :text, name: :"#{input_name}_#{k}",
            class: k.to_sym,
            id: "#{input_name}_#{k}"
    end
  end
end
setup!() click to toggle source
# File lib/weaver/element_types/credit_card_form.rb, line 51
    def setup!
      @page.request_js 'js/plugins/skeuocard/javascripts/skeuocard.min.js'
      @page.request_js 'js/plugins/skeuocard/javascripts/vendor/cssua.min.js'
      @page.request_css 'js/plugins/skeuocard/styles/skeuocard.css'
      @page.request_css 'js/plugins/skeuocard/styles/skeuocard.reset.css'

      @page.on_page_load <<~SCRIPT
        var card = new Skeuocard($("##{card_input_name}"), {
          typeInputSelector: '[name="#{card_input_name}_type"]',
          numberInputSelector: '[name="#{card_input_name}_number"]',
          expMonthInputSelector: '[name="#{card_input_name}_exp_month"]',
          expYearInputSelector: '[name="#{card_input_name}_exp_year"]',
          nameInputSelector: '[name="#{card_input_name}_name"]',
          cvcInputSelector: '[name="#{card_input_name}_cvc"]'
        });

        var #{card_input_name}_content_width = $('##{card_input_name}').width();
        var #{card_input_name}_content_height = $('##{card_input_name}').height();
        function resize_#{card_input_name}() {
          var availableWidth = $('##{card_input_name}').parent().width();
          var contentWidth = #{card_input_name}_content_width;
          var contentHeight = #{card_input_name}_content_height;

          var scale = Math.min(availableWidth, contentWidth) / contentWidth;
          $("##{card_input_name}").css("transform","scale(" + scale + ")");
          $("##{card_input_name}").css("transform-origin","top left");
          $("##{card_input_name}").css("width", contentWidth * scale);
          $("##{card_input_name}").css("height", contentHeight * scale);
        }

        var resize_#{card_input_name}_id;
        $(window).resize( function() {
          clearTimeout(resize_#{card_input_name}_id);
          resize_#{card_input_name}_id = setTimeout(resize_#{card_input_name}, 500);
        });

        resize_#{card_input_name}();

      SCRIPT
    end