Intégration de Paymill dans une appli Rails + Twitter Bootstrap

form.html.erb

<% content_for :javascript_includes_bottom do %>
  <%= javascript_include_tag "https://bridge.paymill.com/" %>
  <%= javascript_include_tag "paymill" %>
<% end %>

<h4>Formulaire de paiement <small><i class="icon-lock"></i> paiement sécurisé</small></h4>
<hr />

<div class="row">

  <div class="span7">

    <form class="form-horizontal" id="payment-form" method="POST">
      <fieldset>

        <div class="alert alert-error" style="display:none;"></div>

        <input id="card-amount-int" type="hidden" value="<%= montant_ttc_int %>" />

        <!-- Name -->
        <div class="control-group">
          <label class="control-label"  for="card-holdername">Titulaire de la carte</label>
          <div class="controls">
            <input type="text" id="card-holdername" class="input-xlarge" />
          </div>
        </div>

        <!-- Card Number -->
        <div class="control-group">
          <label class="control-label" for="card-number">Numéro de carte</label>
          <div class="controls">
            <%=image_tag("moyens_de_paiment.png", class:"pull-right", style:"margin: 2px 63px 0 5px;") %>
            <input type="text" id="card-number" maxlength="16"  class="input-xlarge" style="width: 140px;" size="16" />
          </div>
          <span class="help-block offset2">Sans espace</span>
        </div>

        <!-- Expiry-->
        <div class="control-group">
          <label class="control-label" for="card-expiry">Date d'expiration</label>
          <div class="controls">
            <select class="span2" id="card-expiry-month">
              <option></option>
              <option value="01">01 - Janvier</option>
              <option value="02">02 - Février</option>
              <option value="03">03 - Mars</option>
              <option value="04">04 - Avril</option>
              <option value="05">05 - Mai</option>
              <option value="06">06 - Juin</option>
              <option value="07">07 - Juillet</option>
              <option value="08">08 - Août</option>
              <option value="09">09 - Septembre</option>
              <option value="10">10 - Octobre</option>
              <option value="11">11 - Novembre</option>
              <option value="12">12 - Décembre</option>
            </select>
            <select class="span2 card-expiry-year" name="" id="card-expiry-year">
              <option value="2013">2013</option>
              <option value="2014">2014</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
              <option value="2021">2021</option>
              <option value="2022">2022</option>
              <option value="2023">2023</option>
            </select>
          </div>
        </div>

        <!-- CVV -->
        <div class="control-group">
          <label class="control-label" for="card-cvc">Code de confirmation</label>
          <div class="controls">
            <input type="text" id="card-cvc" class="span1" maxlength="3" />
          </div>
        </div>


        <!-- Submit -->
        <div class="control-group">
          <div class="controls">
            <button class="btn btn-success submit-button" type="submit" id="submit-button">Payer <%=montant_ttc %> €</button>

            <div id="progress-bar" style="display:none;">
              <h5>Opération en cours</h5>
              <div class="progress progress-striped active">
                <div class="bar bar-warning" style="width: 100%;">Connexion au serveur Paymill</div>
              </div>
              <div id="acces_compte" style="display:none;">
                <a href="/mon_compte" class="btn btn-success">Accès à mon compte &raquo;</a>
              </div>
            </div>


          </div>
        </div>

      </fieldset>
    </form>
  </div>

  <div class="span4 offset1">
    <div class="alert alert-success">Détail de votre achat</div>
    <p><strong>Montant HT</strong> : <%=montant_ht %> €</p>
    <p><strong>TVA</strong> : 19,6 %</p>
    <p><strong>Montant TTC</strong> : <%=montant_ttc %> €</p>
  </div>

</div>

Gemfile

gem "paymill"

paymill.js.coffee

window.PAYMILL_PUBLIC_KEY = 'PUBLIC_KEY'

window.PAYMILL_ERRORS = 
  internal_server_error: "Communication échouée avec Paymill"
	invalid_public_key: "Clé publique invalide"
	unknown_error: "Erreur inconnue"
	field_invalid_card_number: "Numéro de carte de crédit manquant ou invalide"
	field_invalid_card_exp_year: "Année d’expiration manquante ou invalide"
	field_invalid_card_exp_month: "Mois d’expiration manquant ou invalide"
	field_invalid_card_exp: "Carte non valide ou expirée"
	field_invalid_card_cvc: "Numéro de contrôle invalide"
	field_invalid_card_holder: "Détenteur du compte invalide"
	field_invalid_amount_int: "Montant invalide ou manquant pour 3-D Secure"
	field_invalid_amount: "Montant invalide ou manquant pour 3-D Secure refusé"
	field_invalid_currency: "Montant invalide ou manquant pour 3-D Secure"

$("#payment-form").submit (event) ->
	
	$('#submit-button').attr "disabled", "disabled"
	$(".progress").addClass("active")
	$(".bar").removeClass("bar-success").addClass("bar-warning").text("Connexion au serveur Paymill")
	$("#progress-bar").show()
	
	
	paymill.createToken
		number: $('#card-number').val()
		exp_month: $('#card-expiry-month').val()
		exp_year: $('#card-expiry-year').val()
		cvc: $('#card-cvc').val()
		cardholder: $('#card-holdername').val()   
		amount_int: $('#card-amount-int').val()
		currency: 'EUR'
	,	(error, result) ->
		if error
			$(".alert-error").show().text(window.PAYMILL_ERRORS[error.apierror])
			$("#submit-button").removeAttr "disabled"
			$(".progress").removeClass("active")
			$(".bar").removeClass("bar-warning").addClass("bar-danger").text("transaction non valide")
			$("#progress-bar").slideUp(3000)
		else
			$(".bar").removeClass("bar-warning").text("Vérification de la transaction")
			$.ajax(
				type: 'POST'
				url: '/pay'
				dataType: 'json'
				data:
					token: result.token
				success: (data) ->
					$(".progress").removeClass("active")
					$(".bar").removeClass("bar-warning").addClass("bar-success").text("Votre compte est activé")
					$("#acces_compte").show()
				error: (data) ->
					$(".progress").removeClass("active")
					$(".bar").removeClass("bar-warning").addClass("bar-danger").text("Transaction invalide")
			)
	
	return false

paymill.rb

#config/initializer/paymill.rb

Paymill::api_key = ENV['PAYMILL_API_KEY']

paymill_controller.rb

class PaymillController < ApplicationController
  
  include PaymillHelper
  
  before_filter :authenticate_user!
  
  def form
  end
  
  def process_payment
    begin
      response = Paymill::Transaction.create(
        amount:       montant_ttc_int,
        currency:     'EUR',
        token:        params[:token]
      )
      
      if response.status == 'closed' or response.status == :closed
        current_user.has_paid(montant_ht)
        render json: response, status: :ok
      else
        raise Exception.new("Payment refused")
      end
    rescue Exception => e
      render json: {error: e.to_s}, status: :unauthorized
    end
  end

end

paymill_helper.rb

module PaymillHelper
  
  def montant_ht
    ENV['PRIX_HT'].to_f
  end
  
  def montant_ttc
    @montant_ttc ||= (montant_ht*1.196).round(2)
  end
  
  def montant_ttc_int
    @montant_ttc_int ||= (montant_ttc*100).round(0)
  end
  
end

routes.rb

get 'activation_compte_paymill' => 'paymill#form', as: :paymill_form
post 'pay' => 'paymill#process_payment', as: :paymill_process_payment