strapi-plugin-payone-provider 1.6.4 → 1.6.6

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.
@@ -123,6 +123,32 @@ const ConfigurationPanel = ({
123
123
  />
124
124
  </Flex>
125
125
 
126
+ <Flex gap={4} wrap="wrap">
127
+ <TextInput
128
+ label="Domain Name"
129
+ name="domainName"
130
+ value={settings.domainName || ""}
131
+ onChange={(e) =>
132
+ onInputChange("domainName", e.target.value)
133
+ }
134
+ hint="Your domain name (optional)"
135
+ className="payment-input"
136
+ style={{ flex: 1, minWidth: "300px" }}
137
+ />
138
+
139
+ <TextInput
140
+ label="Display Name"
141
+ name="displayName"
142
+ value={settings.displayName || ""}
143
+ onChange={(e) =>
144
+ onInputChange("displayName", e.target.value)
145
+ }
146
+ hint="Display name for payment methods (optional)"
147
+ className="payment-input"
148
+ style={{ flex: 1, minWidth: "300px" }}
149
+ />
150
+ </Flex>
151
+
126
152
  <Flex gap={4} wrap="wrap">
127
153
  <Select
128
154
  label="Mode"
@@ -1,7 +1,4 @@
1
1
  import React from "react";
2
- <<<<<<< HEAD
3
- import { Box, Flex, Typography, Select, Option, Checkbox, Stack } from "@strapi/design-system";
4
- =======
5
2
  import {
6
3
  Box,
7
4
  Flex,
@@ -11,47 +8,27 @@ import {
11
8
  Checkbox,
12
9
  Stack,
13
10
  } from "@strapi/design-system";
14
- >>>>>>> release/1.6.4
15
11
  import {
16
12
  GOOGLE_PAY_SUPPORTED_COUNTRIES,
17
13
  GOOGLE_PAY_SUPPORTED_CURRENCIES,
18
14
  GOOGLE_PAY_SUPPORTED_NETWORKS,
19
15
  GOOGLE_PAY_AUTH_METHODS,
20
- <<<<<<< HEAD
21
- DEFAULT_GOOGLE_PAY_CONFIG
22
- } from "../../utils/googlePayConstants";
23
-
24
- const GooglePayConfig = ({
25
- config,
26
- onConfigChange,
27
- settings
28
- }) => {
29
- =======
30
16
  DEFAULT_GOOGLE_PAY_CONFIG,
31
17
  } from "../../utils/googlePayConstants";
32
18
 
33
19
  const GooglePayConfig = ({ config, onConfigChange, settings }) => {
34
- >>>>>>> release/1.6.4
35
20
  const {
36
21
  countryCode = DEFAULT_GOOGLE_PAY_CONFIG.countryCode,
37
22
  currencyCode = DEFAULT_GOOGLE_PAY_CONFIG.currencyCode,
38
23
  allowedCardNetworks = DEFAULT_GOOGLE_PAY_CONFIG.allowedCardNetworks,
39
24
  allowedAuthMethods = DEFAULT_GOOGLE_PAY_CONFIG.allowedAuthMethods,
40
- <<<<<<< HEAD
41
- merchantName = DEFAULT_GOOGLE_PAY_CONFIG.merchantName
42
- =======
43
25
  merchantName = DEFAULT_GOOGLE_PAY_CONFIG.merchantName,
44
- >>>>>>> release/1.6.4
45
26
  } = config || {};
46
27
 
47
28
  const handleCountryChange = (value) => {
48
29
  onConfigChange({
49
30
  ...config,
50
- <<<<<<< HEAD
51
- countryCode: value
52
- =======
53
31
  countryCode: value,
54
- >>>>>>> release/1.6.4
55
32
  });
56
33
  };
57
34
 
@@ -8,7 +8,7 @@ import {
8
8
  Stack,
9
9
  Typography,
10
10
  TextInput,
11
- Divider
11
+ Divider,
12
12
  } from "@strapi/design-system";
13
13
  import { Search } from "@strapi/icons";
14
14
  import TransactionHistoryItem from "./TransactionHistoryItem";
@@ -24,9 +24,8 @@ const HistoryPanel = ({
24
24
  totalPages,
25
25
  pageSize,
26
26
  onRefresh,
27
- onPageChange
27
+ onPageChange,
28
28
  }) => {
29
-
30
29
  return (
31
30
  <Box
32
31
  className="payment-container"
@@ -37,10 +36,20 @@ const HistoryPanel = ({
37
36
  >
38
37
  <Flex direction="column" alignItems="stretch" gap={8}>
39
38
  <Box>
40
- <Typography variant="beta" as="h2" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
39
+ <Typography
40
+ variant="beta"
41
+ as="h2"
42
+ className="payment-title"
43
+ style={{ fontSize: "20px", marginBottom: "4px" }}
44
+ >
41
45
  Transaction Management
42
46
  </Typography>
43
- <Typography variant="pi" textColor="neutral600" className="payment-subtitle" style={{ fontSize: '14px', marginTop: '4px' }}>
47
+ <Typography
48
+ variant="pi"
49
+ textColor="neutral600"
50
+ className="payment-subtitle"
51
+ style={{ fontSize: "14px", marginTop: "4px" }}
52
+ >
44
53
  View and filter all payment transactions processed through Payone
45
54
  </Typography>
46
55
  </Box>
@@ -193,7 +202,7 @@ const HistoryPanel = ({
193
202
  <CardBody padding={4}>
194
203
  <Flex justifyContent="space-between" alignItems="center">
195
204
  {transactionHistory.length > pageSize &&
196
- totalPages > 1 ? (
205
+ totalPages > 1 ? (
197
206
  <Flex gap={3} alignItems="center">
198
207
  <Button
199
208
  variant="default"
@@ -202,10 +211,13 @@ const HistoryPanel = ({
202
211
  onPageChange(Math.max(1, currentPage - 1))
203
212
  }
204
213
  disabled={currentPage === 1}
205
- className={`payment-button ${currentPage === 1 ? '' : 'payment-button-success'}`}
214
+ className={`payment-button ${
215
+ currentPage === 1 ? "" : "payment-button-success"
216
+ }`}
206
217
  style={{
207
- background: currentPage === 1 ? "#f6f6f9" : undefined,
208
- color: currentPage === 1 ? "#666687" : undefined
218
+ background:
219
+ currentPage === 1 ? "#f6f6f9" : undefined,
220
+ color: currentPage === 1 ? "#666687" : undefined,
209
221
  }}
210
222
  >
211
223
  ← Previous
@@ -234,10 +246,20 @@ const HistoryPanel = ({
234
246
  )
235
247
  }
236
248
  disabled={currentPage === totalPages}
237
- className={`payment-button ${currentPage === totalPages ? '' : 'payment-button-success'}`}
249
+ className={`payment-button ${
250
+ currentPage === totalPages
251
+ ? ""
252
+ : "payment-button-success"
253
+ }`}
238
254
  style={{
239
- background: currentPage === totalPages ? "#f6f6f9" : undefined,
240
- color: currentPage === totalPages ? "#666687" : undefined
255
+ background:
256
+ currentPage === totalPages
257
+ ? "#f6f6f9"
258
+ : undefined,
259
+ color:
260
+ currentPage === totalPages
261
+ ? "#666687"
262
+ : undefined,
241
263
  }}
242
264
  >
243
265
  Next →
@@ -35,7 +35,6 @@ const PaymentActionsPanel = ({
35
35
  onCapture,
36
36
  onRefund,
37
37
  settings,
38
- googlePayToken,
39
38
  setGooglePayToken,
40
39
  applePayToken,
41
40
  setApplePayToken,
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react';
1
+ import React, { useState } from "react";
2
2
  import {
3
3
  Box,
4
4
  Card,
@@ -8,41 +8,36 @@ import {
8
8
  Typography,
9
9
  Badge,
10
10
  Button,
11
- } from '@strapi/design-system';
12
- import {
13
- ChevronDownIcon,
14
- ChevronUpIcon,
15
- } from './icons';
11
+ } from "@strapi/design-system";
12
+ import { ChevronDownIcon, ChevronUpIcon } from "./icons";
16
13
  const TransactionHistoryItem = ({ transaction }) => {
17
14
  const [isExpanded, setIsExpanded] = useState(false);
18
15
 
19
-
20
16
  const getStatusColor = (status) => {
21
17
  switch (status) {
22
- case 'APPROVED':
23
- return 'success';
24
- case 'ERROR':
25
- return 'danger';
26
- case 'PENDING':
27
- return 'warning';
18
+ case "APPROVED":
19
+ return "success";
20
+ case "ERROR":
21
+ return "danger";
22
+ case "PENDING":
23
+ return "warning";
28
24
  default:
29
- return 'neutral';
25
+ return "neutral";
30
26
  }
31
27
  };
32
28
 
33
-
34
29
  const getPaymentMethodName = (clearingtype, wallettype) => {
35
30
  switch (clearingtype) {
36
- case 'cc':
37
- return 'Credit Card';
38
- case 'sb':
39
- return 'Online Banking';
40
- case 'wlt':
41
- return wallettype === 'PPE' ? 'PayPal' : 'Wallet';
42
- case 'elv':
43
- return 'Direct Debit (SEPA)';
31
+ case "cc":
32
+ return "Credit Card";
33
+ case "sb":
34
+ return "Online Banking";
35
+ case "wlt":
36
+ return wallettype === "PPE" ? "PayPal" : "Wallet";
37
+ case "elv":
38
+ return "Direct Debit (SEPA)";
44
39
  default:
45
- return 'Unknown';
40
+ return "Unknown";
46
41
  }
47
42
  };
48
43
 
@@ -51,25 +46,25 @@ const TransactionHistoryItem = ({ transaction }) => {
51
46
  };
52
47
 
53
48
  const formatDate = (dateString) => {
54
- return new Date(dateString).toLocaleString('de-DE', {
55
- year: 'numeric',
56
- month: '2-digit',
57
- day: '2-digit',
58
- hour: '2-digit',
59
- minute: '2-digit',
49
+ return new Date(dateString).toLocaleString("de-DE", {
50
+ year: "numeric",
51
+ month: "2-digit",
52
+ day: "2-digit",
53
+ hour: "2-digit",
54
+ minute: "2-digit",
60
55
  });
61
56
  };
62
57
 
63
58
  const getCardTypeName = (cardtype) => {
64
59
  switch (cardtype) {
65
- case 'V':
66
- return 'Visa';
67
- case 'M':
68
- return 'Mastercard';
69
- case 'A':
70
- return 'American Express';
60
+ case "V":
61
+ return "Visa";
62
+ case "M":
63
+ return "Mastercard";
64
+ case "A":
65
+ return "American Express";
71
66
  default:
72
- return cardtype || 'Unknown';
67
+ return cardtype || "Unknown";
73
68
  }
74
69
  };
75
70
 
@@ -80,10 +75,13 @@ const TransactionHistoryItem = ({ transaction }) => {
80
75
  hasRadius
81
76
  shadow="filterShadow"
82
77
  style={{
83
- marginBottom: '16px',
78
+ marginBottom: "16px",
84
79
  }}
85
80
  >
86
- <CardBody padding={6} style={{ display: "flex", flexDirection: 'column', gap: '6px' }}>
81
+ <CardBody
82
+ padding={6}
83
+ style={{ display: "flex", flexDirection: "column", gap: "6px" }}
84
+ >
87
85
  {/* Main Values in Column Format */}
88
86
  <Stack spacing={3} marginBottom={4}>
89
87
  {/* Reference */}
@@ -111,11 +109,16 @@ const TransactionHistoryItem = ({ transaction }) => {
111
109
  Method:
112
110
  </Typography>
113
111
  <Typography variant="pi" textColor="neutral800">
114
- {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
112
+ {getPaymentMethodName(
113
+ transaction.raw_request?.clearingtype,
114
+ transaction.raw_request?.wallettype
115
+ )}
115
116
  </Typography>
116
117
  {transaction.txid && (
117
118
  <>
118
- <Typography variant="pi" textColor="neutral500">•</Typography>
119
+ <Typography variant="pi" textColor="neutral500">
120
+
121
+ </Typography>
119
122
  <Typography variant="pi" textColor="neutral600">
120
123
  TX: {transaction.txid}
121
124
  </Typography>
@@ -128,7 +131,12 @@ const TransactionHistoryItem = ({ transaction }) => {
128
131
  <Typography variant="pi" textColor="neutral600" fontWeight="medium">
129
132
  Amount:
130
133
  </Typography>
131
- <Typography variant="pi" fontWeight="bold" textColor="primary600" fontSize={2}>
134
+ <Typography
135
+ variant="pi"
136
+ fontWeight="bold"
137
+ textColor="primary600"
138
+ fontSize={2}
139
+ >
132
140
  {formatAmount(transaction.amount, transaction.currency)}
133
141
  </Typography>
134
142
  <Badge
@@ -140,26 +148,36 @@ const TransactionHistoryItem = ({ transaction }) => {
140
148
  </Flex>
141
149
  </Stack>
142
150
 
143
-
144
-
145
151
  {/* Expand/Collapse Button */}
146
152
  <Flex justifyContent="center">
147
153
  <Button
148
154
  size="S"
149
155
  onClick={() => setIsExpanded(!isExpanded)}
150
- startIcon={isExpanded ? <ChevronUpIcon size={16} /> : <ChevronDownIcon size={16} />}
156
+ startIcon={
157
+ isExpanded ? (
158
+ <ChevronUpIcon size={16} />
159
+ ) : (
160
+ <ChevronDownIcon size={16} />
161
+ )
162
+ }
151
163
  className="payment-button payment-button-primary"
152
164
  >
153
- {isExpanded ? 'Hide Details' : 'Show Details'}
165
+ {isExpanded ? "Hide Details" : "Show Details"}
154
166
  </Button>
155
167
  </Flex>
156
168
 
157
169
  {/* Expanded Details */}
158
170
  {isExpanded && (
159
- <Box marginTop={4} style={{ animation: 'fadeIn 0.3s ease-out' }}>
171
+ <Flex
172
+ marginTop={4}
173
+ style={{
174
+ animation: "fadeIn 0.3s ease-out",
175
+ gap: "32px",
176
+ }}
177
+ >
160
178
  <Stack spacing={4}>
161
179
  {/* Error Message */}
162
- {transaction.status === 'ERROR' && (
180
+ {transaction.status === "ERROR" && (
163
181
  <Box
164
182
  marginBottom={4}
165
183
  padding={3}
@@ -167,11 +185,16 @@ const TransactionHistoryItem = ({ transaction }) => {
167
185
  hasRadius
168
186
  className="payment-alert"
169
187
  style={{
170
- border: '1px solid',
171
- borderColor: 'var(--strapi-colors-danger200)',
188
+ border: "1px solid",
189
+ borderColor: "var(--strapi-colors-danger200)",
172
190
  }}
173
191
  >
174
- <Typography variant="pi" fontWeight="bold" textColor="danger600" marginBottom={1}>
192
+ <Typography
193
+ variant="pi"
194
+ fontWeight="bold"
195
+ textColor="danger600"
196
+ marginBottom={1}
197
+ >
175
198
  Error: {transaction.error_message}
176
199
  </Typography>
177
200
  {transaction.customer_message && (
@@ -184,22 +207,35 @@ const TransactionHistoryItem = ({ transaction }) => {
184
207
  {/* Customer Information */}
185
208
  <Box>
186
209
  <Flex alignItems="center" gap={2} marginBottom={3}>
187
- <Typography variant="pi" fontWeight="bold" textColor="neutral800">
210
+ <Typography
211
+ variant="pi"
212
+ fontWeight="bold"
213
+ textColor="neutral800"
214
+ >
188
215
  Customer Information
189
216
  </Typography>
190
217
  </Flex>
191
218
  <Box paddingLeft={4}>
192
219
  <Stack spacing={2}>
193
220
  <Flex justifyContent="space-between" gap={3}>
194
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
221
+ <Typography
222
+ variant="pi"
223
+ textColor="neutral600"
224
+ fontWeight="medium"
225
+ >
195
226
  Name:
196
227
  </Typography>
197
228
  <Typography variant="pi" textColor="neutral800">
198
- {transaction.raw_request?.firstname} {transaction.raw_request?.lastname}
229
+ {transaction.raw_request?.firstname}{" "}
230
+ {transaction.raw_request?.lastname}
199
231
  </Typography>
200
232
  </Flex>
201
233
  <Flex justifyContent="space-between" gap={3}>
202
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
234
+ <Typography
235
+ variant="pi"
236
+ textColor="neutral600"
237
+ fontWeight="medium"
238
+ >
203
239
  Email:
204
240
  </Typography>
205
241
  <Typography variant="pi" textColor="neutral800">
@@ -207,7 +243,11 @@ const TransactionHistoryItem = ({ transaction }) => {
207
243
  </Typography>
208
244
  </Flex>
209
245
  <Flex justifyContent="space-between" gap={3}>
210
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
246
+ <Typography
247
+ variant="pi"
248
+ textColor="neutral600"
249
+ fontWeight="medium"
250
+ >
211
251
  Phone:
212
252
  </Typography>
213
253
  <Typography variant="pi" textColor="neutral800">
@@ -215,15 +255,25 @@ const TransactionHistoryItem = ({ transaction }) => {
215
255
  </Typography>
216
256
  </Flex>
217
257
  <Flex justifyContent="space-between" gap={3}>
218
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
258
+ <Typography
259
+ variant="pi"
260
+ textColor="neutral600"
261
+ fontWeight="medium"
262
+ >
219
263
  Address:
220
264
  </Typography>
221
265
  <Typography variant="pi" textColor="neutral800">
222
- {transaction.raw_request?.street}, {transaction.raw_request?.zip} {transaction.raw_request?.city}
266
+ {transaction.raw_request?.street},{" "}
267
+ {transaction.raw_request?.zip}{" "}
268
+ {transaction.raw_request?.city}
223
269
  </Typography>
224
270
  </Flex>
225
271
  <Flex justifyContent="space-between" gap={3}>
226
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
272
+ <Typography
273
+ variant="pi"
274
+ textColor="neutral600"
275
+ fontWeight="medium"
276
+ >
227
277
  Country:
228
278
  </Typography>
229
279
  <Typography variant="pi" textColor="neutral800">
@@ -237,25 +287,40 @@ const TransactionHistoryItem = ({ transaction }) => {
237
287
  {/* Payment Method Details */}
238
288
  <Box>
239
289
  <Flex alignItems="center" gap={2} marginBottom={3}>
240
- <Typography variant="pi" fontWeight="bold" textColor="neutral800">
290
+ <Typography
291
+ variant="pi"
292
+ fontWeight="bold"
293
+ textColor="neutral800"
294
+ >
241
295
  Payment Method Details
242
296
  </Typography>
243
297
  </Flex>
244
298
  <Box paddingLeft={4}>
245
299
  <Stack spacing={2}>
246
300
  <Flex justifyContent="space-between" gap={3}>
247
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
301
+ <Typography
302
+ variant="pi"
303
+ textColor="neutral600"
304
+ fontWeight="medium"
305
+ >
248
306
  Type:
249
307
  </Typography>
250
308
  <Typography variant="pi" textColor="neutral800">
251
- {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
309
+ {getPaymentMethodName(
310
+ transaction.raw_request?.clearingtype,
311
+ transaction.raw_request?.wallettype
312
+ )}
252
313
  </Typography>
253
314
  </Flex>
254
315
 
255
- {transaction.raw_request?.clearingtype === 'cc' && (
316
+ {transaction.raw_request?.clearingtype === "cc" && (
256
317
  <>
257
318
  <Flex justifyContent="space-between" gap={3}>
258
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
319
+ <Typography
320
+ variant="pi"
321
+ textColor="neutral600"
322
+ fontWeight="medium"
323
+ >
259
324
  Card Type:
260
325
  </Typography>
261
326
  <Typography variant="pi" textColor="neutral800">
@@ -263,15 +328,24 @@ const TransactionHistoryItem = ({ transaction }) => {
263
328
  </Typography>
264
329
  </Flex>
265
330
  <Flex justifyContent="space-between" gap={3}>
266
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
331
+ <Typography
332
+ variant="pi"
333
+ textColor="neutral600"
334
+ fontWeight="medium"
335
+ >
267
336
  Card Number:
268
337
  </Typography>
269
338
  <Typography variant="pi" textColor="neutral800">
270
- **** **** **** {transaction.raw_request?.cardpan?.slice(-4)}
339
+ **** **** ****{" "}
340
+ {transaction.raw_request?.cardpan?.slice(-4)}
271
341
  </Typography>
272
342
  </Flex>
273
343
  <Flex justifyContent="space-between" gap={3}>
274
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
344
+ <Typography
345
+ variant="pi"
346
+ textColor="neutral600"
347
+ fontWeight="medium"
348
+ >
275
349
  Expiry:
276
350
  </Typography>
277
351
  <Typography variant="pi" textColor="neutral800">
@@ -281,21 +355,30 @@ const TransactionHistoryItem = ({ transaction }) => {
281
355
  </>
282
356
  )}
283
357
 
284
- {transaction.raw_request?.clearingtype === 'wlt' && transaction.raw_request?.wallettype && (
285
- <Flex justifyContent="space-between" gap={3}>
286
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
287
- Wallet Type:
288
- </Typography>
289
- <Typography variant="pi" textColor="neutral800">
290
- {transaction.raw_request.wallettype}
291
- </Typography>
292
- </Flex>
293
- )}
358
+ {transaction.raw_request?.clearingtype === "wlt" &&
359
+ transaction.raw_request?.wallettype && (
360
+ <Flex justifyContent="space-between" gap={3}>
361
+ <Typography
362
+ variant="pi"
363
+ textColor="neutral600"
364
+ fontWeight="medium"
365
+ >
366
+ Wallet Type:
367
+ </Typography>
368
+ <Typography variant="pi" textColor="neutral800">
369
+ {transaction.raw_request.wallettype}
370
+ </Typography>
371
+ </Flex>
372
+ )}
294
373
 
295
- {transaction.raw_request?.clearingtype === 'sb' && (
374
+ {transaction.raw_request?.clearingtype === "sb" && (
296
375
  <>
297
376
  <Flex justifyContent="space-between" gap={3}>
298
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
377
+ <Typography
378
+ variant="pi"
379
+ textColor="neutral600"
380
+ fontWeight="medium"
381
+ >
299
382
  Bank Transfer Type:
300
383
  </Typography>
301
384
  <Typography variant="pi" textColor="neutral800">
@@ -303,7 +386,11 @@ const TransactionHistoryItem = ({ transaction }) => {
303
386
  </Typography>
304
387
  </Flex>
305
388
  <Flex justifyContent="space-between" gap={3}>
306
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
389
+ <Typography
390
+ variant="pi"
391
+ textColor="neutral600"
392
+ fontWeight="medium"
393
+ >
307
394
  Bank Country:
308
395
  </Typography>
309
396
  <Typography variant="pi" textColor="neutral800">
@@ -318,13 +405,22 @@ const TransactionHistoryItem = ({ transaction }) => {
318
405
 
319
406
  {/* Technical Details */}
320
407
  <Box>
321
- <Typography variant="pi" fontWeight="bold" textColor="neutral800" marginBottom={3}>
408
+ <Typography
409
+ variant="pi"
410
+ fontWeight="bold"
411
+ textColor="neutral800"
412
+ marginBottom={3}
413
+ >
322
414
  Technical Details
323
415
  </Typography>
324
416
  <Box paddingLeft={4}>
325
417
  <Stack spacing={2}>
326
418
  <Flex justifyContent="space-between" gap={3}>
327
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
419
+ <Typography
420
+ variant="pi"
421
+ textColor="neutral600"
422
+ fontWeight="medium"
423
+ >
328
424
  Request Type:
329
425
  </Typography>
330
426
  <Typography variant="pi" textColor="neutral800">
@@ -332,7 +428,11 @@ const TransactionHistoryItem = ({ transaction }) => {
332
428
  </Typography>
333
429
  </Flex>
334
430
  <Flex justifyContent="space-between" gap={3}>
335
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
431
+ <Typography
432
+ variant="pi"
433
+ textColor="neutral600"
434
+ fontWeight="medium"
435
+ >
336
436
  Mode:
337
437
  </Typography>
338
438
  <Typography variant="pi" textColor="neutral800">
@@ -340,7 +440,11 @@ const TransactionHistoryItem = ({ transaction }) => {
340
440
  </Typography>
341
441
  </Flex>
342
442
  <Flex justifyContent="space-between" gap={3}>
343
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
443
+ <Typography
444
+ variant="pi"
445
+ textColor="neutral600"
446
+ fontWeight="medium"
447
+ >
344
448
  IP Address:
345
449
  </Typography>
346
450
  <Typography variant="pi" textColor="neutral800">
@@ -348,7 +452,11 @@ const TransactionHistoryItem = ({ transaction }) => {
348
452
  </Typography>
349
453
  </Flex>
350
454
  <Flex justifyContent="space-between" gap={3}>
351
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
455
+ <Typography
456
+ variant="pi"
457
+ textColor="neutral600"
458
+ fontWeight="medium"
459
+ >
352
460
  Language:
353
461
  </Typography>
354
462
  <Typography variant="pi" textColor="neutral800">
@@ -356,7 +464,11 @@ const TransactionHistoryItem = ({ transaction }) => {
356
464
  </Typography>
357
465
  </Flex>
358
466
  <Flex justifyContent="space-between" gap={3}>
359
- <Typography variant="pi" textColor="neutral600" fontWeight="medium">
467
+ <Typography
468
+ variant="pi"
469
+ textColor="neutral600"
470
+ fontWeight="medium"
471
+ >
360
472
  Customer Present:
361
473
  </Typography>
362
474
  <Typography variant="pi" textColor="neutral800">
@@ -367,7 +479,40 @@ const TransactionHistoryItem = ({ transaction }) => {
367
479
  </Box>
368
480
  </Box>
369
481
  </Stack>
370
- </Box>
482
+
483
+ <Stack spacing={4}>
484
+ <Typography variant="pi" fontWeight="bold" textColor="neutral800">
485
+ Raw Body
486
+ </Typography>
487
+ <Box
488
+ padding={4}
489
+ background="neutral100"
490
+ hasRadius
491
+ style={{
492
+ border: "1px solid",
493
+ borderColor: "var(--strapi-colors-neutral200)",
494
+ overflow: "auto",
495
+ maxHeight: "500px",
496
+ maxWidth: "800px",
497
+ }}
498
+ >
499
+ <pre
500
+ style={{
501
+ margin: 0,
502
+ padding: 0,
503
+ fontFamily: "monospace",
504
+ fontSize: "13px",
505
+ lineHeight: "1.5",
506
+ color: "Highlight",
507
+ whiteSpace: "pre-wrap",
508
+ wordBreak: "break-word",
509
+ }}
510
+ >
511
+ {JSON.stringify(transaction?.body || {}, null, 2)}
512
+ </pre>
513
+ </Box>
514
+ </Stack>
515
+ </Flex>
371
516
  )}
372
517
  </CardBody>
373
518
  </Card>
@@ -7,7 +7,7 @@ import {
7
7
  Flex,
8
8
  Stack,
9
9
  Typography,
10
- Alert
10
+ Alert,
11
11
  } from "@strapi/design-system";
12
12
  import StatusBadge from "../StatusBadge";
13
13
  import { formatTransactionData } from "../../../utils/formatTransactionData";
@@ -18,19 +18,24 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
18
18
  }
19
19
 
20
20
  const status = paymentResult?.status || paymentResult?.Status || "";
21
- const errorCode = paymentResult?.errorcode || paymentResult?.errorCode || paymentResult?.ErrorCode;
22
- const errorMessage = paymentResult?.errormessage || paymentResult?.errorMessage || paymentResult?.ErrorMessage;
23
- const customerMessage = paymentResult?.customermessage || paymentResult?.customerMessage || paymentResult?.CustomerMessage;
21
+ const errorCode =
22
+ paymentResult?.errorcode ||
23
+ paymentResult?.errorCode ||
24
+ paymentResult?.ErrorCode;
25
+ const errorMessage =
26
+ paymentResult?.errormessage ||
27
+ paymentResult?.errorMessage ||
28
+ paymentResult?.ErrorMessage;
29
+ const customerMessage =
30
+ paymentResult?.customermessage ||
31
+ paymentResult?.customerMessage ||
32
+ paymentResult?.CustomerMessage;
24
33
  const isError = status === "ERROR" || status === "INVALID" || errorCode;
25
34
 
26
35
  return (
27
36
  <>
28
37
  {paymentError && (
29
- <Alert
30
- variant="danger"
31
- title="Error"
32
- className="payment-alert"
33
- >
38
+ <Alert variant="danger" title="Error" className="payment-alert">
34
39
  {paymentError}
35
40
  </Alert>
36
41
  )}
@@ -40,7 +45,11 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
40
45
  <CardBody>
41
46
  <Stack spacing={4}>
42
47
  <Flex justifyContent="space-between" alignItems="center">
43
- <Typography variant="delta" as="h3" className="payment-section-title">
48
+ <Typography
49
+ variant="delta"
50
+ as="h3"
51
+ className="payment-section-title"
52
+ >
44
53
  Payment Result
45
54
  </Typography>
46
55
  {(status || paymentResult.Status) && (
@@ -48,7 +57,7 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
48
57
  )}
49
58
  </Flex>
50
59
 
51
- <hr className="payment-divider" style={{ margin: '16px 0' }} />
60
+ <hr className="payment-divider" style={{ margin: "16px 0" }} />
52
61
 
53
62
  {/* Show error information prominently if error */}
54
63
  {isError && (
@@ -74,7 +83,11 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
74
83
  )}
75
84
 
76
85
  <Box>
77
- <Typography variant="omega" fontWeight="semiBold" marginBottom={2}>
86
+ <Typography
87
+ variant="omega"
88
+ fontWeight="semiBold"
89
+ marginBottom={2}
90
+ >
78
91
  Full Response Details:
79
92
  </Typography>
80
93
  <Stack spacing={3}>
@@ -84,14 +97,18 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
84
97
  justifyContent="space-between"
85
98
  alignItems="start"
86
99
  style={{
87
- padding: '8px 0',
88
- borderBottom: index < formatTransactionData(paymentResult).length - 1 ? '1px solid #e8e8ea' : 'none'
100
+ padding: "8px 0",
101
+ borderBottom:
102
+ index <
103
+ formatTransactionData(paymentResult).length - 1
104
+ ? "1px solid #e8e8ea"
105
+ : "none",
89
106
  }}
90
107
  >
91
108
  <Typography
92
109
  variant="pi"
93
110
  textColor="neutral600"
94
- style={{ minWidth: "200px", fontWeight: '500' }}
111
+ style={{ minWidth: "200px", fontWeight: "500" }}
95
112
  >
96
113
  {item.key}:
97
114
  </Typography>
@@ -100,10 +117,14 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
100
117
  style={{
101
118
  flex: 1,
102
119
  textAlign: "right",
103
- fontWeight: '400',
104
- wordBreak: 'break-word',
105
- fontFamily: item.key.toLowerCase().includes('raw') ? 'monospace' : 'inherit',
106
- fontSize: item.key.toLowerCase().includes('raw') ? '11px' : 'inherit'
120
+ fontWeight: "400",
121
+ wordBreak: "break-word",
122
+ fontFamily: item.key.toLowerCase().includes("raw")
123
+ ? "monospace"
124
+ : "inherit",
125
+ fontSize: item.key.toLowerCase().includes("raw")
126
+ ? "11px"
127
+ : "inherit",
107
128
  }}
108
129
  >
109
130
  {item.value}
@@ -115,27 +136,51 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
115
136
 
116
137
  {/* 3DS Required Warning */}
117
138
  {paymentResult?.is3DSRequired && !paymentResult?.redirectUrl && (
118
- <Alert variant="warning" title="3D Secure Authentication Required">
139
+ <Alert
140
+ variant="warning"
141
+ title="3D Secure Authentication Required"
142
+ >
119
143
  <Stack spacing={2}>
120
144
  <Typography variant="pi">
121
- Payone requires 3D Secure authentication, but no redirect URL was provided in the response.
145
+ Payone requires 3D Secure authentication, but no redirect
146
+ URL was provided in the response.
122
147
  </Typography>
123
148
  <Typography variant="pi" fontWeight="semiBold">
124
149
  Possible solutions:
125
150
  </Typography>
126
- <Typography variant="pi" component="ul" style={{ marginLeft: '20px' }}>
127
- <li>Check Payone portal configuration for 3DS settings</li>
128
- <li>Verify that redirect URLs (successurl, errorurl, backurl) are properly configured</li>
129
- <li>Ensure you're using test mode with proper test credentials</li>
130
- <li>Check if 3dscheck request is needed before authorization</li>
151
+ <Typography
152
+ variant="pi"
153
+ component="ul"
154
+ style={{ marginLeft: "20px" }}
155
+ >
156
+ <li>
157
+ Check Payone portal configuration for 3DS settings
158
+ </li>
159
+ <li>
160
+ Verify that redirect URLs (successurl, errorurl,
161
+ backurl) are properly configured
162
+ </li>
163
+ <li>
164
+ Ensure you're using test mode with proper test
165
+ credentials
166
+ </li>
167
+ <li>
168
+ Check if 3dscheck request is needed before authorization
169
+ </li>
131
170
  </Typography>
132
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
133
- <strong>Error Code:</strong> {paymentResult?.errorCode || paymentResult?.ErrorCode || "4219"}
171
+ <Typography
172
+ variant="pi"
173
+ textColor="neutral600"
174
+ marginTop={2}
175
+ >
176
+ <strong>Error Code:</strong>{" "}
177
+ {paymentResult?.errorCode ||
178
+ paymentResult?.ErrorCode ||
179
+ "4219"}
134
180
  </Typography>
135
181
  </Stack>
136
182
  </Alert>
137
183
  )}
138
-
139
184
  </Stack>
140
185
  </CardBody>
141
186
  </Card>
@@ -145,4 +190,3 @@ const PaymentResult = ({ paymentError, paymentResult }) => {
145
190
  };
146
191
 
147
192
  export default PaymentResult;
148
-
@@ -76,14 +76,6 @@ const usePaymentActions = () => {
76
76
  };
77
77
 
78
78
  const handlePreauthorization = async (tokenParam = null) => {
79
- <<<<<<< HEAD
80
- console.log("[Payment] handlePreauthorization called", {
81
- hasToken: !!tokenParam,
82
- paymentMethod,
83
- amount: paymentAmount
84
- });
85
- =======
86
- >>>>>>> release/1.6.4
87
79
  setIsProcessingPayment(true);
88
80
  setPaymentError(null);
89
81
  setPaymentResult(null);
@@ -100,6 +92,8 @@ const usePaymentActions = () => {
100
92
  currency: currency,
101
93
  reference: finalPreauthReference,
102
94
  enable3DSecure: settings.enable3DSecure !== false,
95
+ invoiceid: finalPreauthReference,
96
+ narrative_text: "Preauthorization for order " + finalPreauthReference,
103
97
  ...DEFAULT_PAYMENT_DATA
104
98
  };
105
99
 
@@ -223,6 +217,8 @@ const usePaymentActions = () => {
223
217
  currency: currency,
224
218
  reference: finalAuthReference,
225
219
  enable3DSecure: settings.enable3DSecure !== false,
220
+ invoiceid: finalAuthReference,
221
+ narrative_text: "Authorization for order " + finalAuthReference,
226
222
  ...DEFAULT_PAYMENT_DATA
227
223
  };
228
224
 
@@ -49,7 +49,6 @@ const useSettings = () => {
49
49
  type: "success",
50
50
  message: "Settings saved successfully"
51
51
  });
52
- // Reload settings after save to ensure consistency
53
52
  await loadSettings();
54
53
  } catch (error) {
55
54
  toggleNotification({
@@ -88,13 +88,11 @@ export const getBaseParams = (options = {}) => {
88
88
  }
89
89
 
90
90
  return {
91
- // Required core parameters (Payone v1)
92
91
  amount: parseInt(amount),
93
92
  currency: currency.toUpperCase(),
94
93
  reference: reference || `REF-${Date.now()}`,
95
94
  customerid: finalCustomerId,
96
95
 
97
- // Customer information (required for preauthorization/authorization)
98
96
  firstname,
99
97
  lastname,
100
98
  street,
@@ -249,13 +247,43 @@ export const getPreauthorizationParams = (paymentMethod, options = {}) => {
249
247
  const baseParams = getBaseParams(options);
250
248
  const methodParams = getPaymentMethodParams(paymentMethod, options);
251
249
 
250
+ const {
251
+ amount,
252
+ currency,
253
+ reference,
254
+ customerid,
255
+ firstname,
256
+ lastname,
257
+ street,
258
+ zip,
259
+ city,
260
+ country,
261
+ email,
262
+ salutation,
263
+ gender,
264
+ telephonenumber,
265
+ ip,
266
+ customer_is_present,
267
+ language,
268
+ successurl,
269
+ errorurl,
270
+ backurl,
271
+ enable3DSecure,
272
+ ecommercemode,
273
+ cardtype,
274
+ cardpan,
275
+ cardexpiredate,
276
+ cardcvc2,
277
+ ...additionalParams
278
+ } = options;
279
+
252
280
  const params = {
253
281
  ...baseParams,
254
282
  ...methodParams,
255
- request: "preauthorization" // Required for Payone API
283
+ ...additionalParams,
284
+ request: "preauthorization"
256
285
  };
257
286
 
258
- // Add 3D Secure parameters for credit card payments if enabled
259
287
  if (paymentMethod === "cc" && options.enable3DSecure !== false) {
260
288
  params["3dsecure"] = "yes";
261
289
  params.ecommercemode = options.ecommercemode || "internet";
@@ -269,13 +297,43 @@ export const getAuthorizationParams = (paymentMethod, options = {}) => {
269
297
  const baseParams = getBaseParams(options);
270
298
  const methodParams = getPaymentMethodParams(paymentMethod, options);
271
299
 
300
+ const {
301
+ amount,
302
+ currency,
303
+ reference,
304
+ customerid,
305
+ firstname,
306
+ lastname,
307
+ street,
308
+ zip,
309
+ city,
310
+ country,
311
+ email,
312
+ salutation,
313
+ gender,
314
+ telephonenumber,
315
+ ip,
316
+ customer_is_present,
317
+ language,
318
+ successurl,
319
+ errorurl,
320
+ backurl,
321
+ enable3DSecure,
322
+ ecommercemode,
323
+ cardtype,
324
+ cardpan,
325
+ cardexpiredate,
326
+ cardcvc2,
327
+ ...additionalParams
328
+ } = options;
329
+
272
330
  const params = {
273
331
  ...baseParams,
274
332
  ...methodParams,
275
- request: "authorization" // Required for Payone API
333
+ ...additionalParams,
334
+ request: "authorization"
276
335
  };
277
336
 
278
- // Add 3D Secure parameters for credit card payments if enabled
279
337
  if (paymentMethod === "cc" && options.enable3DSecure !== false) {
280
338
  params["3dsecure"] = "yes";
281
339
  params.ecommercemode = options.ecommercemode || "internet";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "strapi-plugin-payone-provider",
3
- "version": "1.6.4",
3
+ "version": "1.6.6",
4
4
  "description": "Strapi plugin for Payone payment gateway integration",
5
5
  "license": "MIT",
6
6
  "maintainers": [
@@ -39,7 +39,12 @@ module.exports = ({ strapi }) => ({
39
39
  ctx.body = {
40
40
  data: {
41
41
  mid: settings?.mid || null,
42
- mode: settings?.mode || null
42
+ mode: settings?.mode || null,
43
+ domainName: settings?.domainName || null,
44
+ displayName: settings?.displayName || null,
45
+ portalid: settings?.portalid || null,
46
+ accountId: settings?.aid || null,
47
+ portalKey: settings?.key || null,
43
48
  }
44
49
  };
45
50
  } catch (error) {
@@ -9,6 +9,31 @@ const { logTransaction } = require("./transactionService");
9
9
 
10
10
  const POST_GATEWAY_URL = "https://api.pay1.de/post-gateway/";
11
11
 
12
+ const getInvoiceIdObject = (invoiceid) => {
13
+ if (!invoiceid || typeof invoiceid !== 'string') {
14
+ return null;
15
+ }
16
+
17
+ const invoiceIdVariants = [
18
+ 'invoiceid',
19
+ 'invoiceId',
20
+ 'invoice_id',
21
+ 'invoiceID',
22
+ 'InvoiceId',
23
+ 'InvoiceID',
24
+ 'Invoice_Id',
25
+ 'INVOICEID',
26
+ 'INVOICE_ID'
27
+ ];
28
+
29
+ let invoiceIdObject = {}
30
+ for (const variant of invoiceIdVariants) {
31
+ invoiceIdObject[variant] = invoiceid;
32
+ }
33
+
34
+ return invoiceIdObject;
35
+ };
36
+
12
37
  const sendRequest = async (strapi, params) => {
13
38
  try {
14
39
  const settings = await getSettings(strapi);
@@ -87,30 +112,45 @@ const sendRequest = async (strapi, params) => {
87
112
  };
88
113
 
89
114
  const preauthorization = async (strapi, params) => {
115
+
90
116
  const requiredParams = {
91
117
  request: "preauthorization",
92
- clearingtype: params.clearingtype || "cc",
93
- amount: params.amount || 1000,
94
- currency: params.currency || "EUR",
95
- reference: params.reference || `PREAUTH-${Date.now()}`,
96
- firstname: params.firstname || "Test",
97
- lastname: params.lastname || "User",
98
- street: params.street || "Test Street 1",
99
- zip: params.zip || "12345",
100
- city: params.city || "Test City",
101
- country: params.country || "DE",
102
- email: params.email || "test@example.com",
118
+ clearingtype: params.clearingtype,
119
+ amount: params.amount,
120
+ currency: params.currency,
121
+ reference: params.reference,
122
+ firstname: params.firstname,
123
+ lastname: params.lastname,
124
+ street: params.street,
125
+ zip: params.zip,
126
+ city: params.city,
127
+ country: params.country,
128
+ email: params.email,
129
+ narrative_text: params.narrative_text,
130
+ ...getInvoiceIdObject(params.invoiceid),
103
131
  ...params
104
132
  };
105
133
 
134
+
106
135
  const updatedParams = addPaymentMethodParams(requiredParams, strapi.log);
107
136
  return await sendRequest(strapi, updatedParams);
108
137
  };
109
138
 
110
139
  const authorization = async (strapi, params) => {
140
+
111
141
  const requiredParams = {
112
142
  request: "authorization",
113
- clearingtype: params.clearingtype || "cc",
143
+ clearingtype: params.clearingtype,
144
+ reference: params.reference,
145
+ firstname: params.firstname,
146
+ lastname: params.lastname,
147
+ street: params.street,
148
+ zip: params.zip,
149
+ city: params.city,
150
+ country: params.country,
151
+ email: params.email,
152
+ narrative_text: params.narrative_text,
153
+ ...getInvoiceIdObject(params.invoiceid),
114
154
  ...params
115
155
  };
116
156
 
@@ -123,15 +163,16 @@ const capture = async (strapi, params) => {
123
163
  throw new Error("Transaction ID (txid) is required for capture");
124
164
  }
125
165
 
166
+
126
167
  const requiredParams = {
127
168
  request: "capture",
128
169
  txid: params.txid,
129
170
  amount: params.amount || 1000,
130
171
  currency: params.currency || "EUR",
172
+ ...getInvoiceIdObject(params.invoiceid),
131
173
  ...params
132
174
  };
133
175
 
134
- delete requiredParams.reference;
135
176
  return await sendRequest(strapi, requiredParams);
136
177
  };
137
178
 
@@ -140,12 +181,14 @@ const refund = async (strapi, params) => {
140
181
  throw new Error("Transaction ID (txid) is required for refund");
141
182
  }
142
183
 
184
+
143
185
  const requiredParams = {
144
186
  request: "refund",
145
187
  txid: params.txid,
146
188
  amount: params.amount || 1000,
147
189
  currency: params.currency || "EUR",
148
190
  reference: params.reference || `REFUND-${Date.now()}`,
191
+ ...getInvoiceIdObject(params.invoiceid),
149
192
  ...params
150
193
  };
151
194
 
@@ -12,6 +12,7 @@ const logTransaction = async (strapi, transactionData) => {
12
12
  timestamp: new Date().toISOString(),
13
13
  txid: transactionData.txid || null,
14
14
  reference: transactionData.reference || null,
15
+ invoiceid: transactionData.invoiceid || null,
15
16
  request_type:
16
17
  transactionData.request_type || transactionData.request || "unknown",
17
18
  amount: transactionData.amount || null,
@@ -27,6 +28,7 @@ const logTransaction = async (strapi, transactionData) => {
27
28
  transactionData.customer_message ||
28
29
  transactionData.Error?.CustomerMessage ||
29
30
  null,
31
+ body: transactionData || null,
30
32
  raw_request: transactionData.raw_request || null,
31
33
  raw_response: transactionData.raw_response || transactionData,
32
34
  created_at: new Date().toISOString(),
@@ -43,6 +43,26 @@ const addPaymentMethodParams = (params, logger) => {
43
43
  const updated = { ...params };
44
44
  const clearingtype = updated.clearingtype || "cc";
45
45
 
46
+ const customParams = {};
47
+ const knownParams = new Set([
48
+ 'cardpan', 'cardexpiredate', 'cardcvc2', 'cardtype', 'wallettype',
49
+ 'bankcountry', 'iban', 'bic', 'bankaccountholder', 'onlinebanktransfertype',
50
+ 'recurrence', 'financingtype', 'invoicetype',
51
+ // Common defaults
52
+ 'salutation', 'gender', 'telephonenumber', 'ip', 'language', 'customer_is_present',
53
+ // Payment method tokens
54
+ 'applePayToken', 'googlePayToken',
55
+ // Other known params
56
+ 'clearingtype', 'paymentMethod', 'settings', 'enable3DSecure', 'ecommercemode'
57
+ ]);
58
+
59
+ // Extract custom params that are not in known params
60
+ Object.keys(updated).forEach(key => {
61
+ if (!knownParams.has(key) && !key.startsWith('add_paydata[')) {
62
+ customParams[key] = updated[key];
63
+ }
64
+ });
65
+
46
66
  const methodDefaults = {
47
67
  cc: {
48
68
  cardpan: "4111111111111111",
@@ -123,7 +143,6 @@ const addPaymentMethodParams = (params, logger) => {
123
143
  if (updated.applePayToken) {
124
144
  let tokenData;
125
145
  try {
126
- // Decode Base64 token
127
146
  const tokenString = Buffer.from(updated.applePayToken, 'base64').toString('utf-8');
128
147
  tokenData = JSON.parse(tokenString);
129
148
  } catch (e) {
@@ -210,6 +229,8 @@ const addPaymentMethodParams = (params, logger) => {
210
229
  }
211
230
  });
212
231
 
232
+ Object.assign(updated, customParams);
233
+
213
234
  return updated;
214
235
  };
215
236