Discuss: Custom Payment Forms

[peterkeen]

• Build a custom payment form using stripe.js
• Learn how to embed forms in iframes

[nikolay12]

It would be nice to have a git commit corresponding to the code produced by each section of the tutorial.

[nikolay12]

You put the code for the form first in public/example.html and than move it to a partial. I'm a bit confused why you do this.

[nikolay12]

Also, it would be helpful to have screenshots of the end result every now and then (but at least once per section) so that one can verify that the code changes are correct. Your writing is mostly clear but screenshots would still help.

[jrgifford]

I second @nikolay12's comment - moving it from public/example to a partial is a tad confusing.

[Jack-S-Jenkins]

I am switching out stripe checkout with stripe.js using this chapter as a template. Everything works when I type in a card except it never goes through. Whenever I click submit I am getting an error that says:

Cannot charge a customer that has no active card 

I've tried using both the test card and a real credit card number and both of them are giving me the same error. Here is my stripe.rb:

class ChargesController < ApplicationController
    before_action :authenticate_user!
    def new
    end

    def create
      # Amount in cents
      @amount = 500

      customer = Stripe::Customer.create(
        :email => params[:stripeEmail],
        :source  => params[:stripeToken]
      )

      Stripe.api_key = 'sk_test_string'

charge = Stripe::Charge.create(
:amount => 1000,
:customer => customer.id,
:currency => "usd",
:card => params[:stripeToken] # replace full card details with the string token from our params
)

    rescue Stripe::CardError => e
      flash[:error] = e.message
      redirect_to new_charge_path
    end
end

Here is my haml with the embeded javascript:

.well{:style => "margin-left: 0px; position: relative; min-width: 650px; min-height: 180px; max-height: 180px"}
    = form_tag charges_path :id => 'payment-form' do
      .row
      .row
        %div
          %label.control-label{:for => "number"} Card Number
          %input#number{"data-stripe" => "number", :pattern => "[\\d ]*", :placeholder => "**** **** **** ****", :size => "20", :style => "width: 18em", :type => "text", :maxlength => "16"}/
      .row
        %div
          %label.control-label{:for => "cvc"} CVC
          %input#cvc{"data-stripe" => "cvc", :pattern => "\\d*", :placeholder => "***", :size => "3", :style => "width: 3em", :type => "text"}/
          = image_tag "credit.png"
        %div
          %label.control-label Exp (MM/YYYY)
          %input#exp-month{"data-stripe" => "exp-month", :pattern => "\\d*", :placeholder => "MM", :size => "2", :type => "text"}/
          %span /
          %input#exp-year{"data-stripe" => "exp-year", :pattern => "\\d*", :placeholder => "YYYY", :size => "4", :type => "text"}/
      .row
        .price
          5.00
        %div
          %button.btn.btn-primary.btn-large{:type => "submit"} Buy Now
:javascript
Stripe.setPublishableKey('pk_test_string');
$('#payment-form').submit(function(event) {
  var form = $(this);
  form.find('button').prop('disabled', true);
  Stripe.createToken(form, stripeResponseHandler);
  return false;
});
function stripeResponseHandler(status, response) {
  var form = $('#payment-form');
  if (response.error) {
    form.find('.payment-errors').text(response.error.message);
    form.find('button').prop('disabled', false);
  } else {
    var token = response.id;
    form.append($('<input type="hidden" name="stripeToken">').val(token));
    form.get(0).submit();
  }

Edit: I went into the error logs on stripe and it's giving me this:

error:
    message: "Cannot charge a customer that has no active card"
    type: "card_error"
    param: "card"
    code: "missing"

But I have filled out the card error and it should be working. If it helps I am using test keys.