Question

我有一个供用户使用Stripe和下面的jQuery付款的表格。

但是，当用户单击“付款”按钮而不是在页面上打开“条带”模式时，用户将被重定向到“ https://checkout.stripe.com/v3/....html?distinct_id= ...”，并且条带模式出现在该页面上。

您知道为什么Stripe模式没有出现在当前页面吗？

 <form action="{{ route('payment.chargeStripe') }}" method="post" id="paymentForm">
    {{csrf_field()}}
    <div id="credit_card_section">  
        <div class="alert alert-info" role="alert">
            <strong><i class="fa fa-info" aria-hidden="true"></i></strong>
            Click in "Pay" to pay.
        </div>
        <input type="hidden" name="stripeToken" id="stripeToken"/>
        <input type="submit" href="" id="payment" class="btn btn-primary" value=" Pay"/>
    </div>
</form>

jQuery：

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


<script>
$(function () {
    let stripe = StripeCheckout.configure({
        key: "{{config('services.stripe.key')}}",
        image: "",
        locale: "auto",
        token: (token) => {
            document.querySelector('#stripeToken').value = token.id;
            document.querySelector('#paymentForm').submit();
        }
    });

    document.getElementById('payment').addEventListener('click', function(e){

        stripe.open({
            name: 'test',
            description: '{{session('conference_name')}}',
            amount: '{{session('total') * 100}}',
            currency: 'eur'

        });
        e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
        handler.close();
    });
    </script>

Answer 1

$(function () {
    let stripe = StripeCheckout.configure({
        key: "{{YOUR_STRIPE_PUBLIC_KEY}}",
        image: "",
        locale: "auto",
        token: (token) => {
            document.querySelector('#stripeToken').value = token.id;
            document.querySelector('#paymentForm').submit();
        }
    });
    document.getElementById('payment').addEventListener('click', function(e){
        stripe.open({
            name: 'test',
            description: '{{YOUR_DESCRIPTION}}',
            amount: '12',
            currency: 'eur'
        });
        e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
        handler.close();
    });
});

从您发布的代码来看，它似乎可以正常工作，但是缺少缺少的功能，并用括号和方括号括起来。请参阅我的代码的最后一行。修复此问题后，我可以在当前页面本身中看到结帐弹出窗口。

还要检查浏览器控制台，以确保没有js错误。

在同一页面上显示条纹模态，而不是在“ https：//checkout.stripe.com/v3 / ...”中显示模态

1 个答案: