Stripe Question

I'm trying to follow the Laracasts video for stripe (https://laracasts.com/lessons/painless-subscriptions-with-laravel-and-stripe), but "my button" does not open a Stripe checkout modal, but rather redirects to the action. There also is no data in the $request on the other side. I'm guessing my issue is related to VUE stuff - which I haven't touched at all and find to be a bit of a hurdle (for a beginner).

I see this error in my browser console:

[Vue warn]: Error compiling template:
...
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Here is my form, just a copy/paste from Stripe (https://stripe.com/docs/checkout/tutorial):

<form action="/pay" method="POST">
                {{ csrf_field() }}
                <script
                        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                        data-key="pk_test_4CGhkyhXXXXzRtFnaPo7RWVM"
                        data-amount="999"
                        data-name="Demo Site"
                        data-description="Widget"
                        data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                        data-locale="auto"
                        data-currency="cad">
                </script>
            </form>

Am I on the right track? Do I need to mess with this VUE business to get this to work?

martinbean

8 years ago

Level 80

@kvnkrft Well, the error message is telling you what the issue is:

Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

The form contains a <script> tag.

kvnkrft

8 years ago

Level 3

Thanks @martinbean that is really helpful.

It would be awesome to get some real help though. Watching the Laracast video, at 9:00, Jeff just copy/pastes the same form into his project, and it works. So I'm assuming this does require a VUE component, but I'd much rather avoid that mess for now.

kvnkrft

8 years ago

Best Answer

Level 3

Incase someone else comes across the same issue, here's what is working for me. I got help from someone - not on here - thank you.

<div class="row">
            <div class="col-md-4"><h2>Subscription</h2></div>
            <div class="col-md-8">

                <button class="btn btn-primary" id="purchase-button">Purchase</button>

                @push('scripts')
                    <script src="https://checkout.stripe.com/checkout.js"></script>
                    <script>
                        const handler = StripeCheckout.configure({
                            key   : 'pk_test_4CGhk########Po7RWVM',
                            image : 'https://stripe.com/img/documentation/checkout/marketplace.png',
                            locale: 'auto',
                            token : function (token) {
                                console.log(token);
                            }
                        });

                        document.getElementById('purchase-button').addEventListener('click', function (e) {
                            handler.open({
                                name       : 'Company Name',
                                description: 'Service Description',
                                amount     : 2000,
                                currency   : 'usd',
                                locale     : 'auto',
                            });
                            e.preventDefault();
                        });

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

            </div>
        </div>

2 likes

martinbean

8 years ago

Level 80

@kvnkrft That video is from 2014, before Laravel started bundling Vue.js with the framework.

In a default Laravel installation, a new Vue.js application is bound to the tag, so if you place a tag inside of that then it’ll trigger the above error you’re getting.

Also, Cashier seems to have changed a lot under the hood since that video.

Please or to participate in this conversation.