Integrate with Square Payments SDK
Package Version | Capacitor Version |
---|---|
1.X | 5.X |
Version 1.X is compatible with Capacitor 5.X
npm install @dolaned/capacitor-square
npx cap sync
App Initalisation - app.component.ts (Angular example)
import { App } from "@capacitor/app";
import { Platform } from "@ionic/angular";
import { CapacitorSquare } from "@dolaned/capacitor-square";
export class AppComponent {
constructor(private platform: Platform) {
this.initializeApp();
}
private void initializeApp() {
this.platform.ready().then(() => {
App.addListener("appUrlOpen", (data: URLOpenListenerEvent) => {
console.log("appUrlOpen: " + data.url);
if (data.url.toLowerCase().startsWith("app-url-scheme://callback-url")) {
CapacitorSquare.handleIosResponse({
url: data.url
}).then(() => {
console.log("handle ios callback - successful");
}).catch(e => {
console.error("handle ios callback - error - " + e);
});
}
});
});
}
}
Payment flow
import { CapacitorSquare } from "@dolaned/capacitor-square";
//
// Initalise the square plugin
CapacitorSquare.initApp({
applicationId: "Some square app id"
}).then(() => {
console.log("Square payment ready");
}).catch(error => {
console.error(error);
});
// Listen for sucessful payments
CapacitorSquare.addListener("transactionComplete", callback => {
console.log("clientTransactionId:" + callback.clientTransactionId);
console.log("serverTransactionId:" + callback.serverTransactionId);
});
// Listen for failed payments
CapacitorSquare.addListener("transactionFailed", callback => {
console.error(callback.error);
});
// Initiate a transaction
CapacitorSquare.startTransaction({
totalAmount: 100, // amount in pennies/cents
currencyCode: "GBP", // ISO currency code, must be support by square
allowedPaymentMethods: ["CARD"], // Sqaure TendType: https://developer.squareup.com/docs/api/point-of-sale/android/com/squareup/sdk/pos/ChargeRequest.TenderType.html
autoReturnTimeout: 4000, // The timeout to set in milliseconds, or AutoReturn.NoTimeout. If you specify a timeout, it must be between 3200 milliseconds and 10000 milliseconds.
callbackUrl: "app-url-scheme://callback-url" // see iOS setup
}).then(() => {
console.log("transaction started");
}).catch(error => {
console.error(error);
});
Note: autoReturnTimeout is only available on Android
Follow these setup steps from square to enable call back to your app: Square Documentation.
initApp(...)
startTransaction(...)
handleIosResponse(...)
addListener(...)
addListener(...)
- Interfaces
- Enums
initApp(options: { applicationId: string; }) => any
Param | Type |
---|---|
options |
{ applicationId: string; } |
Returns: any
startTransaction(options: { totalAmount: number; currencyCode: string; allowedPaymentMethods?: string[] | null; autoReturnTimeout?: number | AutoReturn.NoTimeout | null; callbackUrl?: string | null; }) => any
Param | Type |
---|---|
options |
{ totalAmount: number; currencyCode: string; allowedPaymentMethods?: {} | null; autoReturnTimeout?: number | null; callbackUrl?: string | null; } |
Returns: any
handleIosResponse(options: { url: string; }) => any
Param | Type |
---|---|
options |
{ url: string; } |
Returns: any
addListener(eventName: 'transactionComplete', listenerFunc: TransactionCompletedListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Param | Type |
---|---|
eventName |
"transactionComplete" |
listenerFunc |
(callback: { clientTransactionId: string; serverTransactionId: string; }) => void |
Returns: any
addListener(eventName: 'transactionFailed', listenerFunc: TransactionFailedListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Param | Type |
---|---|
eventName |
"transactionFailed" |
listenerFunc |
(callback: { error: any; }) => void |
Returns: any
Prop | Type |
---|---|
remove |
() => any |
Members | Value | Description |
---|---|---|
NoTimeout |
0 |
No timeout |
Min |
3200 |
Minimum timeout value (3200 milliseconds) |
Max |
10000 |
Maximum timeout value (10000 milliseconds) |