[Stripe] modal popup not showing up

Published 1 year ago by charlieBrown

I'm a new guy to Laravel and I can't understand why the modal popup from Stripe is not showing up when I click on the Pay with card.

Routes

    /*
     * Stripe get checkout
     */
    Route::get('products', '[email protected]');

getProducts

public function getProducts(){
        return view('products.products');
}

products View

<head>
    @extends('layouts.app')
    <link rel="stylesheet" href="{{ asset('css/pricing.css') }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

@section('content')
<body>
<br/><br/><br/>

<!-- Plans -->
<section id="plans">
    <div class="container">
        <div class="row">
            <!-- item -->
            <div class="col-md-4 text-center">
                <div class="panel panel-danger panel-pricing">
                    <div class="panel-heading">
                        <i class="fa fa-desktop"></i>
                        <h3>Plan 1</h3>
                    </div>
                    <div class="panel-body text-center">
                        <p><strong>11€</strong></p>
                    </div>
                    <ul class="list-group text-center">
                        <li class="list-group-item"><i class="fa fa-check"></i> 10 GoldKeys to get your house.</li>
                    </ul>
                    <div class="panel-footer">
                        <script
                                src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                                data-key="pk_test_9fL2L7otixmLLOOrc1buuRbj"
                                data-amount="999"
                                data-name="easyrif"
                                data-description="Widget"
                                data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                                data-locale="auto"
                                data-zip-code="true"
                                data-currency="eur">
                        </script>
                    </div>
                </div>
            </div>
            <!-- /item -->

            <!-- item -->
            <div class="col-md-4 text-center">
                <div class="panel panel-warning panel-pricing">
                    <div class="panel-heading">
                        <i class="fa fa-desktop"></i>
                        <h3>Plan 2</h3>
                    </div>
                    <div class="panel-body text-center">
                        <p><strong>21€</strong></p>
                    </div>
                    <ul class="list-group text-center">
                        <li class="list-group-item"><i class="fa fa-check"></i> 20 GoldKeys to get your house.</li>
                    </ul>
                    <div class="panel-footer">
                        <a class="btn btn-lg btn-block btn-warning" href="#">BUY NOW!</a>
                    </div>
                </div>
            </div>
            <!-- /item -->

            <!-- item -->
            <div class="col-md-4 text-center">
                <div class="panel panel-success panel-pricing">
                    <div class="panel-heading">
                        <i class="fa fa-desktop"></i>
                        <h3>Plan 3</h3>
                    </div>
                    <div class="panel-body text-center">
                        <p><strong>42€</strong></p>
                    </div>
                    <ul class="list-group text-center">
                        <li class="list-group-item"><i class="fa fa-check"></i> 40 GoldKeys to get your house.</li>
                    </ul>
                    <div class="panel-footer">
                        <a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
                    </div>
                </div>
            </div>
            <!-- /item -->

        </div>
    </div>
</section>
<!-- /Plans -->
</body>
@endsection

css/pricing

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

.panel-pricing {
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.panel-pricing:hover {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}
.panel-pricing .panel-heading {
    padding: 20px 10px;
}
.panel-pricing .panel-heading .fa {
    margin-top: 10px;
    font-size: 58px;
}
.panel-pricing .list-group-item {
    color: #777777;
    border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-pricing .list-group-item:last-child {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.panel-pricing .list-group-item:first-child {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
.panel-pricing .panel-body {
    background-color: #f0f0f0;
    font-size: 40px;
    color: #777777;
    padding: 20px;
    margin: 0px;
}

.panel:hover {
    padding:10px;
}

.panel {

    transition: padding 0.5s;
    -moz-transition: padding 0.5s; /* Firefox 4 */
    -webkit-transition: padding 0.5s; /* Safari and Chrome */
    -o-transition: padding 0.5s; /* Opera */
    -ms-transition:padding 0.5s; /* IE9 (maybe) */

}

On a test page with only the button it shows up without any problems.

Please sign in or create an account to participate in this conversation.