add payment views and styling

app/assets/stylesheets/application.css

@@ -14,4 +14,5 @@
  *= require bootstrap-datetimepicker
  *= require leaflet
  *= require bootstrap3-switch
+ *= require osem-payments
 */

app/assets/stylesheets/osem-payments.css.scss

@@ -0,0 +1,25 @@
+.price-tags {
+  list-style-type: none;
+}
+.price-tags li {
+  line-height: 40px;
+  position: relative;
+  margin-right: -3rem;
+}
+.price-tags a {
+  background: #2f991d;
+  color: #fff;
+  font-size: 1.5rem;
+  padding: 9px 10px;
+  text-decoration: none;
+}
+.price-tags a:after {
+  content: "";
+  float: left;
+  border-top: 20px solid transparent;
+  border-right: 20px solid #2f991d;
+  border-bottom: 20px solid transparent;
+}
+.stripe-button-el {
+  float: right;
+}

app/views/payments/_payment.html.haml

@@ -0,0 +1,35 @@
+.div
+  
+  .col-md-12.table-responsive
+    %table.table.table-hover
+      %thead
+        %tr
+          %th Ticket
+          %th Quantity
+          %th Price
+          %th Total
+      %tbody
+      - @unpaid_ticket_purchases.each do |ticket|
+        %tr
+          %td
+            = ticket.title
+          %td
+            = ticket.quantity
+          %td
+            = humanized_money_with_symbol ticket.price
+          %td
+            = humanized_money_with_symbol ticket.quantity * ticket.price
+
+= form_tag conference_payments_path do
+  %ul.price-tags.pull-right
+    %li
+      %a
+        = humanized_money_with_symbol @total_amount_to_pay
+  %script.stripe-button{"data-amount" => @total_amount_to_pay.cents,
+    "data-currency" => @total_amount_to_pay.currency,
+    "data-image" => image_url('suse.svg'),
+    "data-name" => ENV['OSEM_NAME'] || 'OSEM',
+    "data-description" => "book your tickets",
+    "data-key" => "#{Rails.configuration.stripe[:publishable_key]}",
+    "data-locale" => "auto", :src => "https://checkout.stripe.com/checkout.js"}
+  = link_to 'Edit Purchase', conference_tickets_path(@conference.short_title), class: 'btn btn-primary'

app/views/payments/new.html.haml

@@ -0,0 +1,18 @@
+.container
+  .row
+    .col-xs-6.col-xs-offset-3
+      %h1
+        Payment Summary : 
+        = humanized_money_with_symbol @total_amount_to_pay
+      - if @payment.errors.any?
+        .alert.alert-danger
+          %ul
+            - @payment.errors.full_messages.each do |msg|
+              %li= msg
+    .col-xs-8.col-xs-offset-2.well
+      = render partial: 'payment'
+  .row
+    .col-md-13
+      %p.text-muted.text-center
+        %small
+          The payment is totally secure. Your credit card details will be sent directly to our payment processor.