# Tabby Payment Gateway

The `TabbyPaymentGateway` component provides seamless integration with Tabby, enabling installment and deferred payment options directly within your checkout experience. Built for compatibility with the Akinon ProjectZero platform, this extension securely manages customer data and transaction flows while maintaining flexibility for localized currency and language support.

With minimal setup, the component generates the necessary context—including order, user, and historical data—to initiate secure transactions via Tabby. The extension also handles hash-based request validation and supports easy deployment through environment-based configuration.

This guide covers installation, configuration, usage, and internal mechanics to help you implement Tabby in your checkout flow with confidence.

## <mark style="color:red;">**Installation Method**</mark>

You can use the following command to install the extension with the latest plugins:

```bash
npx @akinon/projectzero@latest --plugins
```

### <mark style="color:red;">**Props**</mark>

<table><thead><tr><th width="130.01953125">Prop</th><th width="115.24609375">Type</th><th width="114.8046875">Required</th><th>Description</th></tr></thead><tbody><tr><td>sessionId</td><td>string</td><td>Yes</td><td>The session identifier received from Tabby.</td></tr><tr><td>currency</td><td>string</td><td>Yes</td><td>Currency code used in the transaction (e.g., AED, SAR).</td></tr><tr><td>locale</td><td>string</td><td>Yes</td><td>Language/locale code used for translations (e.g., en, ar).</td></tr><tr><td>extensionUrl</td><td>string</td><td>Yes</td><td>The base URL for the Tabby extension server.</td></tr><tr><td>hashKey</td><td>string</td><td>Yes</td><td>Secret hash key used to generate a secure transaction hash.</td></tr></tbody></table>

### <mark style="color:red;">**Environment Variables**</mark>

Add the following variables to your `.env` file:

```bash
TABBY_EXTENSION_URL=<your_extension_url>
TABBY_HASH_KEY=<your_hash_key>
```

## <mark style="color:red;">**Usage Example**</mark>

Create a file in the path:

```
src/app/[commerce]/[locale]/[currency]/payment-gateway/tabby/page.tsx
```

```javascript
import { TabbyPaymentGateway } from '@akinon/pz-tabby-extension';

const TabbyGateway = async ({
  searchParams: { sessionId },
  params: { currency, locale }
}: {
  searchParams: Record<string, string>;
  params: { currency: string; locale: string };
}) => {
  return (
    <TabbyPaymentGateway
      sessionId={sessionId}
      currency={currency}
      locale={locale}
      extensionUrl={process.env.TABBY_EXTENSION_URL}
      hashKey={process.env.TABBY_HASH_KEY}
    />
  );
};

export default TabbyGateway;
```

## <mark style="color:red;">**Context Object (Auto-generated Internally)**</mark>

The `TabbyPaymentGateway` component internally generates a `context` object using:

\- `preOrder` data from the current checkout session\
\- `userProfile` and `wishlist` details\
\- Historical orders and previous purchases

This context includes:

```tsx
{
  salt: string,
  hash: string,
  shipping_address: {
    city: string,
    address: string,
    zip: string
  },
  order_items: Array<{
    unit_price: number,
    title: string,
    quantity: number,
    category: string
  }>,
  buyer_history: {
    registered_since: string,
    loyalty_level: number,
    wishlist_count: number,
    is_email_verified: boolean,
    is_social_networks_connected: boolean,
    is_phone_number_verified: boolean
  },
  order_history: Array<{
    purchased_at: string,
    amount: number,
    payment_method: string,
    status: string,
    buyer: {
      phone: string,
      email: string,
      name: string
    },
    shipping_address: {
      city: string,
      address: string,
      zip: string
    },
    order_items: object
  }>
}

```

This object is passed to the `FormComponent` for completing the payment via Tabby.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/next.js/plugins/tabby-payment-gateway.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.