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


---

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