@akinon/pz-gpay 1.121.0 → 1.122.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/package.json +1 -1
- package/readme.md +102 -5
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -10,9 +10,55 @@ npx @akinon/projectzero@latest --plugins
|
|
|
10
10
|
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
## GPAY
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
The `GPayOption` component provides GarantiPay (GPay) payment integration within the checkout process. It supports both default UI rendering and a fully customized UI via the `customUIRender` prop.
|
|
16
|
+
|
|
17
|
+
### Props
|
|
18
|
+
|
|
19
|
+
| Prop | Type | Required | Description |
|
|
20
|
+
| --- | --- | --- | --- |
|
|
21
|
+
| `containerClassName` | `string` | Optional | Custom class for the root `<form>` container |
|
|
22
|
+
| `titleClassName` | `string` | Optional | Class for the title (`<h1>` element) |
|
|
23
|
+
| `descriptionClassName` | `string` | Optional | Class for the description container |
|
|
24
|
+
| `buttonClassName` | `string` | Optional | Class for the submit button |
|
|
25
|
+
| `translations` | `Partial<GPayTranslations>` | Optional | Override default title, description, button and error texts |
|
|
26
|
+
| `customUIRender` | `function` | Optional | Function to override the internal rendering logic and provide custom layout |
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
### `customUIRender` Parameters
|
|
31
|
+
|
|
32
|
+
| Parameter | Type | Description |
|
|
33
|
+
| --- | --- | --- |
|
|
34
|
+
| `handleSubmit` | `UseFormHandleSubmit<GPayForm>` | Wrapper for your `onSubmit` function with validation |
|
|
35
|
+
| `onSubmit` | `SubmitHandler<GPayForm>` | Submit logic that handles payment integration internally |
|
|
36
|
+
| `control` | `Control<GPayForm>` | React Hook Form control object, useful for controlled inputs |
|
|
37
|
+
| `errors` | `FieldErrors<GPayForm>` | Validation errors, helpful for form field error handling |
|
|
38
|
+
| `translations` | `GPayTranslations` | Final translation object with merged defaults and overrides |
|
|
39
|
+
|
|
40
|
+
### Default Translations
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
{
|
|
44
|
+
title: 'Pay with GarantiPay',
|
|
45
|
+
description: [
|
|
46
|
+
'Click on the "GarantiPay" button. Guarantee for payment you will be redirected to the payment page.',
|
|
47
|
+
'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.',
|
|
48
|
+
'Complete the payment process by selecting your card and payment type.'
|
|
49
|
+
],
|
|
50
|
+
button: 'Pay with GarantiPay',
|
|
51
|
+
error: 'An error occurred during payment'
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Usage Examples
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
/src/views/checkout/steps/payment/options/gpay.tsx
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Default Usage
|
|
16
62
|
|
|
17
63
|
```javascript
|
|
18
64
|
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
|
|
@@ -24,8 +70,11 @@ const GPay = () => {
|
|
|
24
70
|
props={{
|
|
25
71
|
translations: {
|
|
26
72
|
title: 'Pay with GarantiPay',
|
|
27
|
-
description:
|
|
28
|
-
'Click the button
|
|
73
|
+
description: [
|
|
74
|
+
'Click on the "Pay with GarantiPay" button. You will be redirected to the payment page.',
|
|
75
|
+
'Log in with your credentials. If you don\'t have an account, create one.',
|
|
76
|
+
'Select your card and complete the payment process.'
|
|
77
|
+
],
|
|
29
78
|
button: 'Pay Now'
|
|
30
79
|
},
|
|
31
80
|
containerClassName: 'bg-gray-50 rounded-md',
|
|
@@ -56,7 +105,55 @@ const GPay = () => {
|
|
|
56
105
|
export default GPay;
|
|
57
106
|
```
|
|
58
107
|
|
|
59
|
-
|
|
108
|
+
## Custom UI Usage
|
|
109
|
+
|
|
110
|
+
```javascript
|
|
111
|
+
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
|
|
112
|
+
|
|
113
|
+
const GPay = () => {
|
|
114
|
+
return (
|
|
115
|
+
<PluginModule
|
|
116
|
+
component={Component.GPay}
|
|
117
|
+
props={{
|
|
118
|
+
translations: {
|
|
119
|
+
title: 'Pay with GarantiPay',
|
|
120
|
+
description: [
|
|
121
|
+
'Click the button below to pay for your order using GarantiPay.'
|
|
122
|
+
],
|
|
123
|
+
button: 'Pay Now'
|
|
124
|
+
},
|
|
125
|
+
customUIRender: ({ handleSubmit, onSubmit, translations }) => (
|
|
126
|
+
<form
|
|
127
|
+
onSubmit={handleSubmit(onSubmit)}
|
|
128
|
+
className="p-6 bg-white rounded-md space-y-4"
|
|
129
|
+
>
|
|
130
|
+
<h2 className="text-2xl font-semibold">{translations.title}</h2>
|
|
131
|
+
<ul className="text-sm text-gray-700 list-disc pl-4">
|
|
132
|
+
{translations.description.map((item, index) => (
|
|
133
|
+
<li key={index}>{item}</li>
|
|
134
|
+
))}
|
|
135
|
+
</ul>
|
|
136
|
+
<button
|
|
137
|
+
type="submit"
|
|
138
|
+
className="w-full h-10 bg-black text-white rounded"
|
|
139
|
+
>
|
|
140
|
+
{translations.button}
|
|
141
|
+
</button>
|
|
142
|
+
</form>
|
|
143
|
+
)
|
|
144
|
+
}}
|
|
145
|
+
/>
|
|
146
|
+
);
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
export default GPay;
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## Garanti Pay Redirect
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
/src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
|
|
156
|
+
```
|
|
60
157
|
|
|
61
158
|
```javascript
|
|
62
159
|
import { GarantiPayRedirect } from '@akinon/pz-gpay/src/routes/garanti-pay-redirect';
|