How can I use Stripe in VueJS

Hi followind this Jeff's tutorial https://laracasts.com/series/how-to-accept-payments-with-stripe/episodes/1

we are using

< f orm action="/your-server-side-code" method="POST" >
  < s c ript
   src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_ChGGi3PIuKXcrIlN7JWZtgab"
    data-amount="999"
    data-name="Demo Site"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
   data-locale="auto"
   data-zip-code="true"
    data-currency="gbp">
  < / s cript>
< / f orm>

But for Vue the script tags are not valid. How can I rewrite the same code but to work with Stripe and Vue. Thanks

ejdelmonico

9 years ago

Level 53

I am not sure if you have a cut & paste error or what but the form and script tags need some help. The actual tags should be written as:

<script></script>
<form></form>

jaythegeek

9 years ago

Level 2

I am also having trouble with this, regardless of which way the script and form tags are.

For reference Stripe says to have the script within the form Tags - https://stripe.com/docs/checkout/tutorial

@ejdelmonico Your answer doesn't really clarify on how to use the Stripe Checkout button within a Vue Blade template! Cn you elaborate? Thanks

ejdelmonico

9 years ago

Level 53

@memerance Why wouldn't I point out that the html tags are not correct? It will obviously prevent the form from working. I wasn't pointing out the order of the tags. It is plainly obvious that in this case the script tag is inside the form tag. Anyway, the script tag just provides your data attributes to process the stripe request. So, what "exactly" are you having trouble with? You don't need to include everything in a Vue component.

https://laracasts.com/series/how-to-accept-payments-with-stripe/episodes/3

This video will explain how to extract the <script> so you can use a Vue component if that is your wish.

1 like

Please or to participate in this conversation.