# GarantiPay

**pz-gpay** is the `GPayOption` component that provides Garanti Pay (GPay) payment integration within the checkout process. It supports both default UI rendering and a fully customized UI via the `customUIRender` prop.

## <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="192.94921875">Prop</th><th width="127.359375">Type</th><th width="94.3984375">Required</th><th>Description</th></tr></thead><tbody><tr><td>containerClassName</td><td>string</td><td>Optional</td><td>Custom class for the root &#x3C;form> container</td></tr><tr><td>titleClassName</td><td>string</td><td>Optional</td><td>Class for the title (&#x3C;h1> element)</td></tr><tr><td>descriptionClassName</td><td>string</td><td>Optional</td><td>Class for the description container</td></tr><tr><td>buttonClassName</td><td>string</td><td>Optional</td><td>Class for the submit button</td></tr><tr><td>translations</td><td>Partial&#x3C;GPayTranslations></td><td>Optional</td><td>Override default title, description, button and error texts</td></tr><tr><td>customUIRender</td><td>function</td><td>Optional</td><td>Function to override the internal rendering logic and provide custom layout</td></tr></tbody></table>

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

<table><thead><tr><th width="153.8671875">Parameter</th><th width="184.76953125">Type</th><th>Description</th></tr></thead><tbody><tr><td>handleSubmit</td><td>UseFormHandleSubmit&#x3C;GPayForm></td><td>Wrapper for your onSubmit function with validation</td></tr><tr><td>onSubmit</td><td>SubmitHandler&#x3C;GPayForm></td><td>Submit logic that handles payment integration internally</td></tr><tr><td>control</td><td>Control&#x3C;GPayForm></td><td>React Hook Form control object, useful for controlled inputs</td></tr><tr><td>errors</td><td>FieldErrors&#x3C;GPayForm></td><td>Validation errors, helpful for form field error handling</td></tr><tr><td>translations</td><td>GPayTranslations</td><td>Final translation object with merged defaults and overrides</td></tr></tbody></table>

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

```javascript
{
  title: 'Pay with GarantiPay',
  description: [
    'Click on the "GarantiPay" button. Guarantee for payment you will be redirected to the payment page.',
    'Log in to your account with your username and password on the Garanti Pay page. If you do not have a Garanti Pay membership, create a new membership you can create.',
    'Complete the payment process by selecting your card and payment type.'
  ],
  button: 'Pay with GarantiPay',
  error: 'An error occurred during payment'
}
```

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

```bash
/src/views/checkout/steps/payment/options/gpay.tsx
```

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

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

const GPay = () => {
 return (
   <PluginModule
     component={Component.GPay}
     props={{
       translations: {
         title: 'Pay with GarantiPay',
         description: [
           'Click on the "Pay with GarantiPay" button. You will be redirected to the payment page.',
           'Log in with your credentials. If you don't have an account, create one.',
           'Select your card and complete the payment process.'
         ],
         button: 'Pay Now'
       },
       containerClassName: 'bg-gray-50 p-6 rounded-lg',
       titleClassName: 'text-xl font-bold',
       descriptionClassName: 'text-sm text-gray-700',
       buttonClassName: 'bg-primary text-white py-2'
     }}
   />
 );
};

export default GPay;
```

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

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

const GPay = () => {
 return (
   <PluginModule
     component={Component.GPay}
     props={{
       translations: {
         title: 'Pay with GarantiPay',
         description: [
           'Click the button below to pay for your order using GarantiPay.'
         ],
         button: 'Pay Now'
       },
       customUIRender: ({ handleSubmit, onSubmit, translations }) => (
         <form onSubmit={handleSubmit(onSubmit)} className="p-6 bg-white rounded-md space-y-4">
           <h2 className="text-2xl font-semibold">{translations.title}</h2>
           <ul className="text-sm text-gray-700 list-disc pl-4">
             {translations.description.map((item, index) => (
               <li key={index}>{item}</li>
             ))}
           </ul>
           <button
             type="submit"
             className="w-full h-10 bg-black text-white rounded"
           >
             {translations.button}
           </button>
         </form>
       )
     }}
   />
 );
};

export default GPay;
```

### <mark style="color:red;">**Garanti Pay Redirect**</mark>

To complete the payment, a redirect page must be created to handle post-payment logic:

```bash
/src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
```

```javascript
import { GarantiPayRedirect } from '@akinon/pz-gpay/src/routes/garanti-pay-redirect';

export default GarantiPayRedirect;
```