> 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.