Stripe simple checkout form with blade templates

Hi,

I am new to stripe and trying to integrate stripe with Laravel. There is one strange issue (Or I may be doing some basic thing wrong). Here is the case,

I am trying to add the simple checkout button of stripe and the blade looks like

@extends('layouts.app')

@section('content')


    <div class="container">

        <form action="/your-server-side-code" method="POST">
            <script
                    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                    data-key="pk_test_xxxxxxxxxxxxxxxxxxxxx"
                    data-amount="2000"
                    data-name="Demo Site"
                    data-description="2 widgets"
                    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                    data-locale="auto">
            </script>
        </form>


    </div>
@endsection

Once I click on the button it tries to submit the form instead of loading the checkout popover.

But if I paste the same form in HTML file like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<form action="/your-server-side-code" method="POST">
    <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="pk_test_xxxxxxxxxxxxxxxxxxxxx"
            data-amount="2000"
            data-name="Demo Site"
            data-description="2 widgets"
            data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
            data-locale="auto">
    </script>
</form>

</body>
</html>

It works as expected.

Any clue? Your feedback will be very helpful to me.

Thank you.

br0kenb1nary

9 years ago

Level 1

Wrap your Stripe script tag in the @verbatim syntax.

Your code should be:

@extends('layouts.app')

@section('content')


    <div class="container">

         @verbatim
        <form action="/your-server-side-code" method="POST">
          {{ csrf_field() }}
            <script
                    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                    data-key="pk_test_xxxxxxxxxxxxxxxxxxxxx"
                    data-amount="2000"
                    data-name="Demo Site"
                    data-description="2 widgets"
                    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                    data-locale="auto">
            </script>
        </form>
         @endverbatim


    </div>
@endsection

br0kenb1nary

9 years ago

Level 1

Just an update to anyone planning on using Stripe with Laravel. Spark makes developing and deploying your project with integrated payment, user and team options - very easy!

richardjkeys

9 years ago

Level 1

I was having the same issue - the problem seems to be that the layout introduces a Vue component attached to the div#app element.

<script> inside Vue templates then aren't working as expected.

Please or to participate in this conversation.