added an optional payment options section

.gitignore

@@ -19,4 +19,7 @@ config/settings/*.local.yml
 config/environments/*.local.yml
 
 *.sublime-workspace
-.rvmrc
+.rvmrc
+
+# yes, I use an ide
+.idea/*

app/assets/stylesheets/checkout.css.scss

@@ -35,6 +35,144 @@
   }
 }
 
+.main_content.payment_options
+{
+  #amazon_button
+  {
+    display: inline !important;
+  }
+  div.payment_options
+  {
+    font-size: 14px;
+    background-color: #DEFBD2;
+    padding: 10px 20px;
+
+    ol
+    {
+      list-style: none;
+      margin: -10px -20px;
+      word-wrap: break-word;
+      li
+      {
+        border-bottom: 1px solid #AAF58C;
+        padding: 25px 20px;
+        overflow: auto;
+        margin-left: 0;
+        position: relative;
+        color: #333;
+        line-height: 20px;
+
+        input
+        {
+          display: inline;
+          float: left;
+          vertical-align: top;
+          margin-right: 8px;
+          margin-top: 5px;
+        }
+
+        label
+        {
+          display: inline;
+          float: left;
+          color: #333;
+          font-size: 16px;
+          font-weight: bold;
+          padding-right: 10px;
+          padding-top: 3px;
+          margin: 0;
+        }
+        div.shipping
+        {
+          float: left;
+          clear: left;
+          width: 95px;
+          margin-right: 31px;
+          margin-top: 5px;
+          padding-left: 22px;
+          display: inline;
+
+          color: #666;
+          font-size: 12px;
+          line-height: 14px;
+
+          margin: 0;
+          padding: 0;
+          border: 0;
+          font: inherit;
+          vertical-align: baseline;
+
+          span
+          {
+            display: -moz-inline-box;
+            display: -moz-inline-stack;
+            -moz-box-orient: vertical;
+            display: inline-block;
+            vertical-align: middle;
+            zoom: 1;
+            vertical-align: text-top;
+
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+
+            color: #666;
+            line-height: 14px;
+          }
+        }
+        div.description
+        {
+
+
+          p.full
+          {
+            line-height: 20px;
+            font-size: 14px;
+            margin-bottom: 5px;
+            padding-top: 3px;
+            color: #333;
+
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font: inherit;
+            vertical-align: baseline;
+
+            display: block;
+            -webkit-margin-before: 1em;
+            -webkit-margin-after: 1em;
+            -webkit-margin-start: 0px;
+            -webkit-margin-end: 0px;
+          }
+          p.delivery_date
+          {
+            font-size: 12px;
+            color: #666;
+
+            line-height: 20px;
+            margin-bottom: 5px;
+            padding-top: 3px;
+
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font: inherit;
+            vertical-align: baseline;
+
+            display: block;
+            -webkit-margin-before: 1em;
+            -webkit-margin-after: 1em;
+            -webkit-margin-start: 0px;
+            -webkit-margin-end: 0px;
+          }
+        }
+      }
+    }
+  }
+}
+
 .sidebar 
 {
   float: right;

app/controllers/preorder_controller.rb

@@ -9,12 +9,25 @@ def checkout
 
   def prefill
     @user  = User.find_or_create_by_email!(params[:email])
-    @order = Order.prefill!(:name => Settings.product_name, :price => Settings.price, :user_id => @user.id)
+
+    if Settings.use_payment_options
+      price = params['payment_option']
+      raise Exception.new("No payment option was selected") if price.nil?
+    else
+      price = Settings.price
+    end
+
+    @order = Order.prefill!(:name => Settings.product_name, :price => price, :user_id => @user.id)
 
     # This is where all the magic happens. We create a multi-use token with Amazon, letting us charge the user's Amazon account
     # Then, if they confirm the payment, Amazon POSTs us their shipping details and phone number
     # From there, we save it, and voila, we got ourselves a preorder!
-    @pipeline = AmazonFlexPay.multi_use_pipeline(@order.uuid, :transaction_amount => Settings.price, :global_amount_limit => Settings.charge_limit, :collect_shipping_address => "True", :payment_reason => Settings.payment_description)
+    @pipeline = AmazonFlexPay.multi_use_pipeline(@order.uuid,
+                                                 :transaction_amount => Settings.price,
+                                                 :global_amount_limit => Settings.charge_limit,
+                                                 :collect_shipping_address => "True",
+                                                 :payment_reason => Settings.payment_description)
+
     redirect_to @pipeline.url("#{request.scheme}://#{request.host}/preorder/postfill")
   end
 

app/views/preorder/_payment_options.html.erb

@@ -0,0 +1,21 @@
+<% if Settings.use_payment_options %>
+  <fieldset>
+    <div class="payment_options">
+      <ol>
+        <% Settings.payment_options.each_with_index do |p, index| %>
+          <li>
+            <%= radio_button_tag "payment_option", p[0], index == 0 %>
+            <%= label_tag("payment_option_#{index}", p[1]) %>
+            <div class="shipping">
+              <span><%= p[2] %></span>
+            </div>
+            <div class="description">
+              <p class="full"><%= raw p[3] %></p>
+              <p class="delivery_date"><%= p[4] %></p>
+            </div>
+          </li>
+        <% end %>
+      </ol>
+    </div>
+  </fieldset>
+<% end %>

app/views/preorder/checkout.html.erb

@@ -1,14 +1,20 @@
 <div class="gray_background">
   <div class="wrapper clearfix">
-    <div class="main_content">
+    <div class="main_content <%= "payment_options" if Settings.use_payment_options %>">
       <h3>Check out</h3>
       <p>
         Let your backers know how their payment information will be handled.
         <br />
         <br />
-        Enter your email address below.
+        <% if Settings.use_payment_options %>
+          Select a payment option and enter your email address below.
+        <% else %>
+          Enter your email address below.
+        <% end %>
+
       </p>
       <%= form_tag "/preorder/prefill", :id => "checkout" do %>
+        <%= render 'payment_options' %>
         <%= email_field_tag "email", nil, :placeholder => "hello@lockitron.com", :required => "required", :id => "email" %>
         <%= hidden_field_tag "preorder", true %>
         <%= hidden_field_tag "quantity", params[:quantity] %>

config/settings.yml

@@ -29,6 +29,22 @@ amazon_access_key: "YOUR_AMAZON_ACCESS_KEY"
 amazon_secret_key: "YOUR_AMAZON_SECRET_KEY"
 price: 	19.95
 
+# To allow different packages ("rewards" for funding) with different pricing on the payments page, set this to true
+use_payment_options: true
+
+# if use_payment_options is set to true, then a set of radio buttons will be displayed with various payment options
+# payment_options is a comma delimited list of:
+#   amount (the cost of the package in dd.cc),
+#   display ammount (the text to display on the web page for the cost)
+#   shipping description,
+#   package text (description of what they get if they select this payment option - kickstarter calls these "rewards"),
+#   delivery text
+payment_options: [
+  ["10.00", "$10", "", "You receive a great big thankyou from us!You Rock", ""],
+  ["10.00", "$100", "add $3 to ship outside the US", "You receive our print edition", "Estimated delivery: Oct 2013"],
+  ["10.00", "$125", "add $3 to ship outside the US", "You will receive both our print and digital edition", "Estimated delivery: Oct 2013"]
+]
+
 payment_description: "You really should change this text because people will see it on Amazon's order page!!!!!"
 
 # Amazon limits how much we can charge people with their Multi-Use tokens.