Tabby Payment Gateway Extension

Installation

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

npx @akinon/projectzero@latest --plugins

Usage

Once the extension is installed, you can easily integrate the Tabby payment gateway into your application. Here's an example of how to use it.

1. Navigate to the src/app/[commerce]/[locale]/[currency]/payment-gateway/tabby/ directory.

2. Create a file named page.tsx and include the following code:

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;

API Routes

Check Availability API

To enable Tabby payment availability checks, you need to create an API route. Create a file at src/app/api/tabby-check-availability/route.ts with the following content:

import { POST } from '@akinon/pz-tabby-extension/src/pages/api/check-availability';

export { POST };

This API endpoint handles checking the availability of Tabby payment for a given:

• Order amount
• Email
• Phone number
• Currency

The endpoint automatically validates the request and response using hash-based security measures.

Using checkTabbyAvailability Mutation

The extension provides a Redux mutation hook that you can use to check Tabby payment availability. Here's an example of how to implement it:

import { useCheckTabbyAvailabilityMutation } from '@akinon/pz-tabby-extension/src/redux/api';

const YourComponent = () => {
  const [checkTabbyAvailability] = useCheckTabbyAvailabilityMutation();
  const [isTabbyAvailable, setIsTabbyAvailable] = useState(false);

  useEffect(() => {
    const checkAvailability = async () => {
      try {
        const response = await checkTabbyAvailability({
          amount: 1000, // Order total amount
          phone: '+971123456789', // Customer's phone number
          email: '[email protected]', // Customer's email ,
          name: 'Akinon Akinon', // Customer's Full Name
        }).unwrap();

        setIsTabbyAvailable(response.is_available);
      } catch (error) {
        console.error('Error checking Tabby availability:', error);
        setIsTabbyAvailable(false);
      }
    };

    checkAvailability();
  }, [checkTabbyAvailability]);

  // Use isTabbyAvailable to conditionally render Tabby payment option
  return (
    // Your component JSX
  );
};

The mutation returns an object with the following properties:

• is_available: boolean indicating if Tabby payment is available
• salt: string used for hash verification
• hash: string for response validation

Configuration

Add these variables to your .env file

TABBY_EXTENSION_URL=<your_extension_url>
TABBY_HASH_KEY=<your_hash_key>