> For the complete documentation index, see [llms.txt](https://docs.akinon.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.akinon.com/technical-guides/project-zero/next.js/plugins/garantipay.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/next.js/plugins/garantipay.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.