<!doctype html> <html> <head> <title>Onboard</title> <script type="text/javascript" src="https://js.stripe.com/v2/"></script> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> <script type="text/javascript" src="https://js.stripe.com/v2/"></script> <script type="text/javascript"> // This identifies your website in the createToken call below Stripe.setPublishableKey('pk_test_dVcAYg8GCyNtREylJTn624Rw'); // ... jQuery(function($) { $('#new_order').submit(function(event) { var $form = $(this); // Disable the submit button to prevent repeated clicks $form.find('button').prop('disabled', true); Stripe.card.createToken($form, stripeResponseHandler); // Prevent the form from submitting with the default action return false; }); function stripeResponseHandler(status, response) { var $form = $('#new_order'); if (response.error) { // Show the errors on the form $form.find('.payment-errors').text(response.error.message); $form.find('button').prop('disabled', false); } else { // response contains id and card, which contains additional card details var token = response.id; // Insert the token into the form so it gets submitted to the server $form.append($('<input type="hidden" name="order[stripe_token]" />').val(token)); // and submit $form.get(0).submit(); } }; }); </script></head> <body> <div class="container"> <header class="row"> <h1 class="two columns"> <%= link_to rooms_path do %> <%= image_tag "logo.png" %> <% end %> </h1> <div class="three columns"> <%= simple_form_for :search, method: :get do |search| %> <%= search.input :query, label: false %> <% end %> </div> <nav class="seven columns"> <% if current_user? %> <%= current_user.name %> <%= link_to "Dashboard", user_path(current_user) %> <%= link_to "Add a room", new_user_room_path(current_user) %> <%= link_to "Orders", orders_path(current_user) %> <%= link_to "Sign out", session_path(@session), method: :delete, data: { confirm: 'Are you sure?' } %> <% else %> <%= link_to "Sign up", new_user_path %> <%= link_to "Sign in",new_session_path %> <% end %> </nav> </header> <% if ! flash.empty? %> <% flash.each do | key, value | %> <div class="flash <%=key%>"><%= value %><hr /></div> <% end %> <% end %> </div> <article class="row"> <%= yield %> </article> <footer> <p>© <%= Date.today.year %> Onboard Ltd</p> </footer> </div> </body> </html>