strapi-plugin-payone-provider 1.6.5 → 1.6.7

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.
Files changed (23) hide show
  1. package/.well-known/.gitkeep +3 -0
  2. package/.well-known/apple-developer-merchant-id-domain-association.txt +1 -0
  3. package/admin/src/pages/App/components/AppTabs.jsx +31 -16
  4. package/admin/src/pages/App/components/ApplePayBtn.jsx +63 -28
  5. package/admin/src/pages/App/components/ConfigurationPanel.jsx +189 -10
  6. package/admin/src/pages/App/components/DocsPanel.jsx +864 -194
  7. package/admin/src/pages/App/components/HistoryPanel.jsx +73 -46
  8. package/admin/src/pages/App/components/PaymentActionsPanel.jsx +8 -2
  9. package/admin/src/pages/App/components/TransactionHistoryItem.jsx +232 -87
  10. package/admin/src/pages/App/components/paymentActions/ApplePayPanel.jsx +45 -1
  11. package/admin/src/pages/App/components/paymentActions/PaymentResult.jsx +74 -30
  12. package/admin/src/pages/App/index.jsx +1 -0
  13. package/admin/src/pages/hooks/usePaymentActions.js +4 -0
  14. package/admin/src/pages/hooks/useSettings.js +26 -1
  15. package/admin/src/pages/hooks/useTransactionHistory.js +2 -3
  16. package/admin/src/pages/utils/paymentUtils.js +64 -6
  17. package/package.json +1 -1
  18. package/server/bootstrap.js +9 -3
  19. package/server/controllers/payone.js +14 -1
  20. package/server/services/applePayService.js +103 -93
  21. package/server/services/paymentService.js +56 -13
  22. package/server/services/transactionService.js +37 -14
  23. package/server/utils/paymentMethodParams.js +89 -19
package/admin/src/pages/App/components/DocsPanel.jsx CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  Stack,
9
9
  Accordion,
10
10
  AccordionToggle,
11
- AccordionContent
11
+ AccordionContent,
12
12
  } from "@strapi/design-system";
13
13
 
14
14
  const CodeBlock = ({ children }) => {
@@ -16,24 +16,31 @@ const CodeBlock = ({ children }) => {
16
16
 
17
17
  useEffect(() => {
18
18
  const checkTheme = () => {
19
- if (typeof window !== 'undefined') {
19
+ if (typeof window !== "undefined") {
20
20
  const bodyBg = window.getComputedStyle(document.body).backgroundColor;
21
21
  const rgb = bodyBg.match(/\d+/g);
22
22
  if (rgb && rgb.length >= 3) {
23
- const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
23
+ const brightness =
24
+ (parseInt(rgb[0]) * 299 +
25
+ parseInt(rgb[1]) * 587 +
26
+ parseInt(rgb[2]) * 114) /
27
+ 1000;
24
28
  setIsDark(brightness < 128);
25
29
  } else {
26
- const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
30
+ const prefersDark =
31
+ window.matchMedia &&
32
+ window.matchMedia("(prefers-color-scheme: dark)").matches;
27
33
  setIsDark(prefersDark);
28
34
  }
29
35
  }
30
36
  };
31
37
 
32
38
  checkTheme();
33
- const mediaQuery = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
39
+ const mediaQuery =
40
+ window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
34
41
  if (mediaQuery) {
35
- mediaQuery.addEventListener('change', checkTheme);
36
- return () => mediaQuery.removeEventListener('change', checkTheme);
42
+ mediaQuery.addEventListener("change", checkTheme);
43
+ return () => mediaQuery.removeEventListener("change", checkTheme);
37
44
  }
38
45
  }, []);
39
46
 
@@ -42,14 +49,16 @@ const CodeBlock = ({ children }) => {
42
49
  padding={3}
43
50
  borderRadius="4px"
44
51
  style={{
45
- backgroundColor: isDark ? '#1e1e1e' : '#f6f6f9',
46
- color: isDark ? '#d4d4d4' : '#32324d',
47
- fontFamily: 'monospace',
48
- fontSize: '14px',
49
- overflow: 'auto'
52
+ backgroundColor: isDark ? "#1e1e1e" : "#f6f6f9",
53
+ color: isDark ? "#d4d4d4" : "#32324d",
54
+ fontFamily: "monospace",
55
+ fontSize: "14px",
56
+ overflow: "auto",
50
57
  }}
51
58
  >
52
- <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
59
+ <pre
60
+ style={{ margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-word" }}
61
+ >
53
62
  {children}
54
63
  </pre>
55
64
  </Box>
@@ -65,13 +74,13 @@ const DocsPanel = () => {
65
74
  applePay: false,
66
75
  threeDSecure: false,
67
76
  captureRefund: false,
68
- testCredentials: false
77
+ testCredentials: false,
69
78
  });
70
79
 
71
80
  const toggleAccordion = (key) => {
72
- setExpandedAccordions(prev => ({
81
+ setExpandedAccordions((prev) => ({
73
82
  ...prev,
74
- [key]: !prev[key]
83
+ [key]: !prev[key],
75
84
  }));
76
85
  };
77
86
 
@@ -85,27 +94,61 @@ const DocsPanel = () => {
85
94
  >
86
95
  <Flex direction="column" alignItems="stretch" gap={6}>
87
96
  <Box>
88
- <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: '24px', marginBottom: '12px' }}>
97
+ <Typography
98
+ variant="beta"
99
+ as="h2"
100
+ fontWeight="bold"
101
+ className="payment-title"
102
+ style={{ fontSize: "24px", marginBottom: "12px" }}
103
+ >
89
104
  Payone Provider Plugin - Frontend Integration Guide
90
105
  </Typography>
91
- <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '16px' }}>
92
- Complete documentation for integrating Payone payment methods in your frontend application
106
+ <Typography
107
+ variant="pi"
108
+ textColor="neutral600"
109
+ marginTop={2}
110
+ className="payment-subtitle"
111
+ style={{ fontSize: "16px" }}
112
+ >
113
+ Complete documentation for integrating Payone payment methods in
114
+ your frontend application
93
115
  </Typography>
94
116
  </Box>
95
117
 
96
- <Accordion expanded={expandedAccordions.toc} onToggle={() => toggleAccordion('toc')}>
118
+ <Accordion
119
+ expanded={expandedAccordions.toc}
120
+ onToggle={() => toggleAccordion("toc")}
121
+ >
97
122
  <AccordionToggle title="Table of Contents" />
98
123
  <AccordionContent>
99
124
  <Stack spacing={2} padding={4}>
100
- <Typography variant="pi">1. <a href="#base-url">Base URL & Authentication</a></Typography>
101
- <Typography variant="pi">2. <a href="#payment-methods">Supported Payment Methods</a></Typography>
102
- <Typography variant="pi">3. <a href="#credit-card">Credit Card Integration</a></Typography>
103
- <Typography variant="pi">4. <a href="#paypal">PayPal Integration</a></Typography>
104
- <Typography variant="pi">5. <a href="#google-pay">Google Pay Integration</a></Typography>
105
- <Typography variant="pi">6. <a href="#apple-pay">Apple Pay Integration</a></Typography>
106
- <Typography variant="pi">7. <a href="#3d-secure">3D Secure Authentication</a></Typography>
107
- <Typography variant="pi">8. <a href="#capture-refund">Capture & Refund Operations</a></Typography>
108
- <Typography variant="pi">9. <a href="#test-credentials">Test Credentials</a></Typography>
125
+ <Typography variant="pi">
126
+ 1. <a href="#base-url">Base URL & Authentication</a>
127
+ </Typography>
128
+ <Typography variant="pi">
129
+ 2. <a href="#payment-methods">Supported Payment Methods</a>
130
+ </Typography>
131
+ <Typography variant="pi">
132
+ 3. <a href="#credit-card">Credit Card Integration</a>
133
+ </Typography>
134
+ <Typography variant="pi">
135
+ 4. <a href="#paypal">PayPal Integration</a>
136
+ </Typography>
137
+ <Typography variant="pi">
138
+ 5. <a href="#google-pay">Google Pay Integration</a>
139
+ </Typography>
140
+ <Typography variant="pi">
141
+ 6. <a href="#apple-pay">Apple Pay Integration</a>
142
+ </Typography>
143
+ <Typography variant="pi">
144
+ 7. <a href="#3d-secure">3D Secure Authentication</a>
145
+ </Typography>
146
+ <Typography variant="pi">
147
+ 8. <a href="#capture-refund">Capture & Refund Operations</a>
148
+ </Typography>
149
+ <Typography variant="pi">
150
+ 9. <a href="#test-credentials">Test Credentials</a>
151
+ </Typography>
109
152
  </Stack>
110
153
  </AccordionContent>
111
154
  </Accordion>
@@ -113,7 +156,12 @@ const DocsPanel = () => {
113
156
  <Card className="payment-card" id="base-url">
114
157
  <CardBody padding={6}>
115
158
  <Stack spacing={4}>
116
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
159
+ <Typography
160
+ variant="delta"
161
+ as="h3"
162
+ fontWeight="bold"
163
+ style={{ marginBottom: "12px" }}
164
+ >
117
165
  Base URL & Authentication
118
166
  </Typography>
119
167
  <Box>
@@ -131,7 +179,10 @@ const DocsPanel = () => {
131
179
  "Authorization": "Bearer YOUR_AUTH_TOKEN"
132
180
  }`}</CodeBlock>
133
181
  <Typography variant="pi" textColor="neutral600" marginTop={6}>
134
- <strong>Note:</strong> <code>YOUR_AUTH_TOKEN</code> is your Strapi authentication token (JWT), not a Payone token. You can get this token by logging into Strapi admin panel or using Strapi's authentication API.
182
+ <strong>Note:</strong> <code>YOUR_AUTH_TOKEN</code> is your
183
+ Strapi authentication token (JWT), not a Payone token. You can
184
+ get this token by logging into Strapi admin panel or using
185
+ Strapi's authentication API.
135
186
  </Typography>
136
187
  </Box>
137
188
  </Stack>
@@ -141,7 +192,12 @@ const DocsPanel = () => {
141
192
  <Card className="payment-card" id="payment-methods">
142
193
  <CardBody padding={6}>
143
194
  <Stack spacing={4}>
144
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
195
+ <Typography
196
+ variant="delta"
197
+ as="h3"
198
+ fontWeight="bold"
199
+ style={{ marginBottom: "12px" }}
200
+ >
145
201
  Supported Payment Methods
146
202
  </Typography>
147
203
  <Box>
@@ -149,12 +205,24 @@ const DocsPanel = () => {
149
205
  Available Payment Methods:
150
206
  </Typography>
151
207
  <Stack spacing={2}>
152
- <Typography variant="pi">• <strong>cc</strong> - Credit Card (Visa, Mastercard, Amex)</Typography>
153
- <Typography variant="pi">• <strong>wlt</strong> - PayPal</Typography>
154
- <Typography variant="pi">• <strong>gpp</strong> - Google Pay</Typography>
155
- <Typography variant="pi">• <strong>apl</strong> - Apple Pay</Typography>
156
- <Typography variant="pi">• <strong>sb</strong> - Sofort Banking</Typography>
157
- <Typography variant="pi">• <strong>elv</strong> - SEPA Direct Debit</Typography>
208
+ <Typography variant="pi">
209
+ • <strong>cc</strong> - Credit Card (Visa, Mastercard, Amex)
210
+ </Typography>
211
+ <Typography variant="pi">
212
+ • <strong>wlt</strong> - PayPal
213
+ </Typography>
214
+ <Typography variant="pi">
215
+ • <strong>gpp</strong> - Google Pay
216
+ </Typography>
217
+ <Typography variant="pi">
218
+ • <strong>apl</strong> - Apple Pay
219
+ </Typography>
220
+ <Typography variant="pi">
221
+ • <strong>sb</strong> - Sofort Banking
222
+ </Typography>
223
+ <Typography variant="pi">
224
+ • <strong>elv</strong> - SEPA Direct Debit
225
+ </Typography>
158
226
  </Stack>
159
227
  </Box>
160
228
  <Box>
@@ -162,29 +230,46 @@ const DocsPanel = () => {
162
230
  Available Card Types (for Credit Card):
163
231
  </Typography>
164
232
  <Stack spacing={2}>
165
- <Typography variant="pi">• <strong>V</strong> - Visa</Typography>
166
- <Typography variant="pi">• <strong>M</strong> - Mastercard</Typography>
167
- <Typography variant="pi">• <strong>A</strong> - American Express (Amex)</Typography>
168
- <Typography variant="pi">• <strong>D</strong> - Diners Club</Typography>
169
- <Typography variant="pi">• <strong>J</strong> - JCB</Typography>
170
- <Typography variant="pi">• <strong>C</strong> - Carte Bleue</Typography>
233
+ <Typography variant="pi">
234
+ • <strong>V</strong> - Visa
235
+ </Typography>
236
+ <Typography variant="pi">
237
+ • <strong>M</strong> - Mastercard
238
+ </Typography>
239
+ <Typography variant="pi">
240
+ • <strong>A</strong> - American Express (Amex)
241
+ </Typography>
171
242
  </Stack>
172
243
  </Box>
173
244
  </Stack>
174
245
  </CardBody>
175
246
  </Card>
176
247
 
177
- <Accordion id="credit-card" expanded={expandedAccordions.creditCard} onToggle={() => toggleAccordion('creditCard')}>
248
+ <Accordion
249
+ id="credit-card"
250
+ expanded={expandedAccordions.creditCard}
251
+ onToggle={() => toggleAccordion("creditCard")}
252
+ >
178
253
  <AccordionToggle title="Credit Card Integration" />
179
254
  <AccordionContent>
180
255
  <Card className="payment-card">
181
256
  <CardBody padding={6}>
182
257
  <Stack spacing={4}>
183
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
258
+ <Typography
259
+ variant="delta"
260
+ as="h3"
261
+ fontWeight="bold"
262
+ style={{ marginBottom: "12px" }}
263
+ >
184
264
  Credit Card Integration
185
265
  </Typography>
186
266
  <Box>
187
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
267
+ <Typography
268
+ variant="pi"
269
+ fontWeight="bold"
270
+ marginBottom={2}
271
+ style={{ marginBottom: "12px" }}
272
+ >
188
273
  Preauthorization Request:
189
274
  </Typography>
190
275
  <CodeBlock>{`POST /api/strapi-plugin-payone-provider/preauthorization
@@ -211,7 +296,12 @@ const DocsPanel = () => {
211
296
  }`}</CodeBlock>
212
297
  </Box>
213
298
  <Box>
214
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
299
+ <Typography
300
+ variant="pi"
301
+ fontWeight="bold"
302
+ marginBottom={2}
303
+ style={{ marginBottom: "12px" }}
304
+ >
215
305
  Response (Success):
216
306
  </Typography>
217
307
  <CodeBlock>{`{
@@ -223,7 +313,12 @@ const DocsPanel = () => {
223
313
  }`}</CodeBlock>
224
314
  </Box>
225
315
  <Box>
226
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
316
+ <Typography
317
+ variant="pi"
318
+ fontWeight="bold"
319
+ marginBottom={2}
320
+ style={{ marginBottom: "12px" }}
321
+ >
227
322
  Response (3D Secure Redirect):
228
323
  </Typography>
229
324
  <CodeBlock>{`{
@@ -231,13 +326,29 @@ const DocsPanel = () => {
231
326
  "redirecturl": "https://secure.pay1.de/3ds/...",
232
327
  "requires3DSRedirect": true
233
328
  }`}</CodeBlock>
234
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
235
- ⚠️ When 3D Secure is enabled, you must redirect the user to the <code>redirecturl</code> for authentication.
329
+ <Typography
330
+ variant="pi"
331
+ textColor="neutral600"
332
+ marginTop={2}
333
+ >
334
+ ⚠️ When 3D Secure is enabled, you must redirect the user
335
+ to the <code>redirecturl</code> for authentication.
236
336
  </Typography>
237
337
  </Box>
238
338
  <Box>
239
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
240
- 📚 <strong>Payone Credit Card Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Credit+Card" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Credit+Card</a>
339
+ <Typography
340
+ variant="pi"
341
+ textColor="neutral600"
342
+ marginTop={2}
343
+ >
344
+ 📚 <strong>Payone Credit Card Documentation:</strong>{" "}
345
+ <a
346
+ href="https://docs.payone.com/display/public/PLATFORM/Credit+Card"
347
+ target="_blank"
348
+ rel="noopener noreferrer"
349
+ >
350
+ https://docs.payone.com/display/public/PLATFORM/Credit+Card
351
+ </a>
241
352
  </Typography>
242
353
  </Box>
243
354
  </Stack>
@@ -246,27 +357,57 @@ const DocsPanel = () => {
246
357
  </AccordionContent>
247
358
  </Accordion>
248
359
 
249
- <Accordion id="paypal" expanded={expandedAccordions.paypal} onToggle={() => toggleAccordion('paypal')}>
360
+ <Accordion
361
+ id="paypal"
362
+ expanded={expandedAccordions.paypal}
363
+ onToggle={() => toggleAccordion("paypal")}
364
+ >
250
365
  <AccordionToggle title="PayPal Integration" />
251
366
  <AccordionContent>
252
367
  <Card className="payment-card">
253
368
  <CardBody padding={6}>
254
369
  <Stack spacing={4}>
255
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
370
+ <Typography
371
+ variant="delta"
372
+ as="h3"
373
+ fontWeight="bold"
374
+ style={{ marginBottom: "12px" }}
375
+ >
256
376
  PayPal Integration
257
377
  </Typography>
258
378
  <Box>
259
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
379
+ <Typography
380
+ variant="pi"
381
+ fontWeight="bold"
382
+ marginBottom={2}
383
+ style={{ marginBottom: "12px" }}
384
+ >
260
385
  Required Parameters:
261
386
  </Typography>
262
387
  <Stack spacing={2}>
263
- <Typography variant="pi">• <strong>clearingtype</strong>: "wlt"</Typography>
264
- <Typography variant="pi">• <strong>wallettype</strong>: "PPE" (PayPal Express)</Typography>
265
- <Typography variant="pi">• <strong>shipping_firstname</strong>, <strong>shipping_lastname</strong>, <strong>shipping_street</strong>, <strong>shipping_zip</strong>, <strong>shipping_city</strong>, <strong>shipping_country</strong> - Shipping address</Typography>
388
+ <Typography variant="pi">
389
+ • <strong>clearingtype</strong>: "wlt"
390
+ </Typography>
391
+ <Typography variant="pi">
392
+ • <strong>wallettype</strong>: "PPE" (PayPal Express)
393
+ </Typography>
394
+ <Typography variant="pi">
395
+ • <strong>shipping_firstname</strong>,{" "}
396
+ <strong>shipping_lastname</strong>,{" "}
397
+ <strong>shipping_street</strong>,{" "}
398
+ <strong>shipping_zip</strong>,{" "}
399
+ <strong>shipping_city</strong>,{" "}
400
+ <strong>shipping_country</strong> - Shipping address
401
+ </Typography>
266
402
  </Stack>
267
403
  </Box>
268
404
  <Box>
269
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
405
+ <Typography
406
+ variant="pi"
407
+ fontWeight="bold"
408
+ marginBottom={2}
409
+ style={{ marginBottom: "12px" }}
410
+ >
270
411
  Preauthorization Request:
271
412
  </Typography>
272
413
  <CodeBlock>{`POST /api/strapi-plugin-payone-provider/preauthorization
@@ -296,19 +437,34 @@ const DocsPanel = () => {
296
437
  }`}</CodeBlock>
297
438
  </Box>
298
439
  <Box>
299
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
440
+ <Typography
441
+ variant="pi"
442
+ fontWeight="bold"
443
+ marginBottom={2}
444
+ style={{ marginBottom: "12px" }}
445
+ >
300
446
  Response (Redirect to PayPal):
301
447
  </Typography>
302
448
  <CodeBlock>{`{
303
449
  "status": "REDIRECT",
304
450
  "redirecturl": "https://www.paypal.com/checkoutnow?token=..."
305
451
  }`}</CodeBlock>
306
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
307
- ⚠️ PayPal always redirects. You must redirect the user to <code>redirecturl</code> to complete the payment.
452
+ <Typography
453
+ variant="pi"
454
+ textColor="neutral600"
455
+ marginTop={2}
456
+ >
457
+ ⚠️ PayPal always redirects. You must redirect the user to{" "}
458
+ <code>redirecturl</code> to complete the payment.
308
459
  </Typography>
309
460
  </Box>
310
461
  <Box>
311
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
462
+ <Typography
463
+ variant="pi"
464
+ fontWeight="bold"
465
+ marginBottom={2}
466
+ style={{ marginBottom: "12px" }}
467
+ >
312
468
  PayPal Callback Response (after redirect):
313
469
  </Typography>
314
470
  <CodeBlock>{`{
@@ -318,8 +474,19 @@ const DocsPanel = () => {
318
474
  }`}</CodeBlock>
319
475
  </Box>
320
476
  <Box>
321
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
322
- 📚 <strong>Payone PayPal Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/PayPal" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/PayPal</a>
477
+ <Typography
478
+ variant="pi"
479
+ textColor="neutral600"
480
+ marginTop={2}
481
+ >
482
+ 📚 <strong>Payone PayPal Documentation:</strong>{" "}
483
+ <a
484
+ href="https://docs.payone.com/display/public/PLATFORM/PayPal"
485
+ target="_blank"
486
+ rel="noopener noreferrer"
487
+ >
488
+ https://docs.payone.com/display/public/PLATFORM/PayPal
489
+ </a>
323
490
  </Typography>
324
491
  </Box>
325
492
  </Stack>
@@ -328,21 +495,36 @@ const DocsPanel = () => {
328
495
  </AccordionContent>
329
496
  </Accordion>
330
497
 
331
- <Accordion id="google-pay" expanded={expandedAccordions.googlePay} onToggle={() => toggleAccordion('googlePay')}>
498
+ <Accordion
499
+ id="google-pay"
500
+ expanded={expandedAccordions.googlePay}
501
+ onToggle={() => toggleAccordion("googlePay")}
502
+ >
332
503
  <AccordionToggle title="Google Pay Integration" />
333
504
  <AccordionContent>
334
505
  <Card className="payment-card">
335
506
  <CardBody padding={6}>
336
507
  <Stack spacing={4}>
337
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
508
+ <Typography
509
+ variant="delta"
510
+ as="h3"
511
+ fontWeight="bold"
512
+ style={{ marginBottom: "12px" }}
513
+ >
338
514
  Google Pay Integration
339
515
  </Typography>
340
516
  <Box>
341
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
517
+ <Typography
518
+ variant="pi"
519
+ fontWeight="bold"
520
+ marginBottom={2}
521
+ style={{ marginBottom: "12px" }}
522
+ >
342
523
  Step 1: Configure Strapi Middleware
343
524
  </Typography>
344
525
  <Typography variant="pi" marginBottom={2}>
345
- Add Google Pay SDK to your <code>config/middlewares.js</code>:
526
+ Add Google Pay SDK to your{" "}
527
+ <code>config/middlewares.js</code>:
346
528
  </Typography>
347
529
  <CodeBlock>{`module.exports = [
348
530
  'strapi::logger',
@@ -376,13 +558,23 @@ const DocsPanel = () => {
376
558
  ];`}</CodeBlock>
377
559
  </Box>
378
560
  <Box>
379
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
561
+ <Typography
562
+ variant="pi"
563
+ fontWeight="bold"
564
+ marginBottom={2}
565
+ style={{ marginBottom: "12px" }}
566
+ >
380
567
  Step 2: Install Google Pay Button Library (Optional)
381
568
  </Typography>
382
569
  <CodeBlock>npm install @google-pay/button-react</CodeBlock>
383
570
  </Box>
384
571
  <Box>
385
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
572
+ <Typography
573
+ variant="pi"
574
+ fontWeight="bold"
575
+ marginBottom={2}
576
+ style={{ marginBottom: "12px" }}
577
+ >
386
578
  Step 3: Implement Google Pay Button (Using NPM Library)
387
579
  </Typography>
388
580
  <CodeBlock>{`import { GooglePayButton } from '@google-pay/button-react';
@@ -465,7 +657,12 @@ function PaymentForm() {
465
657
  }`}</CodeBlock>
466
658
  </Box>
467
659
  <Box>
468
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
660
+ <Typography
661
+ variant="pi"
662
+ fontWeight="bold"
663
+ marginBottom={2}
664
+ style={{ marginBottom: "12px" }}
665
+ >
469
666
  Step 4: Manual Implementation
470
667
  </Typography>
471
668
  <CodeBlock>{`// Load Google Pay SDK
@@ -519,7 +716,12 @@ paymentsClient.isReadyToPay(paymentRequest).then((response) => {
519
716
  });`}</CodeBlock>
520
717
  </Box>
521
718
  <Box>
522
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
719
+ <Typography
720
+ variant="pi"
721
+ fontWeight="bold"
722
+ marginBottom={2}
723
+ style={{ marginBottom: "12px" }}
724
+ >
523
725
  Token Parameters (Backend Request):
524
726
  </Typography>
525
727
  <CodeBlock>{`{
@@ -537,8 +739,19 @@ paymentsClient.isReadyToPay(paymentRequest).then((response) => {
537
739
  }`}</CodeBlock>
538
740
  </Box>
539
741
  <Box>
540
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
541
- 📚 <strong>Payone Google Pay Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Google+Pay" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Google+Pay</a>
742
+ <Typography
743
+ variant="pi"
744
+ textColor="neutral600"
745
+ marginTop={2}
746
+ >
747
+ 📚 <strong>Payone Google Pay Documentation:</strong>{" "}
748
+ <a
749
+ href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
750
+ target="_blank"
751
+ rel="noopener noreferrer"
752
+ >
753
+ https://docs.payone.com/display/public/PLATFORM/Google+Pay
754
+ </a>
542
755
  </Typography>
543
756
  </Box>
544
757
  </Stack>
@@ -547,29 +760,52 @@ paymentsClient.isReadyToPay(paymentRequest).then((response) => {
547
760
  </AccordionContent>
548
761
  </Accordion>
549
762
 
550
- <Accordion id="apple-pay" expanded={expandedAccordions.applePay} onToggle={() => toggleAccordion('applePay')}>
763
+ <Accordion
764
+ id="apple-pay"
765
+ expanded={expandedAccordions.applePay}
766
+ onToggle={() => toggleAccordion("applePay")}
767
+ >
551
768
  <AccordionToggle title="Apple Pay Integration" />
552
769
  <AccordionContent>
553
770
  <Card className="payment-card">
554
771
  <CardBody padding={6}>
555
772
  <Stack spacing={4}>
556
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
773
+ <Typography
774
+ variant="delta"
775
+ as="h3"
776
+ fontWeight="bold"
777
+ style={{ marginBottom: "12px" }}
778
+ >
557
779
  Apple Pay Integration
558
780
  </Typography>
559
781
  <Box>
560
- <Typography variant="pi" fontWeight="bold" marginBottom={2} textColor="danger600" style={{ marginBottom: '12px', marginRight: '6px' }}>
782
+ <Typography
783
+ variant="pi"
784
+ fontWeight="bold"
785
+ marginBottom={2}
786
+ textColor="danger600"
787
+ style={{ marginBottom: "12px", marginRight: "6px" }}
788
+ >
561
789
  ⚠️ Important: Apple Pay does NOT work on localhost
562
790
  </Typography>
563
791
  <Typography variant="pi" textColor="neutral600">
564
- Apple Pay requires a registered domain with HTTPS. For testing, use a production domain with HTTPS or test on a device with Safari (iOS/macOS).
792
+ Apple Pay requires a registered domain with HTTPS. For
793
+ testing, use a production domain with HTTPS or test on a
794
+ device with Safari (iOS/macOS).
565
795
  </Typography>
566
796
  </Box>
567
797
  <Box>
568
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
798
+ <Typography
799
+ variant="pi"
800
+ fontWeight="bold"
801
+ marginBottom={2}
802
+ style={{ marginBottom: "12px" }}
803
+ >
569
804
  Step 1: Configure Strapi Middleware
570
805
  </Typography>
571
806
  <Typography variant="pi" marginBottom={2}>
572
- Add Apple Pay SDK to your <code>config/middlewares.js</code>:
807
+ Add Apple Pay SDK to your{" "}
808
+ <code>config/middlewares.js</code>:
573
809
  </Typography>
574
810
  <CodeBlock>{`module.exports = [
575
811
  'strapi::logger',
@@ -605,34 +841,71 @@ paymentsClient.isReadyToPay(paymentRequest).then((response) => {
605
841
  ];`}</CodeBlock>
606
842
  </Box>
607
843
  <Box>
608
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
844
+ <Typography
845
+ variant="pi"
846
+ fontWeight="bold"
847
+ marginBottom={2}
848
+ style={{ marginBottom: "12px" }}
849
+ >
609
850
  Step 2: Setup .well-known File
610
851
  </Typography>
611
852
  <Typography variant="pi" marginBottom={2}>
612
- Download the Apple Pay domain verification file from Payone documentation:{" "}
853
+ Download the Apple Pay domain verification file from
854
+ Payone documentation:{" "}
613
855
  <a
614
856
  href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
615
857
  target="_blank"
616
858
  rel="noopener noreferrer"
617
- style={{ color: "#0066ff", textDecoration: "underline" }}
859
+ style={{
860
+ color: "#0066ff",
861
+ textDecoration: "underline",
862
+ }}
618
863
  >
619
864
  https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
620
- </a>
621
- {" "}or from your Payone merchant portal and place it:
865
+ </a>{" "}
866
+ or from your Payone merchant portal and place it:
622
867
  </Typography>
623
868
  <Stack spacing={2} marginBottom={2}>
624
- <Typography variant="pi"><strong>In Strapi:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code></Typography>
625
- <Typography variant="pi"><strong>In Frontend:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code></Typography>
869
+ <Typography variant="pi">
870
+ <strong>In Strapi:</strong>{" "}
871
+ <code>
872
+ public/.well-known/apple-developer-merchantid-domain-association
873
+ </code>
874
+ </Typography>
875
+ <Typography variant="pi">
876
+ <strong>In Frontend:</strong>{" "}
877
+ <code>
878
+ public/.well-known/apple-developer-merchantid-domain-association
879
+ </code>
880
+ </Typography>
626
881
  </Stack>
627
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
628
- The file must be accessible at: <code>https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association</code>
882
+ <Typography
883
+ variant="pi"
884
+ textColor="neutral600"
885
+ marginTop={2}
886
+ >
887
+ The file must be accessible at:{" "}
888
+ <code>
889
+ https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
890
+ </code>
629
891
  </Typography>
630
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
631
- <strong>Alternative Download:</strong> Log into your Payone Merchant Interface (PMI) → Configuration → Payment Portals → Apple Pay → Download domain verification file
892
+ <Typography
893
+ variant="pi"
894
+ textColor="neutral600"
895
+ marginTop={2}
896
+ >
897
+ <strong>Alternative Download:</strong> Log into your
898
+ Payone Merchant Interface (PMI) → Configuration → Payment
899
+ Portals → Apple Pay → Download domain verification file
632
900
  </Typography>
633
901
  </Box>
634
902
  <Box>
635
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
903
+ <Typography
904
+ variant="pi"
905
+ fontWeight="bold"
906
+ marginBottom={2}
907
+ style={{ marginBottom: "12px" }}
908
+ >
636
909
  Step 3: Implement Apple Pay Button
637
910
  </Typography>
638
911
  <CodeBlock>{`// Load Apple Pay SDK
@@ -729,7 +1002,12 @@ if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
729
1002
  }`}</CodeBlock>
730
1003
  </Box>
731
1004
  <Box>
732
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1005
+ <Typography
1006
+ variant="pi"
1007
+ fontWeight="bold"
1008
+ marginBottom={2}
1009
+ style={{ marginBottom: "12px" }}
1010
+ >
733
1011
  Token Parameters (Backend Request):
734
1012
  </Typography>
735
1013
  <CodeBlock>{`{
@@ -747,8 +1025,19 @@ if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
747
1025
  }`}</CodeBlock>
748
1026
  </Box>
749
1027
  <Box>
750
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
751
- 📚 <strong>Payone Apple Pay Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Apple+Pay</a>
1028
+ <Typography
1029
+ variant="pi"
1030
+ textColor="neutral600"
1031
+ marginTop={2}
1032
+ >
1033
+ 📚 <strong>Payone Apple Pay Documentation:</strong>{" "}
1034
+ <a
1035
+ href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay"
1036
+ target="_blank"
1037
+ rel="noopener noreferrer"
1038
+ >
1039
+ https://docs.payone.com/display/public/PLATFORM/Apple+Pay
1040
+ </a>
752
1041
  </Typography>
753
1042
  </Box>
754
1043
  </Stack>
@@ -757,61 +1046,156 @@ if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
757
1046
  </AccordionContent>
758
1047
  </Accordion>
759
1048
 
760
- <Accordion id="3d-secure" expanded={expandedAccordions.threeDSecure} onToggle={() => toggleAccordion('threeDSecure')}>
1049
+ <Accordion
1050
+ id="3d-secure"
1051
+ expanded={expandedAccordions.threeDSecure}
1052
+ onToggle={() => toggleAccordion("threeDSecure")}
1053
+ >
761
1054
  <AccordionToggle title="3D Secure Authentication" />
762
1055
  <AccordionContent>
763
1056
  <Card className="payment-card">
764
1057
  <CardBody padding={6}>
765
1058
  <Stack spacing={4}>
766
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
1059
+ <Typography
1060
+ variant="delta"
1061
+ as="h3"
1062
+ fontWeight="bold"
1063
+ style={{ marginBottom: "12px" }}
1064
+ >
767
1065
  3D Secure Authentication
768
1066
  </Typography>
769
1067
  <Box>
770
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1068
+ <Typography
1069
+ variant="pi"
1070
+ fontWeight="bold"
1071
+ marginBottom={2}
1072
+ style={{ marginBottom: "12px" }}
1073
+ >
771
1074
  How 3D Secure Works:
772
1075
  </Typography>
773
1076
  <Stack spacing={2}>
774
- <Typography variant="pi">1. Enable 3D Secure in Strapi admin panel (Configuration tab)</Typography>
775
- <Typography variant="pi">2. Make a credit card payment request</Typography>
776
- <Typography variant="pi">3. If 3DS is required, you'll receive a <code>redirecturl</code> in the response</Typography>
777
- <Typography variant="pi">4. Redirect the user to the <code>redirecturl</code> for authentication</Typography>
778
- <Typography variant="pi">5. User enters password/confirms with bank</Typography>
779
- <Typography variant="pi">6. User is redirected back to your <code>successurl</code>, <code>errorurl</code>, or <code>backurl</code></Typography>
780
- <Typography variant="pi">7. Handle the callback and check transaction status</Typography>
1077
+ <Typography variant="pi">
1078
+ 1. Enable 3D Secure in Strapi admin panel (Configuration
1079
+ tab)
1080
+ </Typography>
1081
+ <Typography variant="pi">
1082
+ 2. Make a credit card payment request
1083
+ </Typography>
1084
+ <Typography variant="pi">
1085
+ 3. If 3DS is required, you'll receive a{" "}
1086
+ <code>redirecturl</code> in the response
1087
+ </Typography>
1088
+ <Typography variant="pi">
1089
+ 4. Redirect the user to the <code>redirecturl</code> for
1090
+ authentication
1091
+ </Typography>
1092
+ <Typography variant="pi">
1093
+ 5. User enters password/confirms with bank
1094
+ </Typography>
1095
+ <Typography variant="pi">
1096
+ 6. User is redirected back to your{" "}
1097
+ <code>successurl</code>, <code>errorurl</code>, or{" "}
1098
+ <code>backurl</code>
1099
+ </Typography>
1100
+ <Typography variant="pi">
1101
+ 7. Handle the callback and check transaction status
1102
+ </Typography>
781
1103
  </Stack>
782
1104
  </Box>
783
1105
  <Box>
784
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1106
+ <Typography
1107
+ variant="pi"
1108
+ fontWeight="bold"
1109
+ marginBottom={2}
1110
+ style={{ marginBottom: "12px" }}
1111
+ >
785
1112
  Special 3D Secure Test Cards (from Payone Documentation):
786
1113
  </Typography>
787
1114
  <Stack spacing={2}>
788
- <Typography variant="pi">• <strong>Visa 3DS Test Card:</strong> 4000000000000002</Typography>
789
- <Typography variant="pi">• <strong>Mastercard 3DS Test Card:</strong> 5453010000059543</Typography>
790
- <Typography variant="pi">• <strong>Expiry:</strong> Any future date (e.g., 12/25 = "2512")</Typography>
791
- <Typography variant="pi">• <strong>CVC:</strong> Any 3 digits (e.g., 123)</Typography>
792
- <Typography variant="pi">• <strong>3DS Password:</strong> Usually "123456" or as provided by Payone (check your Payone test documentation)</Typography>
1115
+ <Typography variant="pi">
1116
+ • <strong>Visa 3DS Test Card:</strong> 4000000000000002
1117
+ </Typography>
1118
+ <Typography variant="pi">
1119
+ • <strong>Mastercard 3DS Test Card:</strong>{" "}
1120
+ 5453010000059543
1121
+ </Typography>
1122
+ <Typography variant="pi">
1123
+ • <strong>Expiry:</strong> Any future date (e.g., 12/25
1124
+ = "2512")
1125
+ </Typography>
1126
+ <Typography variant="pi">
1127
+ • <strong>CVC:</strong> Any 3 digits (e.g., 123)
1128
+ </Typography>
1129
+ <Typography variant="pi">
1130
+ • <strong>3DS Password:</strong> Usually "123456" or as
1131
+ provided by Payone (check your Payone test
1132
+ documentation)
1133
+ </Typography>
793
1134
  </Stack>
794
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
795
- 📚 <strong>Payone 3D Secure Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/3D+Secure" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/3D+Secure</a>
1135
+ <Typography
1136
+ variant="pi"
1137
+ textColor="neutral600"
1138
+ marginTop={2}
1139
+ >
1140
+ 📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
1141
+ <a
1142
+ href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
1143
+ target="_blank"
1144
+ rel="noopener noreferrer"
1145
+ >
1146
+ https://docs.payone.com/display/public/PLATFORM/3D+Secure
1147
+ </a>
796
1148
  </Typography>
797
1149
  </Box>
798
1150
  <Box>
799
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1151
+ <Typography
1152
+ variant="pi"
1153
+ fontWeight="bold"
1154
+ marginBottom={2}
1155
+ style={{ marginBottom: "12px" }}
1156
+ >
800
1157
  Standard Credit Card Test Cards (without 3DS):
801
1158
  </Typography>
802
1159
  <Stack spacing={2}>
803
- <Typography variant="pi">• <strong>Visa:</strong> 4111111111111111</Typography>
804
- <Typography variant="pi">• <strong>Mastercard:</strong> 5555555555554444</Typography>
805
- <Typography variant="pi">• <strong>Amex:</strong> 378282246310005</Typography>
806
- <Typography variant="pi">• <strong>Expiry:</strong> Any future date (e.g., 12/25 = "2512")</Typography>
807
- <Typography variant="pi">• <strong>CVC:</strong> Any 3 digits (4 digits for Amex)</Typography>
1160
+ <Typography variant="pi">
1161
+ • <strong>Visa:</strong> 4111111111111111
1162
+ </Typography>
1163
+ <Typography variant="pi">
1164
+ • <strong>Mastercard:</strong> 5555555555554444
1165
+ </Typography>
1166
+ <Typography variant="pi">
1167
+ • <strong>Amex:</strong> 378282246310005
1168
+ </Typography>
1169
+ <Typography variant="pi">
1170
+ • <strong>Expiry:</strong> Any future date (e.g., 12/25
1171
+ = "2512")
1172
+ </Typography>
1173
+ <Typography variant="pi">
1174
+ • <strong>CVC:</strong> Any 3 digits (4 digits for Amex)
1175
+ </Typography>
808
1176
  </Stack>
809
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
810
- 📚 <strong>Payone Test Cards Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards</a>
1177
+ <Typography
1178
+ variant="pi"
1179
+ textColor="neutral600"
1180
+ marginTop={2}
1181
+ >
1182
+ 📚 <strong>Payone Test Cards Documentation:</strong>{" "}
1183
+ <a
1184
+ href="https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards"
1185
+ target="_blank"
1186
+ rel="noopener noreferrer"
1187
+ >
1188
+ https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards
1189
+ </a>
811
1190
  </Typography>
812
1191
  </Box>
813
1192
  <Box>
814
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1193
+ <Typography
1194
+ variant="pi"
1195
+ fontWeight="bold"
1196
+ marginBottom={2}
1197
+ style={{ marginBottom: "12px" }}
1198
+ >
815
1199
  Example Flow:
816
1200
  </Typography>
817
1201
  <CodeBlock>{`// 1. Make payment request
@@ -844,8 +1228,19 @@ if (result.status === 'REDIRECT' && result.redirecturl) {
844
1228
  // The callback will include transaction status and txid`}</CodeBlock>
845
1229
  </Box>
846
1230
  <Box>
847
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
848
- 📚 <strong>Payone 3D Secure Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/3D+Secure" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/3D+Secure</a>
1231
+ <Typography
1232
+ variant="pi"
1233
+ textColor="neutral600"
1234
+ marginTop={2}
1235
+ >
1236
+ 📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
1237
+ <a
1238
+ href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
1239
+ target="_blank"
1240
+ rel="noopener noreferrer"
1241
+ >
1242
+ https://docs.payone.com/display/public/PLATFORM/3D+Secure
1243
+ </a>
849
1244
  </Typography>
850
1245
  </Box>
851
1246
  </Stack>
@@ -854,17 +1249,31 @@ if (result.status === 'REDIRECT' && result.redirecturl) {
854
1249
  </AccordionContent>
855
1250
  </Accordion>
856
1251
 
857
- <Accordion id="capture-refund" expanded={expandedAccordions.captureRefund} onToggle={() => toggleAccordion('captureRefund')}>
1252
+ <Accordion
1253
+ id="capture-refund"
1254
+ expanded={expandedAccordions.captureRefund}
1255
+ onToggle={() => toggleAccordion("captureRefund")}
1256
+ >
858
1257
  <AccordionToggle title="Capture & Refund Operations" />
859
1258
  <AccordionContent>
860
1259
  <Card className="payment-card">
861
1260
  <CardBody padding={6}>
862
1261
  <Stack spacing={4}>
863
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
1262
+ <Typography
1263
+ variant="delta"
1264
+ as="h3"
1265
+ fontWeight="bold"
1266
+ style={{ marginBottom: "12px" }}
1267
+ >
864
1268
  Capture & Refund Operations
865
1269
  </Typography>
866
1270
  <Box>
867
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1271
+ <Typography
1272
+ variant="pi"
1273
+ fontWeight="bold"
1274
+ marginBottom={2}
1275
+ style={{ marginBottom: "12px" }}
1276
+ >
868
1277
  Capture (Complete Preauthorized Transaction):
869
1278
  </Typography>
870
1279
  <CodeBlock>{`POST /api/strapi-plugin-payone-provider/capture
@@ -877,12 +1286,23 @@ if (result.status === 'REDIRECT' && result.redirecturl) {
877
1286
  "sequencenumber": 1,
878
1287
  "capturemode": "full" // For wallet payments: "full" or "partial"
879
1288
  }`}</CodeBlock>
880
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
881
- <strong>Note:</strong> <code>capturemode</code> is only required for wallet payments (PayPal, Google Pay, Apple Pay).
1289
+ <Typography
1290
+ variant="pi"
1291
+ textColor="neutral600"
1292
+ marginTop={2}
1293
+ >
1294
+ <strong>Note:</strong> <code>capturemode</code> is only
1295
+ required for wallet payments (PayPal, Google Pay, Apple
1296
+ Pay).
882
1297
  </Typography>
883
1298
  </Box>
884
1299
  <Box>
885
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1300
+ <Typography
1301
+ variant="pi"
1302
+ fontWeight="bold"
1303
+ marginBottom={2}
1304
+ style={{ marginBottom: "12px" }}
1305
+ >
886
1306
  Refund (Return Funds):
887
1307
  </Typography>
888
1308
  <CodeBlock>{`POST /api/strapi-plugin-payone-provider/refund
@@ -894,28 +1314,70 @@ if (result.status === 'REDIRECT' && result.redirecturl) {
894
1314
  "reference": "REFUND-00123-ABCD",
895
1315
  "sequencenumber": 2
896
1316
  }`}</CodeBlock>
897
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
898
- <strong>Note:</strong> Refund amount must be negative. <code>sequencenumber</code> should be incremented for each operation on the same transaction.
1317
+ <Typography
1318
+ variant="pi"
1319
+ textColor="neutral600"
1320
+ marginTop={2}
1321
+ >
1322
+ <strong>Note:</strong> Refund amount must be negative.{" "}
1323
+ <code>sequencenumber</code> should be incremented for each
1324
+ operation on the same transaction.
899
1325
  </Typography>
900
1326
  </Box>
901
1327
  <Box>
902
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1328
+ <Typography
1329
+ variant="pi"
1330
+ fontWeight="bold"
1331
+ marginBottom={2}
1332
+ style={{ marginBottom: "12px" }}
1333
+ >
903
1334
  Sequence Numbers:
904
1335
  </Typography>
905
1336
  <Stack spacing={2}>
906
- <Typography variant="pi">• <strong>Preauthorization:</strong> sequencenumber = 0 (default)</Typography>
907
- <Typography variant="pi">• <strong>Capture:</strong> sequencenumber = 1 (first capture)</Typography>
908
- <Typography variant="pi">• <strong>Refund:</strong> sequencenumber = 2 (first refund), 3 (second refund), etc.</Typography>
1337
+ <Typography variant="pi">
1338
+ • <strong>Preauthorization:</strong> sequencenumber = 0
1339
+ (default)
1340
+ </Typography>
1341
+ <Typography variant="pi">
1342
+ • <strong>Capture:</strong> sequencenumber = 1 (first
1343
+ capture)
1344
+ </Typography>
1345
+ <Typography variant="pi">
1346
+ • <strong>Refund:</strong> sequencenumber = 2 (first
1347
+ refund), 3 (second refund), etc.
1348
+ </Typography>
909
1349
  </Stack>
910
1350
  </Box>
911
1351
  <Box>
912
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
913
- 📚 <strong>Payone Capture Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Capture" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Capture</a>
1352
+ <Typography
1353
+ variant="pi"
1354
+ textColor="neutral600"
1355
+ marginTop={2}
1356
+ >
1357
+ 📚 <strong>Payone Capture Documentation:</strong>{" "}
1358
+ <a
1359
+ href="https://docs.payone.com/display/public/PLATFORM/Capture"
1360
+ target="_blank"
1361
+ rel="noopener noreferrer"
1362
+ >
1363
+ https://docs.payone.com/display/public/PLATFORM/Capture
1364
+ </a>
914
1365
  </Typography>
915
1366
  </Box>
916
1367
  <Box>
917
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
918
- 📚 <strong>Payone Refund Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Refund" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Refund</a>
1368
+ <Typography
1369
+ variant="pi"
1370
+ textColor="neutral600"
1371
+ marginTop={2}
1372
+ >
1373
+ 📚 <strong>Payone Refund Documentation:</strong>{" "}
1374
+ <a
1375
+ href="https://docs.payone.com/display/public/PLATFORM/Refund"
1376
+ target="_blank"
1377
+ rel="noopener noreferrer"
1378
+ >
1379
+ https://docs.payone.com/display/public/PLATFORM/Refund
1380
+ </a>
919
1381
  </Typography>
920
1382
  </Box>
921
1383
  </Stack>
@@ -924,117 +1386,324 @@ if (result.status === 'REDIRECT' && result.redirecturl) {
924
1386
  </AccordionContent>
925
1387
  </Accordion>
926
1388
 
927
- <Accordion id="test-credentials" expanded={expandedAccordions.testCredentials} onToggle={() => toggleAccordion('testCredentials')}>
1389
+ <Accordion
1390
+ id="test-credentials"
1391
+ expanded={expandedAccordions.testCredentials}
1392
+ onToggle={() => toggleAccordion("testCredentials")}
1393
+ >
928
1394
  <AccordionToggle title="Test Credentials" />
929
1395
  <AccordionContent>
930
1396
  <Card className="payment-card">
931
1397
  <CardBody padding={6}>
932
1398
  <Stack spacing={4}>
933
- <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: '12px' }}>
1399
+ <Typography
1400
+ variant="delta"
1401
+ as="h3"
1402
+ fontWeight="bold"
1403
+ style={{ marginBottom: "12px" }}
1404
+ >
934
1405
  Test Credentials
935
1406
  </Typography>
936
1407
  <Box>
937
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1408
+ <Typography
1409
+ variant="pi"
1410
+ fontWeight="bold"
1411
+ marginBottom={2}
1412
+ style={{ marginBottom: "12px" }}
1413
+ >
938
1414
  Credit Card Test Cards (Standard):
939
1415
  </Typography>
940
1416
  <Stack spacing={2}>
941
- <Typography variant="pi">• <strong>Visa:</strong> 4111111111111111</Typography>
942
- <Typography variant="pi">• <strong>Mastercard:</strong> 5555555555554444</Typography>
943
- <Typography variant="pi">• <strong>Amex:</strong> 378282246310005</Typography>
944
- <Typography variant="pi">• <strong>Expiry:</strong> Any future date (e.g., 12/25 = "2512")</Typography>
945
- <Typography variant="pi">• <strong>CVC:</strong> Any 3 digits (4 digits for Amex)</Typography>
1417
+ <Typography variant="pi">
1418
+ • <strong>Visa:</strong> 4111111111111111
1419
+ </Typography>
1420
+ <Typography variant="pi">
1421
+ • <strong>Mastercard:</strong> 5555555555554444
1422
+ </Typography>
1423
+ <Typography variant="pi">
1424
+ • <strong>Amex:</strong> 378282246310005
1425
+ </Typography>
1426
+ <Typography variant="pi">
1427
+ • <strong>Expiry:</strong> Any future date (e.g., 12/25
1428
+ = "2512")
1429
+ </Typography>
1430
+ <Typography variant="pi">
1431
+ • <strong>CVC:</strong> Any 3 digits (4 digits for Amex)
1432
+ </Typography>
946
1433
  </Stack>
947
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
948
- 📚 <strong>Payone Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data</a>
1434
+ <Typography
1435
+ variant="pi"
1436
+ textColor="neutral600"
1437
+ marginTop={2}
1438
+ >
1439
+ 📚 <strong>Payone Documentation:</strong>{" "}
1440
+ <a
1441
+ href="https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data"
1442
+ target="_blank"
1443
+ rel="noopener noreferrer"
1444
+ >
1445
+ https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data
1446
+ </a>
949
1447
  </Typography>
950
1448
  </Box>
951
1449
  <Box>
952
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1450
+ <Typography
1451
+ variant="pi"
1452
+ fontWeight="bold"
1453
+ marginBottom={2}
1454
+ style={{ marginBottom: "12px" }}
1455
+ >
953
1456
  3D Secure Test Cards (Special Test Data):
954
1457
  </Typography>
955
1458
  <Stack spacing={2}>
956
- <Typography variant="pi">• <strong>Visa 3DS Test Card:</strong> 4000000000000002</Typography>
957
- <Typography variant="pi">• <strong>Mastercard 3DS Test Card:</strong> 5453010000059543</Typography>
958
- <Typography variant="pi">• <strong>3DS Password:</strong> Usually "123456" or as provided by Payone</Typography>
959
- <Typography variant="pi">• <strong>Expiry:</strong> Any future date (e.g., 12/25 = "2512")</Typography>
960
- <Typography variant="pi">• <strong>CVC:</strong> Any 3 digits</Typography>
1459
+ <Typography variant="pi">
1460
+ • <strong>Visa 3DS Test Card:</strong> 4000000000000002
1461
+ </Typography>
1462
+ <Typography variant="pi">
1463
+ • <strong>Mastercard 3DS Test Card:</strong>{" "}
1464
+ 5453010000059543
1465
+ </Typography>
1466
+ <Typography variant="pi">
1467
+ • <strong>3DS Password:</strong> Usually "123456" or as
1468
+ provided by Payone
1469
+ </Typography>
1470
+ <Typography variant="pi">
1471
+ • <strong>Expiry:</strong> Any future date (e.g., 12/25
1472
+ = "2512")
1473
+ </Typography>
1474
+ <Typography variant="pi">
1475
+ • <strong>CVC:</strong> Any 3 digits
1476
+ </Typography>
961
1477
  </Stack>
962
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
963
- 📚 <strong>Payone 3D Secure Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/3D+Secure" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/3D+Secure</a>
1478
+ <Typography
1479
+ variant="pi"
1480
+ textColor="neutral600"
1481
+ marginTop={2}
1482
+ >
1483
+ 📚 <strong>Payone 3D Secure Documentation:</strong>{" "}
1484
+ <a
1485
+ href="https://docs.payone.com/display/public/PLATFORM/3D+Secure"
1486
+ target="_blank"
1487
+ rel="noopener noreferrer"
1488
+ >
1489
+ https://docs.payone.com/display/public/PLATFORM/3D+Secure
1490
+ </a>
964
1491
  </Typography>
965
1492
  </Box>
966
1493
  <Box>
967
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1494
+ <Typography
1495
+ variant="pi"
1496
+ fontWeight="bold"
1497
+ marginBottom={2}
1498
+ style={{ marginBottom: "12px" }}
1499
+ >
968
1500
  PayPal Test Data:
969
1501
  </Typography>
970
1502
  <Stack spacing={2}>
971
- <Typography variant="pi">• Use PayPal Sandbox test accounts</Typography>
972
- <Typography variant="pi">• Create test accounts in PayPal Developer Dashboard</Typography>
973
- <Typography variant="pi">• Test with both buyer and merchant sandbox accounts</Typography>
1503
+ <Typography variant="pi">
1504
+ • Use PayPal Sandbox test accounts
1505
+ </Typography>
1506
+ <Typography variant="pi">
1507
+ • Create test accounts in PayPal Developer Dashboard
1508
+ </Typography>
1509
+ <Typography variant="pi">
1510
+ • Test with both buyer and merchant sandbox accounts
1511
+ </Typography>
974
1512
  </Stack>
975
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
976
- 📚 <strong>Payone PayPal Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/PayPal" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/PayPal</a>
1513
+ <Typography
1514
+ variant="pi"
1515
+ textColor="neutral600"
1516
+ marginTop={2}
1517
+ >
1518
+ 📚 <strong>Payone PayPal Documentation:</strong>{" "}
1519
+ <a
1520
+ href="https://docs.payone.com/display/public/PLATFORM/PayPal"
1521
+ target="_blank"
1522
+ rel="noopener noreferrer"
1523
+ >
1524
+ https://docs.payone.com/display/public/PLATFORM/PayPal
1525
+ </a>
977
1526
  </Typography>
978
1527
  </Box>
979
1528
  <Box>
980
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1529
+ <Typography
1530
+ variant="pi"
1531
+ fontWeight="bold"
1532
+ marginBottom={2}
1533
+ style={{ marginBottom: "12px" }}
1534
+ >
981
1535
  Google Pay Test Data:
982
1536
  </Typography>
983
1537
  <Stack spacing={2}>
984
- <Typography variant="pi">• Use Google Pay test environment</Typography>
985
- <Typography variant="pi">• Test cards are automatically provided by Google Pay SDK</Typography>
986
- <Typography variant="pi">• Set <code>environment: 'TEST'</code> in Google Pay configuration</Typography>
1538
+ <Typography variant="pi">
1539
+ • Use Google Pay test environment
1540
+ </Typography>
1541
+ <Typography variant="pi">
1542
+ • Test cards are automatically provided by Google Pay
1543
+ SDK
1544
+ </Typography>
1545
+ <Typography variant="pi">
1546
+ • Set <code>environment: 'TEST'</code> in Google Pay
1547
+ configuration
1548
+ </Typography>
987
1549
  </Stack>
988
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
989
- 📚 <strong>Payone Google Pay Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Google+Pay" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Google+Pay</a>
1550
+ <Typography
1551
+ variant="pi"
1552
+ textColor="neutral600"
1553
+ marginTop={2}
1554
+ >
1555
+ 📚 <strong>Payone Google Pay Documentation:</strong>{" "}
1556
+ <a
1557
+ href="https://docs.payone.com/display/public/PLATFORM/Google+Pay"
1558
+ target="_blank"
1559
+ rel="noopener noreferrer"
1560
+ >
1561
+ https://docs.payone.com/display/public/PLATFORM/Google+Pay
1562
+ </a>
990
1563
  </Typography>
991
1564
  </Box>
992
1565
  <Box>
993
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1566
+ <Typography
1567
+ variant="pi"
1568
+ fontWeight="bold"
1569
+ marginBottom={2}
1570
+ style={{ marginBottom: "12px" }}
1571
+ >
994
1572
  Apple Pay Test Data:
995
1573
  </Typography>
996
1574
  <Stack spacing={2}>
997
- <Typography variant="pi">• Use Apple Pay test environment</Typography>
998
- <Typography variant="pi">• Test cards are available in Wallet app on test devices</Typography>
999
- <Typography variant="pi">• Requires registered domain with HTTPS (not localhost)</Typography>
1575
+ <Typography variant="pi">
1576
+ • Use Apple Pay test environment
1577
+ </Typography>
1578
+ <Typography variant="pi">
1579
+ • Test cards are available in Wallet app on test devices
1580
+ </Typography>
1581
+ <Typography variant="pi">
1582
+ • Requires registered domain with HTTPS (not localhost)
1583
+ </Typography>
1000
1584
  </Stack>
1001
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
1002
- 📚 <strong>Payone Apple Pay Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Apple+Pay</a>
1585
+ <Typography
1586
+ variant="pi"
1587
+ textColor="neutral600"
1588
+ marginTop={2}
1589
+ >
1590
+ 📚 <strong>Payone Apple Pay Documentation:</strong>{" "}
1591
+ <a
1592
+ href="https://docs.payone.com/display/public/PLATFORM/Apple+Pay"
1593
+ target="_blank"
1594
+ rel="noopener noreferrer"
1595
+ >
1596
+ https://docs.payone.com/display/public/PLATFORM/Apple+Pay
1597
+ </a>
1003
1598
  </Typography>
1004
1599
  </Box>
1005
1600
  <Box>
1006
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1601
+ <Typography
1602
+ variant="pi"
1603
+ fontWeight="bold"
1604
+ marginBottom={2}
1605
+ style={{ marginBottom: "12px" }}
1606
+ >
1007
1607
  Sofort Banking Test Data:
1008
1608
  </Typography>
1009
1609
  <Stack spacing={2}>
1010
- <Typography variant="pi">• Use Sofort test environment</Typography>
1011
- <Typography variant="pi">• Test credentials provided by Payone</Typography>
1610
+ <Typography variant="pi">
1611
+ • Use Sofort test environment
1612
+ </Typography>
1613
+ <Typography variant="pi">
1614
+ • Test credentials provided by Payone
1615
+ </Typography>
1012
1616
  </Stack>
1013
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
1014
- 📚 <strong>Payone Sofort Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Sofort" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Sofort</a>
1617
+ <Typography
1618
+ variant="pi"
1619
+ textColor="neutral600"
1620
+ marginTop={2}
1621
+ >
1622
+ 📚 <strong>Payone Sofort Documentation:</strong>{" "}
1623
+ <a
1624
+ href="https://docs.payone.com/display/public/PLATFORM/Sofort"
1625
+ target="_blank"
1626
+ rel="noopener noreferrer"
1627
+ >
1628
+ https://docs.payone.com/display/public/PLATFORM/Sofort
1629
+ </a>
1015
1630
  </Typography>
1016
1631
  </Box>
1017
1632
  <Box>
1018
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1633
+ <Typography
1634
+ variant="pi"
1635
+ fontWeight="bold"
1636
+ marginBottom={2}
1637
+ style={{ marginBottom: "12px" }}
1638
+ >
1019
1639
  SEPA Direct Debit Test Data:
1020
1640
  </Typography>
1021
1641
  <Stack spacing={2}>
1022
- <Typography variant="pi">• <strong>Test IBAN:</strong> DE89370400440532013000</Typography>
1023
- <Typography variant="pi">• <strong>Test BIC:</strong> COBADEFFXXX</Typography>
1024
- <Typography variant="pi">• <strong>Account Holder:</strong> Any test name</Typography>
1642
+ <Typography variant="pi">
1643
+ • <strong>Test IBAN:</strong> DE89370400440532013000
1644
+ </Typography>
1645
+ <Typography variant="pi">
1646
+ • <strong>Test BIC:</strong> COBADEFFXXX
1647
+ </Typography>
1648
+ <Typography variant="pi">
1649
+ • <strong>Account Holder:</strong> Any test name
1650
+ </Typography>
1025
1651
  </Stack>
1026
- <Typography variant="pi" textColor="neutral600" marginTop={2}>
1027
- 📚 <strong>Payone SEPA Documentation:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/SEPA+Direct+Debit" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/SEPA+Direct+Debit</a>
1652
+ <Typography
1653
+ variant="pi"
1654
+ textColor="neutral600"
1655
+ marginTop={2}
1656
+ >
1657
+ 📚 <strong>Payone SEPA Documentation:</strong>{" "}
1658
+ <a
1659
+ href="https://docs.payone.com/display/public/PLATFORM/SEPA+Direct+Debit"
1660
+ target="_blank"
1661
+ rel="noopener noreferrer"
1662
+ >
1663
+ https://docs.payone.com/display/public/PLATFORM/SEPA+Direct+Debit
1664
+ </a>
1028
1665
  </Typography>
1029
1666
  </Box>
1030
1667
  <Box>
1031
- <Typography variant="pi" fontWeight="bold" marginBottom={2} style={{ marginBottom: '12px' }}>
1668
+ <Typography
1669
+ variant="pi"
1670
+ fontWeight="bold"
1671
+ marginBottom={2}
1672
+ style={{ marginBottom: "12px" }}
1673
+ >
1032
1674
  General Test Data Resources:
1033
1675
  </Typography>
1034
1676
  <Stack spacing={2}>
1035
- <Typography variant="pi">📚 <strong>Payone Test Data Overview:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data</a></Typography>
1036
- <Typography variant="pi">📚 <strong>Payone Test Cards:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards</a></Typography>
1037
- <Typography variant="pi">📚 <strong>Payone Test Environment:</strong> <a href="https://docs.payone.com/display/public/PLATFORM/Test+Environment" target="_blank" rel="noopener noreferrer">https://docs.payone.com/display/public/PLATFORM/Test+Environment</a></Typography>
1677
+ <Typography variant="pi">
1678
+ 📚 <strong>Payone Test Data Overview:</strong>{" "}
1679
+ <a
1680
+ href="https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data"
1681
+ target="_blank"
1682
+ rel="noopener noreferrer"
1683
+ >
1684
+ https://docs.payone.com/display/public/PLATFORM/Test+and+Live+Data
1685
+ </a>
1686
+ </Typography>
1687
+ <Typography variant="pi">
1688
+ 📚 <strong>Payone Test Cards:</strong>{" "}
1689
+ <a
1690
+ href="https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards"
1691
+ target="_blank"
1692
+ rel="noopener noreferrer"
1693
+ >
1694
+ https://docs.payone.com/display/public/PLATFORM/Credit+Card+Test+Cards
1695
+ </a>
1696
+ </Typography>
1697
+ <Typography variant="pi">
1698
+ 📚 <strong>Payone Test Environment:</strong>{" "}
1699
+ <a
1700
+ href="https://docs.payone.com/display/public/PLATFORM/Test+Environment"
1701
+ target="_blank"
1702
+ rel="noopener noreferrer"
1703
+ >
1704
+ https://docs.payone.com/display/public/PLATFORM/Test+Environment
1705
+ </a>
1706
+ </Typography>
1038
1707
  </Stack>
1039
1708
  </Box>
1040
1709
  </Stack>
@@ -1045,7 +1714,8 @@ if (result.status === 'REDIRECT' && result.redirecturl) {
1045
1714
 
1046
1715
  <Box paddingTop={4}>
1047
1716
  <Typography variant="sigma" textColor="neutral600">
1048
- For more information, visit the Payone documentation or contact your Payone account manager.
1717
+ For more information, visit the Payone documentation or contact your
1718
+ Payone account manager.
1049
1719
  </Typography>
1050
1720
  </Box>
1051
1721
  </Flex>