# Capacitor SDK
URL: https://www.quiltt.dev/connector/sdk/capacitor
Description: Integrate Quiltt Connector into your Capacitor or Ionic app on iOS and Android. Learn how to install the package, configure deep links for OAuth, and get started with React and Vue examples.
Navigation: connector → sdk → capacitor
Tags: Connector, SDKs
Content Length: 6k characters

The [Quiltt Capacitor SDK](https://www.npmjs.com/package/@quiltt/capacitor) provides native Capacitor plugin support for Quiltt Connector, with framework-specific adapters for React and Vue 3.

| Package | Use case |
| --- | --- |
| `@quiltt/capacitor` | Any framework (Vue, Angular, Svelte, vanilla JS) |
| `@quiltt/capacitor/vue` | Vue 3 components and composables |
| `@quiltt/capacitor/react` | React components and hooks |

Info - Documentation:
For full documentation, additional examples and the source code, see the [Quiltt Capacitor SDK on
  GitHub](https://github.com/quiltt/quiltt-sdks/tree/main/packages/capacitor#readme).

## Installation

Code Examples:

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

## 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.

### iOS — `ios/App/App/Info.plist`

```xml

Key:
CFBundleURLTypes

Array:

Dict:

Key:
CFBundleURLSchemes

    

Array:

String:
myapp

```

### Android — `android/app/src/main/AndroidManifest.xml`

```xml
<intent-filter>
  [action]
  [category]
  [category]
  [data]
</intent-filter>
```

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

## React

```tsx

  

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

)
```

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`:

```tsx

QuilttButton:
" onExitSuccess={handleSuccess}>
  Add Account

```

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

## Vue

Register the plugin during app setup:

```ts
// main.ts

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

Render the inline Connector with `QuilttConnector`. The component embeds the Connector in an iframe and manages the OAuth deep link flow internally, so you no longer wire up a `deepLink` listener yourself:

```vue

Script:

Template:
<QuilttConnector
    connector-id="<CONNECTOR_ID>"
    app-launcher-url="https://app.example.com/quiltt/callback"
    theme-mode="auto"
    @exit-success="(m) => console.log('Connected:', m.connectionId)"
    style="width: 100%; height: 100vh"
  />

```

Info:
`QuilttConnector` registers its own `deepLink` listener and opens OAuth URLs in the system browser for you. To deliver a callback URL manually, call the exposed `handleOAuthCallback(url)` method through a template `ref`.

For modal-based connection:

```html

QuilttButton:
" @exit-success="handleSuccess">
  Add Bank Account

```

`@quiltt/capacitor/vue` re-exports everything from `@quiltt/vue`, including `QuilttPlugin`, `QuilttButton`, `QuilttContainer`, `useQuilttSession`, `useQuilttConnector`, `useQuery`, `useMutation`, and `gql`.

## Other Frameworks

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

```ts

// 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)])
```

## Reconnection

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

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

## API Reference

### Native Plugin

```ts

```

| Method | Description |
| --- | --- |
| `openUrl({url})` | Opens a URL in the system browser |
| `getAppLauncherUrl()` | Returns the app launcher URL |
| `addListener('deepLink', callback)` | Listens for deep link callbacks |
| `removeAllListeners()` | Removes all event listeners |

### Component Props

| Prop | Type | Description |
| --- | --- | --- |
| `connectorId` | string | **Required.** Quiltt Connector ID |
| `connectionId` | string | Existing connection ID for reconnection |
| `institution` | string | Pre-select an institution |
| `themeMode` | `'light'` \| `'dark'` \| `'auto'` | Theme mode for the Connector UI. Defaults to `'light'` |
| `appLauncherUrl` | string | Deep link URL for OAuth callbacks |
| `onEvent` | `(eventType, metadata) => void` | Intermediate Connector event |
| `onLoad` | `(metadata) => void` | Connector loaded |
| `onExit` | `(eventType, metadata) => void` | Connector exited via an event |
| `onExitSuccess` | `(metadata) => void` | Connection successful |
| `onExitAbort` | `(metadata) => void` | User cancelled |
| `onExitError` | `(metadata) => void` | Error occurred |

## Troubleshooting

### OAuth redirects not working

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

### Blank screen after bank auth

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