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

# Square

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/square.png" alt="Square" />}>
  Website: [square.com](https://squareup.com/fr/fr)\
  Software type: Solution as a Software (Saas)\
  Geography: 🌍 Worldwide
</Card>

# Introduction

Square streamlines the checkout process, allowing businesses to accept payments and manage their transactions within a single platform. It also provides real-time updates, enhancing the accuracy of inventory and financial data. Deliver the Square integration your customers want in no time.

## Configure Square

**Prerequisite(s)**

* Obtain an application ID and secret from Square (Note that in order to use the integration, you must be located in a market that is supported by Square (e.g. France))
* Activate the Square integration on the Chift platform.

**Activation Process**

1. Follow this [documentation](https://developer.squareup.com/docs/get-started/create-account-and-application) to set up your developer account. Link to developer portal: [here](https://developer.squareup.com)
2. To activate the connector in the platform you will need an ApplicationId and SecretID of your app. We describe below the steps to follow to set up your App's activations:
   * **Sign in to the Square Developer Portal**\
     Go to the Square [developer portal](https://developer.squareup.com)  and sign in with your Square account.
   * **Create Your Application**\
     Navigate to the "Applications" page: [Applications](https://developer.squareup.com/apps) \
     Click **Create your first application** (or **New Application**) and give your app a name.
   * **Open Your Application**\
     After creating the app, you’ll be redirected to the app settings. If not, return to the Applications page and click on the app to open it.
   * **Activate the Sandbox App**\
     Before enabling the connector in Chift, you must activate your Sandbox app:
     * Go to the [Sandbox Test Accounts page](https://developer.squareup.com/console/en/sandbox-test-accounts)
     * Click on the name of your test account
     * Click the **Open in Square Dashboard** button at the top right\
       This step activates your Sandbox environment in Square.
   * **Configure OAuth Settings**\
     In your app settings, click on **OAuth** in the left-hand menu.\
     Under **Redirect URLs**, add:\
     [**https://chift.app/oauth2/redirect**](https://chift.app/oauth2/redirect)\
     This is the **same redirect URL** for both Sandbox and Production environments.
   * **Retrieve Your Credentials**\
     Still under the OAuth section, copy the following values:
     * **Application ID**
     * **Application Secret**\
       Enter these credentials on the Square connector activation page in Chift's platform to complete the activation.\
       Start by connecting the **Sandbox** app with Chift for testing, then repeat the exact same steps using the **Production** app credentials when you're ready to go live.

## Test Square

To test the software integration:

1. With your developer account, you can have a few sandbox test accounts to test out the integration.
2. Follow this [link](https://developer.squareup.com/docs/devtools/sandbox/overview) to understand how to use the test account to generate test data & test the integration

## Connect Square

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

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

## Square coverage

<CoverageIframe api="point_of_sale" connectors="Square" />