@akinon/pz-haso 1.112.0-snapshot-ZERO-3859-20251125183557

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2
+}

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# HASO Payment Gateway Extension
+
+## 1.112.0-snapshot-ZERO-3859-20251125183557
+
+### Minor Changes
+
+- cbcfdf4: ZERO-3859: Haso payment gateway implmeneted
+
+## 1.0.0
+
+### Features
+
+- Initial release of HASO (Hemen Al Sonra Öde) payment gateway extension
+- Data aggregation support for redirect-based payment flow
+- SHA-512 hash validation for secure data transfer
+- Customizable renderer props for UI customization
+- Collects order items, billing/shipping addresses, and customer info

package/README.md

@@ -0,0 +1,247 @@
+# HASO Payment Gateway Extension
+
+HASO (Hemen Al Sonra Öde / Buy Now Pay Later) ödeme entegrasyonu için data aggregation paketi.
+
+## Installation
+
+You can use the following command to install the extension with the latest plugins:
+
+```bash
+npx @akinon/projectzero@latest --plugins
+```
+
+## Usage
+
+Once the extension is installed, you can easily integrate the HASO 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/haso/` directory.
+
+2. Create a file named `page.tsx` and include the following code:
+
+```tsx
+import { HasoPaymentGateway } from '@akinon/pz-haso';
+
+const HasoGateway = async ({
+  searchParams: { sessionId },
+  params: { currency, locale }
+}: {
+  searchParams: Record<string, string>;
+  params: { currency: string; locale: string };
+}) => {
+  return (
+    <HasoPaymentGateway
+      sessionId={sessionId}
+      currency={currency}
+      locale={locale}
+      extensionUrl={process.env.HASO_EXTENSION_URL}
+      hashKey={process.env.HASO_HASH_KEY}
+    />
+  );
+};
+
+export default HasoGateway;
+```
+
+## Customizing the HASO Component
+
+You can customize the appearance of the HASO payment gateway using the `renderer` prop. This allows you to provide custom rendering functions for different parts of the component.
+
+### Custom Form Component
+
+```tsx
+import { HasoPaymentGateway } from '@akinon/pz-haso';
+
+const HasoGateway = async ({
+  searchParams: { sessionId },
+  params: { currency, locale }
+}: {
+  searchParams: Record<string, string>;
+  params: { currency: string; locale: string };
+}) => {
+  return (
+    <HasoPaymentGateway
+      sessionId={sessionId}
+      currency={currency}
+      locale={locale}
+      extensionUrl={process.env.HASO_EXTENSION_URL}
+      hashKey={process.env.HASO_HASH_KEY}
+      renderer={{
+        formComponent: {
+          renderForm: ({
+            extensionUrl,
+            sessionId,
+            context,
+            csrfToken,
+            autoSubmit
+          }) => (
+            <div className="custom-haso-form-wrapper">
+              <h3 className="text-lg font-semibold mb-4">HASO Ödeme</h3>
+              <p className="mb-4">
+                HASO ödeme sayfasına yönlendiriliyorsunuz...
+              </p>
+              <form
+                action={`${extensionUrl}/form-page/?sessionId=${sessionId}`}
+                method="post"
+                encType="multipart/form-data"
+                id="haso-custom-form"
+                className="hidden"
+              >
+                <input type="hidden" name="csrf_token" value={csrfToken} />
+                <input
+                  type="hidden"
+                  name="data"
+                  value={JSON.stringify(context)}
+                />
+                {autoSubmit && (
+                  <script
+                    dangerouslySetInnerHTML={{
+                      __html:
+                        "document.getElementById('haso-custom-form').submit()"
+                    }}
+                  />
+                )}
+              </form>
+              <div className="loader w-12 h-12 border-4 border-t-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
+            </div>
+          )
+        },
+        paymentGateway: {
+          renderContainer: ({ children }) => (
+            <div className="p-8 max-w-lg mx-auto bg-white rounded-lg shadow-md">
+              {children}
+            </div>
+          )
+        }
+      }}
+    />
+  );
+};
+
+export default HasoGateway;
+```
+
+## Custom Renderer API
+
+The renderer prop accepts an object with the following structure:
+
+```typescript
+interface HasoRendererProps {
+  formComponent?: {
+    renderForm?: (props: {
+      extensionUrl: string;
+      sessionId: string;
+      context: any;
+      csrfToken: string;
+      autoSubmit: boolean;
+    }) => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    renderError?: (error: string) => React.ReactNode;
+  };
+  paymentGateway?: {
+    renderContainer?: (props: { children: React.ReactNode }) => React.ReactNode;
+  };
+}
+```
+
+## Configuration
+
+Add these variables to your `.env` file:
+
+```env
+HASO_EXTENSION_URL=<your_extension_url>
+HASO_HASH_KEY=<your_hash_key>
+```
+
+## Data Aggregation Flow
+
+This package implements the data aggregation pattern for HASO payments:
+
+```
+1. start-session → redirectUrl: /payment-gateway/haso/?sessionId=XXX
+2. HasoPaymentGateway → Collects data (preOrder, addresses, basket)
+3. FormComponent → POST → Extension /form-page/?sessionId=XXX (with SHA-512 hash)
+4. Extension → Creates Provider URL → Payment screen
+5. Payment completed → return-url → Merchant Store
+```
+
+### Data Collected
+
+The package collects the following data from the checkout:
+
+- **Order Items**: Product name, SKU, quantity, unit price, total amount
+- **Billing Address**: City, country, name, address line, phone, email, postal code
+- **Shipping Address**: City, country, name, address line, phone, email, postal code
+- **Customer Info**: Name, phone, email, identity number
+- **Amounts**: Total amount, shipping amount, currency
+
+### Security
+
+All data is sent with a SHA-512 hash for validation:
+
+- Hash is generated using: `salt | sessionId | hashKey`
+- Extension validates the hash before processing
+
+## API Routes
+
+### Check Availability API
+
+To enable HASO payment availability checks, you need to create an API route. Create a file at `src/app/api/haso-check-availability/route.ts` with the following content:
+
+```typescript
+import { POST } from '@akinon/pz-haso/src/pages/api/check-availability';
+
+export { POST };
+```
+
+This API endpoint handles checking the availability of HASO payment for a given:
+
+- Phone number
+- Order amount
+- Email (optional)
+- Identity number (optional)
+
+The endpoint automatically validates the request and response using hash-based security measures.
+
+### Using checkHasoAvailability Mutation
+
+The extension provides a Redux mutation hook that you can use to check HASO payment availability. Here's an example of how to implement it:
+
+```typescript
+import { useCheckHasoAvailabilityMutation } from '@akinon/pz-haso';
+
+const YourComponent = () => {
+  const [checkHasoAvailability] = useCheckHasoAvailabilityMutation();
+  const [isHasoAvailable, setIsHasoAvailable] = useState(false);
+
+  useEffect(() => {
+    const checkAvailability = async () => {
+      try {
+        const response = await checkHasoAvailability({
+          amount: '1000.00',
+          phone: '+905551234567',
+          email: 'customer@example.com',
+          identity_number: '12345678901' // TC Kimlik No (optional)
+        }).unwrap();
+
+        setIsHasoAvailable(response.is_available);
+      } catch (error) {
+        console.error('Error checking HASO availability:', error);
+        setIsHasoAvailable(false);
+      }
+    };
+
+    checkAvailability();
+  }, [checkHasoAvailability]);
+
+  return (
+    // Your component JSX
+  );
+};
+```
+
+The mutation returns an object with the following properties:
+
+- `is_available`: boolean indicating if HASO payment is available
+- `limit`: number indicating the available credit limit (optional)
+- `salt`: string used for hash verification
+- `hash`: string for response validation

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@akinon/pz-haso",
+  "version": "1.112.0-snapshot-ZERO-3859-20251125183557",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.3.1",
+    "typescript": "^5.2.2"
+  }
+}

package/src/components/FormComponent.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { cookies } from 'next/headers';
+import { FormComponentProps } from '../types';
+
+const FormComponent = ({
+  extensionUrl,
+  sessionId,
+  context,
+  renderer,
+  autoSubmit = true
+}: FormComponentProps) => {
+  const nextCookies = cookies();
+
+  const extensionUrlWithoutSlash = `${extensionUrl}`.endsWith('/')
+    ? extensionUrl.slice(0, -1)
+    : extensionUrl;
+
+  const csrfToken = nextCookies.get('csrftoken')?.value ?? '';
+
+  const DefaultForm = ({
+    extensionUrl,
+    sessionId,
+    context,
+    csrfToken,
+    autoSubmit
+  }: {
+    extensionUrl: string;
+    sessionId: string;
+    context: any;
+    csrfToken: string;
+    autoSubmit: boolean;
+  }) => (
+    <form
+      action={`${extensionUrl}/form-page/?sessionId=${sessionId}`}
+      method="post"
+      encType="multipart/form-data"
+      id="haso-extension-form"
+    >
+      <input type="hidden" name="csrf_token" value={csrfToken} />
+      <input type="hidden" name="data" value={JSON.stringify(context)} />
+
+      {autoSubmit && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: "document.getElementById('haso-extension-form').submit()"
+          }}
+        />
+      )}
+    </form>
+  );
+
+  const RenderForm = renderer?.renderForm || DefaultForm;
+
+  return (
+    <RenderForm
+      extensionUrl={extensionUrlWithoutSlash}
+      sessionId={sessionId}
+      context={context}
+      csrfToken={csrfToken}
+      autoSubmit={autoSubmit}
+    />
+  );
+};
+
+export default FormComponent;

package/src/index.tsx

@@ -0,0 +1,7 @@
+export * from './pages/HasoPaymentGateway';
+export { useCheckHasoAvailabilityMutation } from './redux/api';
+export type {
+  HasoPaymentGatewayProps,
+  HasoRendererProps,
+  FormComponentProps
+} from './types';

package/src/pages/HasoPaymentGateway.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import settings from 'settings';
+import { cookies } from 'next/headers';
+import FormComponent from '../components/FormComponent';
+import { fetchData, generateHash, getRandomString } from '../utils';
+import { HasoPaymentGatewayProps } from '../types';
+
+export const HasoPaymentGateway = async ({
+  sessionId,
+  currency,
+  locale,
+  extensionUrl,
+  hashKey,
+  renderer
+}: HasoPaymentGatewayProps) => {
+  if (!sessionId || !currency || !locale) {
+    return <></>;
+  }
+
+  const nextCookies = cookies();
+
+  const language = settings.localization.locales.find(
+    (item: { value: string; apiValue: string }) => item.value === locale
+  )?.apiValue;
+
+  const requestHeaders = {
+    Cookie: `osessionid=${nextCookies.get('osessionid')?.value}`,
+    'Content-Type': 'application/json',
+    'X-Currency': currency,
+    'X-Requested-With': 'XMLHttpRequest',
+    'Accept-Language': language || 'tr-TR'
+  };
+
+  const preOrder = await fetchData(
+    `${settings.commerceUrl}/orders/checkout/?page=OrderNotePage`,
+    requestHeaders
+  );
+
+  const salt = getRandomString(10);
+  const hash = generateHash(salt, sessionId, hashKey);
+
+  const context = {
+    salt,
+    hash,
+    shipping_address: {
+      first_name: preOrder.pre_order.shipping_address?.first_name,
+      last_name: preOrder.pre_order.shipping_address?.last_name,
+      phone_number: preOrder.pre_order.shipping_address?.phone_number,
+      line: preOrder.pre_order.shipping_address?.line,
+      district: preOrder.pre_order.shipping_address?.district?.name || null,
+      township: preOrder.pre_order.shipping_address?.township?.name,
+      city: preOrder.pre_order.shipping_address?.city?.name,
+      country: preOrder.pre_order.shipping_address?.country?.name,
+      zip_code: preOrder.pre_order.shipping_address?.postcode
+    }
+  };
+
+  const DefaultContainer = ({
+    children
+  }: {
+    children: React.ReactNode;
+  }): React.ReactElement => <>{children}</>;
+
+  const RenderContainer =
+    renderer?.paymentGateway?.renderContainer || DefaultContainer;
+
+  return (
+    <RenderContainer>
+      <FormComponent
+        extensionUrl={extensionUrl}
+        sessionId={sessionId}
+        context={context}
+        renderer={renderer?.formComponent}
+      />
+    </RenderContainer>
+  );
+};

package/src/pages/api/check-availability.ts

@@ -0,0 +1,107 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { getRandomString, generateHash } from '../../utils';
+
+interface CheckAvailabilityResponse {
+  salt: string;
+  hash: string;
+  is_available: boolean;
+  limit?: number;
+  message?: string;
+}
+
+const verifyResponseHash = (
+  salt: string,
+  isAvailable: boolean,
+  hashKey: string,
+  responseHash: string
+): boolean => {
+  return (
+    generateHash(salt, isAvailable ? 'True' : 'False', hashKey) === responseHash
+  );
+};
+
+export async function POST(request: NextRequest) {
+  try {
+    const hashKey = process.env.HASO_HASH_KEY;
+    const extensionUrl = process.env.HASO_EXTENSION_URL;
+
+    if (!hashKey) {
+      return NextResponse.json(
+        { message: 'HASO_HASH_KEY environment variable is not set' },
+        { status: 500 }
+      );
+    }
+
+    if (!extensionUrl) {
+      return NextResponse.json(
+        { message: 'HASO_EXTENSION_URL environment variable is not set' },
+        { status: 500 }
+      );
+    }
+
+    const body = await request.json();
+    const { amount, phone, email, identity_number } = body;
+
+    if (!amount || !phone) {
+      return NextResponse.json(
+        { message: 'Missing required fields (amount, phone)' },
+        { status: 400 }
+      );
+    }
+
+    const salt = getRandomString(10);
+    const hash = generateHash(salt, phone, amount, hashKey);
+
+    const extensionUrlWithoutSlash = extensionUrl.endsWith('/')
+      ? extensionUrl.slice(0, -1)
+      : extensionUrl;
+
+    const response = await fetch(
+      `${extensionUrlWithoutSlash}/check-availability`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          salt,
+          hash,
+          amount,
+          phone,
+          email,
+          identity_number
+        })
+      }
+    );
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      return NextResponse.json(errorData, { status: response.status });
+    }
+
+    const data: CheckAvailabilityResponse = await response.json();
+
+    const isValidHash = verifyResponseHash(
+      data.salt,
+      data.is_available,
+      hashKey,
+      data.hash
+    );
+
+    if (!isValidHash) {
+      return NextResponse.json(
+        { message: 'Invalid response hash' },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error checking HASO availability:', error);
+    return NextResponse.json(
+      { message: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

package/src/redux/api.ts

@@ -0,0 +1,39 @@
+import { api } from '@akinon/next/data/client/api';
+import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
+
+interface CheckHasoAvailabilityRequest {
+  amount: string;
+  phone: string;
+  email: string;
+  identity_number?: string;
+}
+
+interface CheckHasoAvailabilityResponse {
+  salt: string;
+  hash: string;
+  is_available: boolean;
+  limit?: number;
+  message?: string;
+}
+
+export const hasoApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    checkHasoAvailability: build.mutation<
+      CheckHasoAvailabilityResponse,
+      CheckHasoAvailabilityRequest
+    >({
+      query: (body) => ({
+        url: '/api/haso-check-availability/',
+        method: 'POST',
+        body
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    })
+  })
+});
+
+export const { useCheckHasoAvailabilityMutation } = hasoApi;

package/src/types.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface HasoRendererProps {
+  formComponent?: {
+    renderForm?: (props: {
+      extensionUrl: string;
+      sessionId: string;
+      context: any;
+      csrfToken: string;
+      autoSubmit: boolean;
+    }) => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    renderError?: (error: string) => React.ReactNode;
+  };
+  paymentGateway?: {
+    renderContainer?: (props: { children: React.ReactNode }) => React.ReactNode;
+  };
+}
+
+export interface FormComponentProps {
+  extensionUrl: string;
+  sessionId: string;
+  context: any;
+  renderer?: HasoRendererProps['formComponent'];
+  autoSubmit?: boolean;
+}
+
+export interface HasoPaymentGatewayProps {
+  sessionId: string;
+  currency: string;
+  locale: string;
+  extensionUrl: string;
+  hashKey: string;
+  renderer?: HasoRendererProps;
+}

package/src/utils/index.ts

@@ -0,0 +1,19 @@
+import crypto from 'crypto';
+
+export const fetchData = async (url: string, requestHeaders: HeadersInit) => {
+  const response = await fetch(url, { headers: requestHeaders });
+  return response.json();
+};
+
+export const getRandomString = (length: number): string => {
+  const characters =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  return Array.from({ length }, () =>
+    characters.charAt(Math.floor(Math.random() * characters.length))
+  ).join('');
+};
+
+export const generateHash = (...values: string[]): string => {
+  const hashStr = values.join('|');
+  return crypto.createHash('sha512').update(hashStr, 'utf8').digest('hex');
+};