如何使用 Stripe 的 JavaScript API 验证优惠券？

Question

I am using Stripe's API (v2) - https://stripe.com/docs/stripe.js

This is being implemented using Laravel's cashier, a package that ships with Laravel, with docs .

I have a very basic form at the moment, collecting the user's card info, which is then passed over to Stripe who will validate it and return a token. This token is placed in my form and is what I store and use in my system (again, all handled cleanly by Laravel).

I need to use coupons as part of this checkout process. I assumed it would be a simple case of adding the coupon field and Stripe would do the rest, but unfortunately that isn't the case - there is no validation taking place of the coupon when it is entered and the form is submitted.

Processing the coupon after submit is fine, as Laravel handles that.

My question: How can I get Stripe to validate an entered coupon using their JavaScript API?

Below is my form and the accompanying JS:

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">
    <!-- Button -->                                        
    <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>

Answer 1

I'm pretty sure you can't.

I'm validating the coupon via ajax, and make a server side call to Stripe. You can then apply the coupon to any purchase transactions on the server side when you accept the POST.

Answer 2

The solution I found is to

• create a coupon on the Stripe dashboard
• use the same value for the coupon id and code
• Then by calling the coupons retrieve method you get a boolean attribute " valid " in the coupon response returned. Here's a response example from Stripe Docs:

{
  "id": "25_5OFF",
  "object": "coupon",
  "amount_off": null,
  "created": 1617028691,
  "currency": "usd",
  "duration": "repeating",
  "duration_in_months": 3,
  "livemode": false,
  "max_redemptions": null,
  "metadata": {},
  "name": "25.5% off",
  "percent_off": 25.5,
  "redeem_by": null,
  "times_redeemed": 0,
  "valid": true
}