# 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}
/>;
```