olivierobert · February 2, 2016 04:38 · Feb 2, 2016
diff --git a/payment_form.html.slim b/payment_form.html.slim
@@ -0,0 +1,41 @@
+form#paymentForm
+  .form-group.row
+    .col-sm-6
+      label.form-control-label= t('checkout.card_list_title')
+      div
+        .checkout-card-types
+          img.card-visa src=image_url('card-visa.png') width='32' height='auto'
+          img.card-mastercard src=image_url('card-mastercard.png') width='32' height='auto'
+
+  .form-group.row
+    .col-sm-12
+      label.form-control-label= t('form.fields.card_name')
+      = text_field_tag :card_name, params[:card_name], class: 'form-control'
+
+  .form-group.row
+    .col-xs-10
+      label.form-control-label= t('form.fields.card_number')
+      div#card-number
+
+    .col-xs-2
+      label.form-control-label
+        = t('form.fields.card_cvv')
+        = link_to title: t('checkout.card_cvv_tooltip'), data: {toggle: 'tooltip'} do
+          img src=image_url('icon-questionmark.png')
+      div#card-cvv
+
+  .form-group.row
+    .col-sm-12
+      label.form-control-label= t('form.fields.card_expiry')
+      .row
+        .col-xs-6
+          div#card-expiry-month
+        .col-xs-6
+          div#card-expiry-year
+
+  .form-group.row
+    .col-sm-12
+      label.c-input.c-checkbox
+        = check_box_tag :save_card, params[:save_card]
+        span.c-indicator
+        = t('checkout.save_credit_card')
diff --git a/payment_form.js b/payment_form.js
@@ -0,0 +1,64 @@
+// Init Braintree hosted fields UI
+(function($) {
+  var formID = 'paymentForm',
+      $form = $('#' + formID);
+
+  var highlightCardType = function(type) {
+    var $card;
+    if (type === 'visa') {
+      $card = $form.find('.card-visa');
+    } else if (type === 'master-card') {
+      $card = $form.find('.card-mastercard');
+    }
+
+    if ($card) {
+      $card.addClass('is-current');
+    }
+  };
+
+  var deHighlightCardType = function() {
+    $form.find('img[class^=card]').removeClass('is-current');
+  };
+
+  if ($form.length) {
+    braintree.setup(N3.clientToken, 'custom', {
+      'id': formID,
+      hostedFields: {
+        'number': {
+          'selector': '#card-number'
+        },
+        'cvv': {
+          'selector': '#card-cvv'
+        },
+        'expirationMonth': {
+          'selector': '#card-expiry-month',
+          'placeholder': 'Month'
+        },
+        'expirationYear': {
+          'selector': '#card-expiry-year',
+          'placeholder': 'Year'
+        },
+        'styles': {
+          'input': {
+            'color': '#55595c',
+            'font-size': '15px',
+            'font-family': 'proxima-nova-soft, sans-serif'
+          }
+        },
+        onFieldEvent: function (event) {
+          if (event.type === 'fieldStateChange') {
+            if (event.card) {
+              // visa|master-card|american-express|diners-club|discover|jcb|unionpay|maestro
+              highlightCardType(event.card.type);
+            }
+          } else if (event.type === 'blur') {
+            if (event.target.fieldKey === 'number' && event.isEmpty) {
+              deHighlightCardType();
+            }
+          }
+        }
+      }
+    });
+  }
+
+})(jQuery);
diff --git a/payment_form.scss b/payment_form.scss
@@ -0,0 +1,34 @@
+#card-number,
+#card-cvv,
+#card-expiry-month,
+#card-expiry-year
+  background: #FFFFFF
+  border: 1px solid #D5D6D8
+  box-shadow: inset 0px 1px 1px 0px #EAEAEB
+  border-radius: 3px
+  padding: 0 15px
+  height: 40px
+  line-height: 40px
+
+  &.braintree-hosted-fields-focused
+    border-color: #7D9E1D
+
+  &.braintree-hosted-fields-invalid
+    border-color: #D9534F
+
+.checkout-card-types
+  border-radius: 3px
+  background: #F4F5F5
+  padding: 10px 15px
+  display: inline-block
+
+  img
+    border: 1px solid transparent
+    border-radius: 3px
+    display: inline-block
+    margin-right: 5px
+    opacity: .5
+
+    &.is-current
+      opacity: 1
+      border-color: #7D9E1D
diff --git a/payments_controller.rb b/payments_controller.rb
@@ -0,0 +1,9 @@
+class PaymentsController < ApplicationController
+  before_action :set_braintree_token, only: :create
+
+  # Add gon to Gemfile
+  # Add include_gon(camel_case: true, namespace: 'N3') to layout file e.g. application.html.slim
+  def set_braintree_token
+    gon.client_token = Braintree::ClientToken.generate
+  end
+end