I am using the Stripe API (v2) - https://stripe.com/docs/stripe.js
This is done using Laravel cashier, the package that ships with Laravel, with docs .
I have a very simple form at the moment, collecting information about a user map, which is then passed to Stripe, which checks it and returns a token. This token is placed on my form and is what I store and use on my system (again, everything is processed using Laravel).
I need to use coupons as part of this checkout process. I suggested that this would be a simple case of adding a coupon field, and Stripe will do the rest, but unfortunately this is not the case - the coupon is authenticated when you enter it and the form is sent.
Processing the coupon after submitting will be great, as Laravel handles this.
My question is: how can I get Stripe to validate the entered coupon using the JavaScript API?
Below is my form and accompanying JS:
the form:
<form method="POST" action="/subscribe/individual" accept-charset="UTF-8" class="form-horizontal" role="form" id="subscription-form"> <input name="_token" type="hidden" value="ep1tcaWMRGrPOLSkBCBJQo1USynWW6aTjDh9xN3W"> <div class="payment-errors"></div> <div id="signupalert" style="display:none" class="alert alert-danger"> <p>Error:</p> <span></span> </div> <div class="form-group"> <label for="ccn" class="col-md-3 control-label">Credit card number</label> <div class="col-md-9"> <input class="form-control" data-stripe="number" name="ccn" type="text" value="" id="ccn"> </div> </div> <div class="form-group"> <label for="expiration" class="col-md-3 control-label">Expiration date</label> <div class="col-md-6"> <select class="form-control" data-stripe="exp-month" name="month"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select> </div> <div class="col-md-3"> <select class="form-control" data-stripe="exp-year" name="year"><option value="2014" selected="selected">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option><option value="2029">2029</option></select> </div> </div> <div class="form-group"> <label for="cvc" class="col-md-3 control-label">CVC number</label> <div class="col-md-3"> <input class="form-control" data-stripe="cvc" name="cvc" type="text" value="" id="cvc"> </div> </div> <div class="form-group"> <label for="coupon" class="col-md-3 control-label">Coupon</label> <div class="col-md-3"> <input class="form-control" data-stripe="coupon" name="coupon" type="text" value="" id="coupon"> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <button type="submit" id="btn-signup" class="btn btn-info">Sign Up</button> </div> </div>
JavaScript:
<script type="text/javascript" src="https://js.stripe.com/v2/"></script> <script> Stripe.setPublishableKey('*** removed ***'); jQuery(function($) { $('#subscription-form').submit(function(event) { 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; }); }); var stripeResponseHandler = function(status, response) { var $form = $('#subscription-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 submit $form.get(0).submit(); } }; </script>
source share