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