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!

  • did you find answer? – Asnad Atta Apr 11 '14 at 6:21

Here is a working solution. Add an id to your form tag. Add a stripeToken and stripeEmail hidden field to your form tag. Then when we receive the token from Stripe we will use JavaScript to set the values of the hidden fields and submit the form by referencing their id's:

<%= form_tag charges_path, id: 'chargeForm' do %>
  <script src="https://checkout.stripe.com/checkout.js"></script>
  <%= hidden_field_tag 'stripeToken' %>
  <%= hidden_field_tag 'stripeEmail' %>
  <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) { 
        document.getElementById("stripeToken").value = token.id;
        document.getElementById("stripeEmail").value = token.email;
        document.getElementById("chargeForm").submit();
      }
    });

    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 %>

This can be solved many ways but bare in mind this is a JavaScript problem nothing to do with Rails or Stripe really. Stripe are simply giving us the token we can do whatever we want with it with JavaScript.

  • 1
    This is a great answer and it helped me quite a bit. Cheers! – DnfD Jul 10 '14 at 8:20
  • 1
    Thanks, I had to search a lot to find a good example. – bobomoreno Oct 12 '14 at 12:03

With the "simple integration" you can still change the text in the default blue button with the data-label attribute(eg data-label='Buy now') using the configuration options. But yeh you have to use "custom integration" to fully style the button yourself

  • that label does not change the "Pay with Card" label on the button, instead the one on the modal form that contains the CC details. – Tobi Jul 20 '16 at 7:44

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();
}

I think you don't want to preventDefault here, because that prevents your form from being submitted to the server. Does it submit the form to the create action when you take out e.preventDefault(); ?

  • Tried removing it, but removing causes a get to /charges/index and a missing template error. Thanks for the suggestion, though. – pvskisteak5 Nov 19 '13 at 1:42
  • It sounds like instead of <%= form_tag charges_path %> you might want to specify a different path for the form to go to (e.g. new_charge_path(@charge) ). – abigezunt Dec 19 '13 at 16:48

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.