Currently, I am in the process of replacing Stripe Checkout with Stripe.js. Although everything seems to be functioning well when entering card details, I encounter an issue where the transaction never goes through. Upon clicking submit, I receive an error message stating:
Cannot charge a customer that has no active card
I have attempted using both a test card and a genuine credit card number, yet both are resulting in the same error. Below is my stripe.rb file:
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 code including embedded 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();
}
Upon reviewing the error logs on Stripe, it provides the following information:
error:
message: "Cannot charge a customer that has no active card"
type: "card_error"
param: "card"
code: "missing"
Although I have inputted the card details correctly, the system still encounters this error. Notably, I am utilizing test keys for this setup.
An additional insight into what was sent to Stripe:
id: cus_7gzOPGpAB2DMYY
object: "customer"
account_balance: 0
created: 1452402410
currency: null
default_source: null
delinquent: false
description: "Thank you"
discount: null
email: null
livemode: false
metadata:
shipping: null
sources:
object: "list"
data:
has_more: false
total_count: 0
url: "/v1/customers/cus_7gzOPGpAB2DMYY/sources"
subscriptions:
object: "list"
data:
has_more: false
total_count: 0
url: "/v1/customers/cus_7gzOPGpAB2DMYY/subscriptions"