> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chift.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Qonto

export const CoverageIframe = ({api = 'accounting', connectors}) => {
  const [theme, setTheme] = React.useState('light');
  const [isFullscreen, setIsFullscreen] = React.useState(false);
  const [currentIframeUrl, setCurrentIframeUrl] = React.useState(null);
  const iframeRef = React.useRef(null);
  React.useEffect(() => {
    const checkTheme = () => {
      const isDark = document.documentElement.classList.contains('dark');
      setTheme(isDark ? 'dark' : 'light');
    };
    checkTheme();
    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  React.useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
  }, []);
  React.useEffect(() => {
    const handleMessage = event => {
      if (!event.origin.includes('chift-coverage-matrix.s3.eu-west-3.amazonaws.com')) return;
      if (event.data?.type === 'urlChange' && event.data?.url) {
        setCurrentIframeUrl(event.data.url);
      }
    };
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);
  const queryParams = new URLSearchParams({
    api,
    theme,
    ...connectors ? {
      connectors
    } : {}
  });
  const iframeUrl = `https://chift-coverage-matrix.s3.eu-west-3.amazonaws.com/coverage.html?${queryParams.toString()}`;
  const openUrl = currentIframeUrl || iframeUrl;
  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      iframeRef.current?.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  };
  const isDark = theme === 'dark';
  const buttonStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    padding: '4px 12px',
    fontSize: '14px',
    fontWeight: '500',
    color: isDark ? '#d4d4d4' : '#374151',
    backgroundColor: 'transparent',
    border: `1px solid ${isDark ? '#404040' : '#e5e7eb'}`,
    borderRadius: '12px',
    cursor: 'pointer',
    textDecoration: 'none',
    transition: 'all 0.15s ease'
  };
  const hoverBg = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)';
  const hoverBorder = isDark ? '#525252' : '#d1d5db';
  const defaultBg = 'transparent';
  const defaultBorder = isDark ? '#404040' : '#e5e7eb';
  return <>
  <div style={{
    display: 'flex',
    justifyContent: 'flex-end',
    gap: '12px',
    marginBottom: '8px'
  }}>
    <button onClick={toggleFullscreen} style={buttonStyle} onMouseEnter={e => {
    e.target.style.backgroundColor = hoverBg;
    e.target.style.borderColor = hoverBorder;
  }} onMouseLeave={e => {
    e.target.style.backgroundColor = defaultBg;
    e.target.style.borderColor = defaultBorder;
  }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        {isFullscreen ? <>
            <polyline points="4 14 10 14 10 20"></polyline>
            <polyline points="20 10 14 10 14 4"></polyline>
            <line x1="14" y1="10" x2="21" y2="3"></line>
            <line x1="3" y1="21" x2="10" y2="14"></line>
          </> : <>
            <polyline points="15 3 21 3 21 9"></polyline>
            <polyline points="9 21 3 21 3 15"></polyline>
            <line x1="21" y1="3" x2="14" y2="10"></line>
            <line x1="3" y1="21" x2="10" y2="14"></line>
          </>}
      </svg>
      {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
    </button>
    <a href={iframeUrl} target="_blank" rel="noopener noreferrer" style={buttonStyle} onMouseEnter={e => {
    e.target.style.backgroundColor = hoverBg;
    e.target.style.borderColor = hoverBorder;
  }} onMouseLeave={e => {
    e.target.style.backgroundColor = defaultBg;
    e.target.style.borderColor = defaultBorder;
  }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
        <polyline points="15 3 21 3 21 9"></polyline>
        <line x1="10" y1="14" x2="21" y2="3"></line>
      </svg>
      Open in new tab
    </a>
  </div>
  <iframe ref={iframeRef} src={iframeUrl} title={`Chift Coverage Matrix - ${api}`} style={{
    height: 'max(500px, 80vh)'
  }} className="w-full" allowFullScreen />
  <blockquote>
    <p>
      <strong>Matrix Legend 🧭</strong>
    </p>
    <table>
      <thead>
        <tr>
          <th>Status</th>
          <th>Meaning</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>✅ Implemented</td>
          <td>Endpoint is implemented and available.</td>
        </tr>
        <tr>
          <td>❌ Not supported</td>
          <td>
            Endpoint is not supported by the target software (connector
            limitation). Cannot be implemented.
          </td>
        </tr>
        <tr>
          <td>💬 On request</td>
          <td>
            Endpoint is not implemented but feasibility is validated. Can be
            implemented on request — contact your Chift point of contact to
            discuss scope and timing.
          </td>
        </tr>
        <tr>
          <td>🔎 To be analyzed</td>
          <td>
            Endpoint is not implemented and feasibility has not yet been fully
            assessed. Analysis is pending.
          </td>
        </tr>
      </tbody>
    </table>
  </blockquote>
</>;
};

<Card title="General Information" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/chift/assets/icons/qonto.png" alt="Qonto" />}>
  Website: [qonto.com](https://qonto.com/fr)\
  Software type: Solution as a Software (Saas)\
  Geography: 🇪🇺 Europe
</Card>

## Introduction

Qonto is a European business finance solution. It offers banking, financing, bookkeeping and spend management solutions to SMEs and Freelancers.

## Configure Qonto

**Prerequisite(s)**

* Register account on the [Qonto Developer Portal](https://developers.qonto.com/)
* Obtain a Client ID, secret, staging token from Qonto. **The connector requires an Oauth2** authentication, which needs to be configured by Qonto.
* Approval from Qonto is needed before going live (Production environment).
* Activate the Qonto integration on the Chift platform.

**Activation Process**

**<u>I. Obtain Sandbox Credentials (Client ID, Secret, Staging Token)</u>**

To access Qonto's sandbox environment and test the integration with Chift, follow the steps below:

1. **Create an App on the Qonto Developer Portal**
   * Go to the [Qonto Developer Portal](https://developers.qonto.com/).
   * Sign up and create a new application to obtain your access credentials.
   * This will give you the necessary credentials to authenticate with the Sandbox environment.
2. **Select the Integration Type**
   * Choose the option: **"Connect your customers Qonto accounts to your platform."**
3. **Fill in Application Details**
   * Upload your **logo**
   * Enter the **application name**
   * Add the **redirect URI**: `https://chift.app/oauth2/redirect`
4. **Select the Required Scopes**\
   To ensure the Chift connector functions properly, request the following scopes:

   | **Scope**                | **Purpose**                           |
   | :----------------------- | :------------------------------------ |
   | `organization.read`      | Access basic organization information |
   | `client.read`            | View existing customers               |
   | `client.write`           | Create new customers                  |
   | `client_invoices.read`   | Access customer invoices              |
   | `client_invoices.write`  | Create customer invoices              |
   | `supplier_invoice.read`  | Access supplier invoices              |
   | `supplier_invoice.write` | Create supplier invoices *(optional)* |
5. **Get Your Sandbox Credentials**\
   Once the app is created, Qonto will automatically generate and display your sandbox credentials:
   * `client_id`
   * `client_secret`
   * `x-qonto-staging-token`

**<u>II. Obtain Production Credentials</u>**

> **Important:** You must first complete the sandbox setup before requesting production credentials.

1. **Request Production Access in the Developer Portal**
   * In your Qonto app dashboard, switch to the **Production** tab.
   * Click **“Release my app”** to begin the production access request.
2. **Reconfirm App Information**\
   You will need to re-enter your application details:
   * Logo
   * Application name
   * Redirect URI: `https://chift.app/oauth2/redirect`
3. **Approval Process by Qonto**\
   Qonto will reach out to validate your application and understand your integration use case. This step is required before production access is granted.
4. **Receive Production Credentials**\
   After approval, Qonto will send you a document containing your production credentials. This file will include:

   * `client_id`
   * `client_secret`
   * `x-qonto-staging-token` *(if your request was initially made in the sandbox)*

   Ensure the **redirect URIs** listed in their response exactly match the ones submitted in your app configuration.

## Connect Qonto

To activate a connection with Qonto, users will have to go through the following steps.

* French article: [Help Center - Qonto FR](https://help.chift.app/articles/1959523301-qonto?lang=fr)
* English article: [Help Center - Qonto EN](https://help.chift.app/articles/1959523301-qonto?lang=en)

## Limitations & Exceptions

* Qonto does not really support the notion of suppliers.

## Qonto coverage

<CoverageIframe api="invoicing" connectors="Qonto" />