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

Posted 2023-02-22

【中文标题】如何使用 Stripe 的 JavaScript API 验证优惠券？

【英文标题】：How to validate coupon using Stripe's JavaScript API?

【发布时间】：2015-06-14 10:53:50

【问题描述】：

我正在使用 Stripe 的 API (v2) - https://stripe.com/docs/stripe.js

这是使用 Laravel 的收银员实现的，这是 Laravel 附带的一个包，带有 docs。

目前我有一个非常基本的表单，收集用户的卡信息，然后将其传递给 Stripe，后者将对其进行验证并返回一个令牌。这个令牌放在我的表单中，是我在系统中存储和使用的（同样，所有这些都由 Laravel 干净地处理）。

我需要在结账过程中使用优惠券。我以为添加优惠券字段是一个简单的案例，其余的工作由 Stripe 完成，但不幸的是，事实并非如此——当优惠券被输入并提交表单时，并没有对其进行验证。

提交后处理优惠券没问题，因为 Laravel 会处理。

我的问题：如何让 Stripe 使用他们的 javascript API 验证输入的优惠券？

下面是我的表格和随附的 JS：

表格：

<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>

【参考方案1】：

我很确定你不能。

我正在通过 ajax 验证优惠券，并对 Stripe 进行服务器端调用。然后，当您接受 POST 时，您可以将优惠券应用于服务器端的任何购买交易。

【讨论】：

嗨，easyjo，我想知道您是否有一些示例代码来说明您如何使用 AJAX 执行此操作？

@MichelleGlauser 我只是对本地端点进行 ajax，然后通过 Stripe API 进行服务器端调用以确认优惠券是否有效。如果有效，我只渲染一个 200，并在 json 中包含优惠券的详细信息，否则我渲染一个 404。

【参考方案2】：

我找到的解决办法是

在 Stripe 仪表板上创建优惠券 对优惠券id和code使用相同的值 然后通过调用优惠券retrieve 方法，您会在返回的优惠券响应中获得布尔属性“valid”。 这是来自 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