Stripe Payment API 一次又一次地发送令牌请求

debugcn 发表于 Dev

莫伊兹·阿里夫

我已经创建了代码以从条带中获取令牌，过程是当我单击按钮时请求转到 js，在 js 中我从条带中请求令牌但问题是响应请求成功时我提交了表单使用 jquery 一次又一次地从条带中获取脚本请求令牌。

请帮助我做错的地方。

这是 HTML 代码

<form action="submit.php" id="payment-form" method="post">
    <span class="payment-errors" style="color:red;font-size: 13px"></span>
    <p>
        <label for="">Card Number</label>
        <input type="text" data-stripe="number">
    </p>

    <p>
        <label for="">CVC</label>
        <input type="text" data-stripe="cvc">
    </p>

    <p>
        <label for="">Expiration mm/yyyy</label>
        <input type="text" data-stripe="exp-month">
        <input type="text" data-stripe="exp-year">
    </p>

    <button type="submit" name="submit">Submit</button>
</form>

这是我的js代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
    Stripe.setPublishableKey('pk_test_J16ou3qOqkQG190gDIb0DjeE');
    $('#payment-form').submit(function(e){
        $form = $(this);
        $form.find('button').prop('disabled' , true);

        Stripe.card.createToken($form, function(status, response){
            console.log(status);
            console.log(response);
            if(response.error){
                $form.find('.payment-errors').html(response.error.message);
                $form.find('button').prop('disabled' , false);
            } else{
                var token = response.id;
                $form.append($('<input type="hidden" name="stripe-token" />').val(token));
                $('#payment-form').submit();
            }
        });
    return false;
    });
</script>

这是我的控制台图像

伊舍格

你有

$('#payment-form').submit();

在响应函数中。如果响应成功，则再次触发提交事件。

如果您需要在提交之前检索令牌（将其与请求一起发送），请先检查您是否拥有它。如果没有，请检索它并发送表格。如果这样做，只需发送表单（即返回 true 而不是 triggering submit）。

$('#payment-form').submit(function(e){
    $form = $(this);
    $form.find('button').prop('disabled' , true);

    Stripe.card.createToken($form, function(status, response){
        console.log(status);
        console.log(response);
        if(response.error){
            $form.find('.payment-errors').html(response.error.message);
            $form.find('button').prop('disabled' , false);
        } else{
            var token = response.id;
            $form.append($('<input type="hidden" name="stripe-token" />').val(token));
            return true;
        }
    });
    return false;
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。