# Hepsipay

The **Hepsipay** component integrates the Hepsipay iframe-based payment system into your checkout flow. It handles validation, SDK initialization, payment triggering, and success callbacks.

## <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="183.19921875">Prop</th><th width="159.359375">Type</th><th width="104.8828125">Required</th><th>Description</th></tr></thead><tbody><tr><td>initOptionsOverrides</td><td>Partial&#x3C;InitOptions></td><td>Optional</td><td>Object to override default Hepsipay SDK init() options.</td></tr><tr><td>agreementCheckbox</td><td>React.ReactElement</td><td>Optional</td><td>Checkbox component (e.g., for user agreements or KVKK) connected to the form.</td></tr><tr><td>translations</td><td>Record&#x3C;string, HepsipayTranslationsProps></td><td>Optional</td><td>Object for customizing UI texts like placeholders, warnings, and error messages.</td></tr><tr><td>customUIRender</td><td>(props: CustomUIRenderProps) => React.ReactNode</td><td>Optional</td><td>Custom UI render function. If provided, it overrides the default UI.</td></tr></tbody></table>

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

A function to fully customize the Hepsipay component's appearance. If provided, the default UI will not be shown; instead, the JSX returned by this function will be rendered.

<table><thead><tr><th width="135.08203125">Parameter</th><th width="112.20703125">Type</th><th>Description</th></tr></thead><tbody><tr><td>onSubmit</td><td>() => void</td><td>Callback to trigger payment when form is submitted.</td></tr><tr><td>control</td><td>any</td><td>Control object from react-hook-form, used to bind form inputs.</td></tr><tr><td>errors</td><td>any</td><td>Error object from react-hook-form, used for validation feedback.</td></tr><tr><td>frameUrl</td><td>string</td><td>URL of the Hepsipay iframe, provided from backend context data.</td></tr></tbody></table>

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

**initOptionsOverrides** is an object used to partially override the default settings passed to the Hepsipay SDK's **init** function. This allows customization of many options such as iframe behavior and appearance, as well as callback functions.

<table><thead><tr><th width="184.875">Property</th><th width="168.56640625">Type</th><th width="93.71484375">Required</th><th>Description</th></tr></thead><tbody><tr><td>frameUrl</td><td>string</td><td>Yes</td><td>The URL of the payment iframe</td></tr><tr><td>frameDivId</td><td>string</td><td>No</td><td>The ID of the HTML div where the iframe will be embedded.</td></tr><tr><td>paymentStatusCallback</td><td>(isPaymentAllowed: boolean) => void</td><td>No</td><td>Called when the payment status changes.</td></tr><tr><td>frameFailureCallback</td><td>() => void</td><td>No</td><td>Called if the iframe fails to load or an error occurs.</td></tr><tr><td>onPaymentSuccessCallback</td><td>(payload: any) => void</td><td>No</td><td>Callback function called when the payment is successfully completed.</td></tr><tr><td>maxHeight</td><td>string</td><td>No</td><td>Maximum height for the iframe (e.g., '800').</td></tr><tr><td>disableDynamicHeight</td><td>boolean</td><td>No</td><td>Enables or disables dynamic height adjustment for the iframe.</td></tr><tr><td>showFramePaymentButton</td><td>boolean</td><td>No</td><td>Shows or hides the payment button inside the iframe.</td></tr><tr><td>useApiCallOnSuccessCallback</td><td>boolean</td><td>No</td><td>Determines whether to perform an API call on payment success.</td></tr><tr><td>selectedPaymentInfoCallback</td><td>(payload: any) => void</td><td>No</td><td>Called when the selected payment information changes.</td></tr><tr><td>overrideFontFamily</td><td>string</td><td>No</td><td>Custom font family to be used inside the iframe.</td></tr><tr><td>hideHeader</td><td>boolean</td><td>No</td><td>Shows or hides the header section of the iframe.</td></tr></tbody></table>

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

```javascript
{
   placeholderInput: 'PLACE ORDER',
   availableWarning:
     'Hepsipay is not available for this user. Please choose another payment method.',
   agreementError: 'This Field is Required'
 }
```

### <mark style="color:red;">**Update Payment Step**</mark>

**File Path:**

```bash
views/checkout/steps/payment/index.tsx
```

```javascript
import HepsiPay from './options/hepsipay';

export const PaymentOptionViews: Array<CheckoutPaymentOption> = [
  {
    slug: 'hepsipay',
    view: HepsiPay
  }
  // Other payment methods can be added here
];
```

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

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

**File Path:**

```bash
views/checkout/steps/payment/options/hepsipay.tsx
```

```javascript
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
import CheckoutAgreements from '../agreements';

export default function Hepsipay() {
  return (
    <PluginModule
      props={{
        agreementCheckbox: (
          <CheckoutAgreements control={null} error={null} fieldId="agreement" />
        )
      }}
      component={Component.Hepsipay}
    />
  );
}
```

### <mark style="color:red;">**Custom UI Render Usage**</mark>

```javascript
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import Script from 'next/script';

<PluginModule
 props={{
   customUIRender: ({ onSubmit, errors, control }) => (
     <>
       <div id="hepsipay-frame" data-testid="hepsipay-frame"></div>
       <form onSubmit={onSubmit}>
         <div className="flex items-start flex-col border-t border-solid border-gray-400 py-4 space-y-4">
           <CheckoutAgreements
             control={control}
             error={errors.agreement}
             fieldId="agreement"
           />
           <Button
             className="group uppercase mt-4 inline-flex items-center justify-center w-full"
             type="submit"
             data-testid="checkout-bank-account-place-order"
           >
             <span>Place Order</span>
             <Icon
               name="chevron-end"
               size={12}
               className="fill-primary-foreground ml-2 h-3 group-hover:fill-primary"
             />
           </Button>
         </div>
       </form>

       <Script
         src="https://images.hepsiburada.net/hepsipay/packages/pf/hepsipay-latest.min.js"
         defer
       />
     </>
   )
 }}
 component={Component.Hepsipay}
/>;
```


---

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