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.

Installation Method

You can use the following command to install the extension with the latest plugins:

npx @akinon/projectzero@latest --plugins

Props

Prop	Type	Required	Description
containerClassName	string	Optional	Custom class for the root <form> container
titleClassName	string	Optional	Class for the title (<h1> element)
descriptionClassName	string	Optional	Class for the description container
buttonClassName	string	Optional	Class for the submit button
translations	Partial<GPayTranslations>	Optional	Override default title, description, button and error texts
customUIRender	function	Optional	Function to override the internal rendering logic and provide custom layout

CustomUIRender Parameters

Parameter	Type	Description
handleSubmit	UseFormHandleSubmit<GPayForm>	Wrapper for your onSubmit function with validation
onSubmit	SubmitHandler<GPayForm>	Submit logic that handles payment integration internally
control	Control<GPayForm>	React Hook Form control object, useful for controlled inputs
errors	FieldErrors<GPayForm>	Validation errors, helpful for form field error handling
translations	GPayTranslations	Final translation object with merged defaults and overrides

Default Translations

{
  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'
}

Usage Examples

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

Default Usage

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;

Custom UI Usage

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;

Garanti Pay Redirect

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

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

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

export default GarantiPayRedirect;