Capacitor SDK

The Quiltt Capacitor SDK provides native Capacitor plugin support for Quiltt Connector, with framework-specific adapters for React and Vue 3.

Link to this section#Installation

$ npm install @quiltt/capacitor @quiltt/react react react-dom
$ npx cap sync

$ npm install @quiltt/capacitor @quiltt/vue vue
$ npx cap sync

$ npm install @quiltt/capacitor
$ npx cap sync

Link to this section#Deep Link Configuration

OAuth bank authentication redirects the user back to your app via a deep link. You need to configure a URL scheme for this callback.

Link to this section#iOS — ios/App/App/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

Link to this section#Android — android/app/src/main/AndroidManifest.xml

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="myapp" />
</intent-filter>

After making configuration changes, run npx cap sync to propagate them to the native projects.

Link to this section#React

import { QuilttProvider, QuilttConnector } from '@quiltt/capacitor/react'

export const App = () => (
  <QuilttProvider token="<SESSION_TOKEN_FROM_SERVER>">
    <QuilttConnector
      connectorId="<CONNECTOR_ID>"
      appLauncherUrl="https://app.example.com/quiltt/callback"
      onExitSuccess={(m) => console.log('Connected:', m.connectionId)}
      style={{ flex: 1 }}
    />
  </QuilttProvider>
)

OAuth is handled automatically — bank auth opens in the system browser and deep link callbacks are captured on return.

For modal-based connection, use QuilttButton:

<QuilttButton connectorId="<CONNECTOR_ID>" onExitSuccess={handleSuccess}>
  Add Account
</QuilttButton>

@quiltt/capacitor/react re-exports everything from @quiltt/react, including QuilttProvider, QuilttButton, QuilttContainer, useQuilttSession, useQuilttConnector, useQuilttClient, useQuery, useMutation, and gql.

Link to this section#Vue

Register the plugin and set up deep link handling:

// main.ts
import { createApp } from 'vue'
import { QuilttPlugin } from '@quiltt/capacitor/vue'

createApp(App).use(QuilttPlugin).mount('#app')

<script setup lang="ts">
import { QuilttConnector, QuilttConnectorPlugin } from '@quiltt/capacitor/vue'
import { onMounted, onUnmounted, ref } from 'vue'

const connectorRef = ref()

onMounted(() => {
  QuilttConnectorPlugin.addListener('deepLink', ({ url }) => {
    connectorRef.value?.handleOAuthCallback(url)
  })
})
onUnmounted(() => QuilttConnectorPlugin.removeAllListeners())
</script>

<template>
  <QuilttConnector
    ref="connectorRef"
    connector-id="<CONNECTOR_ID>"
    app-launcher-url="https://app.example.com/quiltt/callback"
    @exit-success="(m) => console.log('Connected:', m.connectionId)"
    @navigate="(url) => QuilttConnectorPlugin.openUrl({ url })"
    style="width: 100%; height: 100vh"
  />
</template>

For modal-based connection:

<QuilttButton connector-id="<CONNECTOR_ID>" @exit-success="handleSuccess">
  Add Bank Account
</QuilttButton>

@quiltt/capacitor/vue re-exports everything from @quiltt/vue.

Link to this section#Other Frameworks

Use the native plugin directly with Angular, Svelte, or vanilla JS:

import { QuilttConnector } from '@quiltt/capacitor'

// Open OAuth URL in system browser
await QuilttConnector.openUrl({ url: 'https://...' })

// Listen for deep link callbacks
await QuilttConnector.addListener('deepLink', ({ url }) => {
  console.log('OAuth callback:', url)
})

Link to this section#Reconnection

Pass connectionId (React) or connection-id (Vue) to repair or reconnect an existing Connection. See the Reconnect Flow guide for more information.

<QuilttConnector connectionId="<CONNECTION_ID>" connectorId="<CONNECTOR_ID>" ... />

Link to this section#API Reference

Link to this section#Native Plugin

import { QuilttConnector } from '@quiltt/capacitor'

Link to this section#Component Props

Link to this section#Troubleshooting

Link to this section#OAuth redirects not working

• Verify appLauncherUrl matches your configured URL scheme.
• Run npx cap sync after any configuration changes.

Link to this section#Blank screen after bank auth

• Check the browser console for errors.
• Verify your Connector ID is correct.