CODEWITHSUNDEEP
javascriptstripe-paymentsforms
DEEGROY
DEEGROY

Reputation: 27

Stripe form does not create any credit card

I'm a beginner with Stripe and i am struggling with the doc, i've tried several tutorials but none of them could make my form work.

The problem is that the form does create a token and a customer (i can see it in my Stripe Dashboard) but it does not create a credit card for that customer and when i try to subscribe that customer to a plan, i get an error.

here is my form's code: 

<body>

    <div id="listblock">

        <div class="lines" id="logo">
            <h2>Pay from here! </h2>
        </div>

        <form action="payment.php" method="post" id="payment-form">
            <input class="card-number" type="text" required placeholder="1234 5678 8765 4321">
            <input class="card-expiry-month" type="number" required placeholder="MM">
            <input class="card-expiry-year" type="number" required placeholder="YY">
            <input class="card-cvc" type="number" required placeholder="CVC">
            <input type="radio" name="plan" value="1" checked>Basic annual subscription (99€/year)
            <input type="radio" name="plan" value="2" checked>Basic monthly subscription (9,99€/month)

            <button class="button" type="submit">Submit Payment</button>
        </form>

    </div>

</body>

<script src="https://js.stripe.com/v2/"></script>
<script src="https://js.stripe.com/v3/"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
    Stripe.setPublishableKey('my key is here');

    var $form = $('#payment-form'); // On récupère le formulaire

    $form.submit(function (e) {

        e.preventDefault();
        $form.find('button').prop('disabled', true); // On désactive le bouton submit

        Stripe.card.createToken({

            number:     $('.card-number').val(),
            cvc:        $('.card-cvc').val(),
            exp_month:  $('.card-expiry-month').val(),
            exp_year:   $('.card-expiry-year').val()

        }, function (status, response) {

            if (response.error) { // Ah une erreur !

                // On affiche les erreurs
                $form.find('.payment-errors').text(response.error.message);
                $form.find('button').prop('disabled', false); // On réactive le bouton

            } else { // Le token a bien été créé

                var token = response.id; // On récupère le token
                // On crée un champs cachée qui contiendra notre token
                $form.append($('<input type="hidden" name="stripeToken" />').val(token));
                $form.get(0).submit(); // On soumet le formulaire

            }
        });
    });


</script>

the error given by Stripe's API is: 

    {
  "error": {
    "type": "invalid_request_error",
    "message": "This customer has no attached payment source"
  }
}

Thanks for your help !

Upvotes: 0

Views: 355

Answers (1)

sha-1
sha-1

Reputation: 2093

As it seems you are just developing your application, you should definitely use the updated version of Stripe which is v3.

Now, if you want your customer to subscribe in a recurrent payment plan, you should first create a Subscription Plan (Either using the API or from Dashboard), then create Customer. To create a customer you need to code like the following:

stripe.customers.create({
  email: "[email protected]",
}, function(err, customer) {
  // asynchronously called
});

And then subscribe the customer to the Plan you've already created. All of it is described in the official doc very nicely, just read it carefully.

Also, if you don't need to implement a recurrent subscription, just want to store the customer information for make later payment, you can just follow this quick start guide, specifically this part.

Upvotes: 1

Related Questions