diff --git a/app/assets/images/credit_card.png b/app/assets/images/credit_card.png
new file mode 100644
index 00000000..a5e0b1e3
Binary files /dev/null and b/app/assets/images/credit_card.png differ
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index d0447354..84c0bd9a 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -10,6 +10,7 @@
  *= require osem-splash
  *= require font-awesome
  *= require osem-fonts
+ *= require osem-payments
  *= require bootstrap-markdown
  *= require bootstrap-datetimepicker
  *= require leaflet
diff --git a/app/assets/stylesheets/osem-payments.css.scss b/app/assets/stylesheets/osem-payments.css.scss
new file mode 100644
index 00000000..b74a6324
--- /dev/null
+++ b/app/assets/stylesheets/osem-payments.css.scss
@@ -0,0 +1,24 @@
+.price-tags {
+  list-style-type: none;
+  padding-top: 2rem;
+  // display: inline-block;
+}
+.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;
+}
diff --git a/app/helpers/payments_helper.rb b/app/helpers/payments_helper.rb
new file mode 100644
index 00000000..50b53262
--- /dev/null
+++ b/app/helpers/payments_helper.rb
@@ -0,0 +1,13 @@
+module PaymentsHelper
+  def months
+    (1..12).collect{|n| ["#{n} - #{Date::MONTHNAMES[n]}", n]}
+  end
+
+  def years
+    (Date.current.year..Date.current.year + 15)
+  end
+
+  def card_types
+    [[['Visa', 'visa'], ['MasterCard', 'master'], ['Discover', 'discover'], ['American Express', 'american_express']]]
+  end
+end
diff --git a/app/views/payments/_payment.html.haml b/app/views/payments/_payment.html.haml
new file mode 100644
index 00000000..c0f47e38
--- /dev/null
+++ b/app/views/payments/_payment.html.haml
@@ -0,0 +1,34 @@
+= semantic_form_for(@payment, url: conference_payments_path) do |f|
+  .form-group
+    = f.label :first_name, 'First name(as on card)'
+    = f.text_field :first_name, class: "form-control", placeholder: "John"
+  .form-group
+    = f.label :last_name, 'Last name(as on card)'
+    = f.text_field :last_name,class: "form-control", placeholder: "Doe"
+  %span.pull-right
+    %img.img-responsive{:src => image_url('credit_card.png')}
+  .form-group
+    = f.label :credit_card_number, "Credit Card number(without spaces)"
+    .input-group
+      = f.text_field :credit_card_number, class: "form-control", placeholder: "XXXX XXXX XXXX XXXX"
+      %span.input-group-addon
+        %i.fa.fa-credit-card
+  .form-group.col-md-6
+    = f.label :expiration_month
+    = f.select :expiration_month, months, {}, class: "form-control"
+  .form-group.col-md-6
+    = f.label :expiration_year
+    = f.select :expiration_year, years, {}, class: "form-control"
+  .form-group.col-md-10
+    = f.label :card_verification_value, 'Security Code(3 on back, AmEx: 4 on front)'
+    = f.text_field :card_verification_value, class: "form-control", placeholder: "XXX"
+    = f.number_field :amount, value: @total_amount_to_pay, class: "form-control", type: 'hidden'
+  %ul.price-tags.pull-right
+    %li.text-muted
+      you will pay
+    %li
+      %a
+        = number_to_currency @total_amount_to_pay
+  .form-group
+    = f.submit "Charge Card", class: "btn btn-primary"
+    = link_to "Cancel", conference_conference_registrations_path, class: "btn btn-danger"
diff --git a/app/views/payments/index.html.haml b/app/views/payments/index.html.haml
new file mode 100644
index 00000000..702e02e1
--- /dev/null
+++ b/app/views/payments/index.html.haml
@@ -0,0 +1,32 @@
+.container
+  .row
+    .col-md-12
+      .page-header
+        %h1
+          Payment Attempts for
+          = @conference.title
+      - if !flash[:notice].blank?
+        .alert.alert-success
+          = flash[:notice]
+      %table.table.table-bordered.table-striped
+        %tr
+          %th First Name
+          %th Last Name
+          %th Last 4
+          %th Amount
+          %th Status
+          %th Authorization Code
+        - if @payments.size > 0
+          - @payments.each do |payment|
+            %tr
+              %td= payment.first_name
+              %td= payment.last_name
+              %td= payment.last4
+              %td= number_to_currency payment.amount
+              %td= payment.status
+              %td= payment.authorization_code
+        - else
+          %tr
+            %td{:colspan => "5"} No payments have been attempted.
+      .pull-right
+        = link_to "Conference Registration", conference_conference_registrations_path(@conference.short_title), class: 'btn btn-primary'
diff --git a/app/views/payments/new.html.haml b/app/views/payments/new.html.haml
new file mode 100644
index 00000000..f7e4fc36
--- /dev/null
+++ b/app/views/payments/new.html.haml
@@ -0,0 +1,14 @@
+.container
+  .row
+    .col-xs-6.col-xs-offset-3
+      %h1
+        Buy tickets for
+        = @total_amount_to_pay.symbol
+        = humanized_money @total_amount_to_pay
+      - if @payment.errors.any?
+        .alert.alert-danger
+          %ul
+            - @payment.errors.full_messages.each do |msg|
+              %li= msg
+    .col-xs-6.col-xs-offset-3.well
+      = render partial: 'payment'