Stripe customer is created without the credit card information - django

Question

I am trying to setup stripe as my payement gateway and having some issue.
I want my user to input their credit card info to be able to charge them later on. (aka creating a customer)
After entering all information and press enter, my customer is created on Stripe.com but the credt card information is not saved (so I cannot charge it later on).
On my database the token is saved and when i try to put a charge on the customer I got an answer from Stripe api "cannot charge, user do not have credit card" ...
Here is my code:
views.py
import stripe
def paiements(request):
stripe.api_key = "sk_test_mytestapikey"
utilisateur = request.user
cc_save = Stripetoken.objects.filter(utilisateur= request.user).exists() #check if the user have already a stripe token.
if request.method == 'POST':
token_cc = request.POST.get('stripeToken') #request.POST['stripeToken'] give me an error.
customer = stripe.Customer.create(
card = token_cc,
description = utilisateur.email,
email = utilisateur.email
)
Stripetoken.objects.create(utilisateur= request.user, token = customer.id , description= request.user.email) #save the customer information and token to charge later on
return HttpResponseRedirect('/frontprop/tb/') # Redirect after POST
args = {}
args.update(csrf(request))
args['cc_save'] = cc_save
return render_to_response('b_param_paiement.html', args)
and my html page:
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('pk_test_withmyid');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(e) {
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;
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#toggle").click(function(){
$("#cbinfo").toggle();
});
});
</script>
<form action="/frontprop/tb/param/paiements/" method="POST" id="payment-form"> {% csrf_token %}
<span class="payment-errors"></span>
<div class="form-row">
<label>
<span>Votre numero de carte bancaire:</span>
<input class="form-control" type="text" size="20" data-stripe="number"/>
</label>
</div>
<div class="form-row">
<label>
<span>CVC:</span>
<input class="form-control" type="text" size="4" data-stripe="cvc"/>
</label>
</div>
<div class="form-inline">
<label>
<span>Expiration (MM/YYYY):</span> <br>
<input class="form-control" type="text" size="2" data-stripe="exp-month"/>
</label>
<span> / </span>
<input class="form-control" type="text" size="4" data-stripe="exp-year"/>
</div>
<br>
<button id="stripebutton" class="btn btn-primary" type="submit">Enregistrer la carte</button>
</form>
FYI: I have followed this https://stripe.com/docs/tutorials/forms
Thank you for your help

Answer 1

You need to create a Plan that is free and assign them to that plan, you can later charge that customer with your one off charges as needed.

Answer 2

As stated by Tom, there was a Javascript problem when loading/posting the form.
I have to move on top right after the stripe.js.
Thank Tom I am all set :)