Braintree Hosted Fields

payment_form.html.slim

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')

payment_form.js

// 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);

payment_form.scss

#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

payments_controller.rb

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