tristansokol / vue-square

An example of using Vue.js with the Square payment form

vue-square

A example of using the Square Payment Form with Vue.js. Please read the full description in this blog post.

To try it out, first clone the repo and then run npm run dev to start up the development server.

This example was made with the vue-cli, so most of the boilerplate is from the default 'webpack' project.

Other things you might be interested in:

• Square's developer documentation: https://docs.connect.squareup.com/
• The guide for the vue-cli webpack project and docs for vue-loader.

Other Commands

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

vue-square's Issues

After using Audit fix, site no longer works

I ran

npm audit fix

When I try to run it, I get

Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'requestCardNonce' of undefined"

found in

---> <PaymentForm> at src/components/paymentForm.vue
       <Product> at src/components/product.vue
         <Store> at src/components/store.vue
           <App> at src/App.vue
             <Root>
warn @ vue.esm.js?efeb:628
logError @ vue.esm.js?efeb:1893
globalHandleError @ vue.esm.js?efeb:1888
handleError @ vue.esm.js?efeb:1848
invokeWithErrorHandling @ vue.esm.js?efeb:1871
invoker @ vue.esm.js?efeb:2188
original._wrapper @ vue.esm.js?efeb:7565
vue.esm.js?efeb:1897 TypeError: Cannot read property 'requestCardNonce' of undefined
    at VueComponent.requestCardNonce (paymentForm.vue?edb5:166)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-1a27c10a","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/paymentForm.vue (app.js:954), <anonymous>:140:24)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at HTMLButtonElement.invoker (vue.esm.js?efeb:2188)
    at HTMLButtonElement.original._wrapper (vue.esm.js?efeb:7565)

Gridsome

Would you do another tutorial with gridsome? I'm having trouble integrating square with it

Does this code still works? It seems out dated for me

No Template

👉 Please follow one of the issue templates provided by the repo - if you are seeing this message, it means you haven't.

If you don't follow the issue template, we may immediately close it.

Remove async from payment form script tag

The script tag in index.html for the paymentform library is like this:

<script async type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

However, this causes an SqPaymentForm is not defined error when loading the form, because paymentform is not loaded when it's called within the mounted hook. Removingh the asyanc from the tag like so

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

fixes the problem (this was pointed out to me by a Square engineer).