vue-squarepay

A Vue component that wraps the Web API functionality of Square to accept payments.

Install:

$ npm install --save vue-squarepay

Usage:

This component takes the query parameters to initiate a payment with the Squarepay WebAPI. The main settings are easily configurable with props : client, currency, amount, callbackUrl - see table below for full usage breakdown.

Params/Props:

Name	Description	Prop	Type	Required
S.com.squareup.register.WEB_CALLBACK_URI	The callback URI that Square Register will use to send a response.	Yes - callbackUrl	String	Yes
S.com.squareup.register.CLIENT_ID	Your client ID	Yes - client	String, Number	Yes
S.com.squareup.register.CURRENCY_CODE	The currency code, e.g., USD	Yes - currency	String	Yes
i.com.squareup.register.TOTAL_AMOUNT	The total amount represented in the smallest unit of the supplied currency, e.g., a value of 100 corresponds to $1.00 USD	Yes - amount	Number	Yes
S.com.squareup.register.TENDER_TYPES	Provides the tender types that will be allowed and displayed by Square Register. Must be a non-empty comma-delimited set of the following:	N/A - see below	N/A	Yes
com.squareup.register.TENDER_CARD	see above	card	String	Yes
com.squareup.register.TENDER_CARD_ON_FILE	see above	cardOnFile	String	Yes
com.squareup.register.TENDER_CASH	see above	cash	String	Yes
com.squareup.register.TENDER_OTHER	see above	other	String	Yes

Example:

Here is an example application containing the squarepay component:

JavaScript:

import Vue from 'vue';
import Squarepay from 'vue-squarepay';

new Vue({
	el: '#app',
	store,
	components: { Squarepay },
});

Markup:

<squarepay :callbackUrl="callbackUrl" :client="client" :currency="currency" :amount="amount" :tenderTypes="['card', 'cardOnFile', 'cash', 'other']"></squarepay>