@font-face {
    font-family: Radial;
    src: url(https://cdn.tabby.ai/static/fonts/Radial-Regular-68fc5b23d8a31fb050ac2fa592aa2082026273a1.woff2),url(https://cdn.tabby.ai/static/fonts/Radial-Regular-38eae69f0b709676e22f4ce033eedb37f46aac22.woff);
    font-weight: 400;
    font-style: normal
}

h1, h2, h3 {
    font-family: 'Radial';
    letter-spacing: normal !important;
}

/* @media (prefers-color-scheme: light) {
code.text-code {
    color: blue;
  }
}

  @media (prefers-color-scheme: dark) {
    code.text-code {
      color: lightblue;
    }
  } */

import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import * as mdx from 'eslint-plugin-mdx';
import pluginPrettier from 'eslint-plugin-prettier';
import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
import unusedImports from 'eslint-plugin-unused-imports';
import pluginYML from 'eslint-plugin-yml';

export default [
  // Base configuration
  {
    ignores: ['**/node_modules/', '**/dist/'],
  },

  // JavaScript/TypeScript configuration
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: {
      'unused-imports': unusedImports,
    },
    languageOptions: {
      sourceType: 'module',
      ecmaVersion: 'latest',
    },
    rules: {
      ...js.configs.recommended.rules,
      'no-unused-vars': 'off',
      'unused-imports/no-unused-imports': 'error',
      'unused-imports/no-unused-vars': [
        'warn',
        {
          vars: 'all',
          varsIgnorePattern: '^_',
          args: 'after-used',
          argsIgnorePattern: '^_',
        },
      ],
    },
  },

  {
    ...reactRecommended,
    rules: {
      ...reactRecommended.rules,
      'react/jsx-no-undef': 'off',
      'react/jsx-tag-spacing': [
        'error',
        {
          closingSlash: 'never',
          beforeSelfClosing: 'always',
          afterOpening: 'never',
          beforeClosing: 'never',
        },
      ],
      'react/jsx-one-expression-per-line': 'off',
      'react/jsx-indent-props': ['error', 2],
      'react/jsx-first-prop-new-line': ['error', 'never'],
      'react/jsx-max-props-per-line': ['error', { maximum: 99, when: 'always' }],
      'react/jsx-wrap-multilines': [
        'error',
        {
          declaration: 'parens-new-line',
          assignment: 'parens-new-line',
          return: 'parens-new-line',
          arrow: 'parens-new-line',
          condition: 'parens-new-line',
          logical: 'parens-new-line',
          prop: 'parens-new-line',
        },
      ],
      'react/jsx-sort-props': [
        'error',
        {
          callbacksLast: true,
          shorthandFirst: true,
          shorthandLast: false,
          multiline: 'last',
          noSortAlphabetically: false,
          reservedFirst: true,
          ignoreCase: false,
        },
      ],
      'react/no-unknown-property': [2, { ignore: ['noZoom'] }],
    },
    settings: {
      react: {
        pragma: 'React',
        version: 'detect',
      },
    },
  },

  // MDX configuration
  {
    ...mdx.flat,
    rules: {
      ...mdx.flat.rules,
      'react/no-unescaped-entities': 'off',
      'react/jsx-child-element-spacing': 'off',
      'react/jsx-tag-spacing': [
        'error',
        {
          closingSlash: 'never',
          beforeSelfClosing: 'always',
          afterOpening: 'never',
          beforeClosing: 'allow', // allow spaces before closing markdown syntax
        },
      ],
    },
    processor: mdx.createRemarkProcessor({
      lintCodeBlocks: true,
      languageMapper: {},
    }),
  },
  {
    ...mdx.flatCodeBlocks,
    rules: {
      ...mdx.flatCodeBlocks.rules,
      'no-var': 'error',
      'prefer-const': 'error',
    },
  },

  // YAML specific configuration
  ...pluginYML.configs['flat/standard'],
  {
    files: ['**/*.{yaml,yml}'],
    rules: {
      'yml/quotes': ['error', { prefer: 'double', avoidEscape: true }],
    },
  },

  // Prettier integration
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: {
      prettier: pluginPrettier,
    },
    rules: {
      ...prettier.rules,
      'prettier/prettier': ['error'],
    },
  },
  {
    files: ['**/*.{yaml,yml}'],
    plugins: {
      prettier: pluginPrettier,
    },
    rules: {
      ...prettier.rules,
      'prettier/prettier': [
        'error',
        {
          singleQuote: false,
          parser: 'yaml',
        },
      ],
    },
  },
];


Product and page snippets

Cart

Checkout

Where you show Tabby matters just as much as what you say. Here are key placements that help drive usage.

Placement Best Practices

Tabby

What is Tabby?

Technical Requirements

Quick Start

Salla

Salesforce

ExpandCart

Checkout Flow

Payment Statuses

Payment Processing

Disputes

Webhooks

On‑Site Messaging

Full Testing Checklist

POS Integration

Custom Payment Links Integration

Testing Credentials

Postman API Collection

Creates a Checkout session. Creates Session and Payment, returns Pre-Scoring result (status), ids of Payment and Session.

Create a session

Use this API to retrieve the token (only if tokens used in your integration )

Retrieve an existing checkout session

Retrieves the specified payment. Returns the entire payment object, including the payment Status, Captures and Refunds objects.

Retrieve a payment

Updates the reference_id. You can only use this endpoint to update this 1 field. If you send other fields in the request, they will simply be ignored by tabby. The payment to be updated can have a status of AUTHORIZED or CLOSED.

Update a payment

Send a Capture requests for Authorized payments only. If you capture the full payment amount, the payment will be automatically closed with full capture. If you capture partial amount, the payment will remain Authorized until the rest of the amount is captured or Close request sent.

Capture a payment

Send a full or partial refund amount request. You can only refund the payment that has Closed status. By default refunds reflect instantly, which means Tabby initiates a refund through payment gateway.

Refund a payment

Closed is the final status of the payment. Your payment is going to be closed automatically if you capture the full amount of the payment. If an order is fully cancelled, please close the payment without capturing it - the customer will be refunded for all paid amount. If only a part of the order is delivered, please capture this part and close the payment – it will mean that another part of the order is not going to be delivered to the customer.

Close a payment

Returns a list of success payments (Authorized or Closed) you’ve previously created. The payments are returned in sorted order, with the most recent payments appearing first. Each entry in the array is a separate payments object, including the status, any captures and any refunds. If no more payments are available, the resulting array will be empty. Payments might be filtered by creation date.

List of all payments

Retrieve all webhooks

Register a webhook

Retrieve a webhook

Update a webhook

Remove a webhook

Returns list of 100 recently created disputes.

Get disputes list

Returns detailed information about dispute.

Get dispute by id

Approve disputes (refund money to the customer). Only 20 disputes can be approved within a single request.

Approve disputes

Challenge disputes (request Tabby support to take a look at the case). Only 20 disputes can be challenged within a single request. Only disputes with status 'new' might be challenged.

Challenge disputes

Upload an attachment. Attachment must be in PNG or JPEG format and can be up to 5 megabytes in size.

Upload attachment

Letting your customers know you offer Tabby is one of the easiest ways to boost conversion and drive repeat purchases. This toolkit gives you everything you need to promote flexible payments across your channels—online, in-store, and everywhere in between.

Marketing Toolkit

Use Tabby logos, icons and brand colours to make sure your messaging stays consistent and recognisable. Please, don’t modify these assets.

Brand Assets

To keep things consistent and clear for your customers, please follow these guidelines when talking about Tabby.

Approved Messaging

Promote Tabby across your key customer touch points to encourage more conversions and higher-value purchases.

​Product and page snippets

​Cart

​Checkout

Product and page snippets

Cart

Checkout