Stripe Checkout with Custom Integration in Rails

javascript, ruby-on-rails, stripe-payments

Solution

You need to finish the token callback function.

First pass in the response from the Stripe handler as an argument and then append the token id and email as inputs to the form before submitting it: (untested)

token: function(response) {
  var tokenInput = $("<input type=hidden name=stripeToken />").val(response.id);
  var emailInput = $("<input type=hidden name=stripeEmail />").val(response.email);
  $("form").append(tokenInput).append(emailInput).submit();
}

Problem

I am trying to implement Stripe Checkout using the custom integration in a rails app - my checkout form shows a green checkmark saying it submitted but the payment is not being processed. The simple integration works well, as do subscription payments on other parts of my site. Like the simple integration, I am trying to place the custom integration script inside of a form_tag - I followed the Rails Checkout guide, which unfortunately is only written for the simple integration. Like the guide, I have a charges controller, with new and create actions to show the form and create the charges. Charges Controller: ``` class ChargesController < ApplicationController def new end def create # Amount in cents @amount = 500 customer = Stripe::Customer.create( :email => params[:stripeEmail], :card => params[:stripeToken] ) charge = Stripe::Charge.create( :customer => customer.id, :amount => @amount, :description => 'Rails Stripe customer', :currency => 'usd' ) rescue Stripe::CardError => e flash[:error] = e.message redirect_to charges_path end end ``` And in my new view, the form is setup as follows: ``` <%= form_tag charges_path do %> <script src="https://checkout.stripe.com/checkout.js"></script> <button id="customButton" class="btn btn-large btn-primary">Buy Now</button> <script> var handler = StripeCheckout.configure({ key: '<%= ENV["STRIPE_PUBLIC_KEY"] %>', image: '/assets/my_logo.png', token: function(token, args) { // Use the token to create the charge with a server-side script. } }); document.getElementById('customButton').addEventListener('click', function(e) { // Open Checkout with further options handler.open({ name: 'My Company', description: 'Product ($60.00)', amount: 60*100, shippingAddress: true }); e.preventDefault(); }); </script> <% end %> ``` I have tried just about everything I can think of, but the form will not be submitted to trigger the create action. I see the note to use a server side script, but can anyone point me in the right direction on what I may be missing? Any help is much appreciated!! Thanks!

Original source