strapi5-plugin-for-stripe 1.0.0 → 1.0.1

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.
@@ -0,0 +1,564 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const admin = require("@strapi/strapi/admin");
5
+ const reactRouterDom = require("react-router-dom");
6
+ const react = require("react");
7
+ const designSystem = require("@strapi/design-system");
8
+ const icons = require("@strapi/icons");
9
+ const HomePage = () => {
10
+ const { get, post, del, put } = admin.useFetchClient();
11
+ const [productsAndPrices, setProductsAndPrices] = react.useState({
12
+ prices: [],
13
+ products: []
14
+ });
15
+ const [settings, setSettings] = react.useState({});
16
+ const [isModalOpen, setIsModalOpen] = react.useState(false);
17
+ const [mode, setMode] = react.useState("create");
18
+ const [hasChanges, setHasChanges] = react.useState(false);
19
+ const [isEmbedModalOpen, setIsEmbedModalOpen] = react.useState(false);
20
+ const [selectedProduct, setSelectedProduct] = react.useState(null);
21
+ const [editingIndex, setEditingIndex] = react.useState(null);
22
+ const [paymentType, setPaymentType] = react.useState("oneTime");
23
+ const [name, setName] = react.useState("");
24
+ const [price, setPrice] = react.useState(0);
25
+ const [paymentInterval, setPaymentInterval] = react.useState("");
26
+ const [trialPeriodDays, setTrialPeriodDays] = react.useState(0);
27
+ const [error, setError] = react.useState("");
28
+ const [success, setSuccess] = react.useState("");
29
+ const isSubscription = paymentType === "subscription";
30
+ const resetForm = () => {
31
+ setPaymentType("oneTime");
32
+ setName("");
33
+ setPrice();
34
+ setPaymentInterval("");
35
+ setTrialPeriodDays(0);
36
+ setHasChanges(false);
37
+ };
38
+ const loadProducts = async () => {
39
+ const res = await get("/strapi5-plugin-stripe/products");
40
+ setProductsAndPrices(res.data);
41
+ };
42
+ const getSettings = async () => {
43
+ const res = await get("/strapi5-plugin-stripe/settings");
44
+ setSettings(res.data || {});
45
+ };
46
+ react.useEffect(() => {
47
+ loadProducts();
48
+ getSettings();
49
+ }, []);
50
+ const openCreateModal = () => {
51
+ setMode("create");
52
+ resetForm();
53
+ setIsModalOpen(true);
54
+ };
55
+ const openEditModal = (product, price2, index) => {
56
+ setMode("edit");
57
+ setHasChanges(false);
58
+ setEditingIndex(index);
59
+ setName(product.name);
60
+ setPrice(price2.unit_amount / 100);
61
+ if (price2.recurring) {
62
+ setPaymentType("subscription");
63
+ setPaymentInterval(
64
+ price2.recurring.interval_count ? `${price2.recurring.interval_count}${price2.recurring.interval}s` : price2.recurring.interval
65
+ );
66
+ setTrialPeriodDays(price2.recurring.trial_period_days || 0);
67
+ } else {
68
+ setPaymentType("oneTime");
69
+ setPaymentInterval("");
70
+ setTrialPeriodDays(0);
71
+ }
72
+ setIsModalOpen(true);
73
+ };
74
+ const createProduct = async () => {
75
+ setError("");
76
+ setSuccess("");
77
+ try {
78
+ await post("/strapi5-plugin-stripe/products", {
79
+ currency: settings.currency,
80
+ unit_amount: price * 100,
81
+ product_data: {
82
+ name
83
+ },
84
+ ...isSubscription && {
85
+ recurring: {
86
+ interval: paymentInterval.includes("2") || paymentInterval.includes("6") ? paymentInterval.slice(1, paymentInterval.length - 1) : paymentInterval,
87
+ interval_count: paymentInterval.includes("2") ? "2" : paymentInterval.includes("6") ? "6" : null,
88
+ trial_period_days: isSubscription ? trialPeriodDays : null
89
+ }
90
+ }
91
+ });
92
+ setSuccess("Product created successfully.");
93
+ setIsModalOpen(false);
94
+ resetForm();
95
+ loadProducts();
96
+ } catch (err) {
97
+ setError(
98
+ err?.response?.data?.error?.message || err?.response?.data?.message || err?.message || "An unexpected error occurred."
99
+ );
100
+ }
101
+ };
102
+ const deleteProduct = async (productId, priceId) => {
103
+ setError("");
104
+ setSuccess("");
105
+ try {
106
+ await del(`/strapi5-plugin-stripe/products/${productId}&${priceId}`);
107
+ setSuccess("Product deleted successfully.");
108
+ loadProducts();
109
+ } catch (err) {
110
+ setError(
111
+ err?.response?.data?.error?.message || err?.response?.data?.message || err?.message || "An unexpected error occurred."
112
+ );
113
+ }
114
+ };
115
+ const updateProduct = async (productArr, priceArr) => {
116
+ setError("");
117
+ setSuccess("");
118
+ try {
119
+ let productUpdate = {};
120
+ let mustCreateNewPrice = false;
121
+ if (name !== productArr.name) {
122
+ productUpdate.name = name;
123
+ }
124
+ if (Object.keys(productUpdate).length > 0) {
125
+ await put(
126
+ `/strapi5-plugin-stripe/products/${productArr.id}`,
127
+ productUpdate
128
+ );
129
+ }
130
+ if (priceArr.unit_amount !== price * 100) {
131
+ mustCreateNewPrice = true;
132
+ }
133
+ if (priceArr.recurring) {
134
+ const currentInterval = priceArr.recurring.interval_count ? `${priceArr.recurring.interval_count}${priceArr.recurring.interval}s` : priceArr.recurring.interval;
135
+ if (currentInterval !== paymentInterval) {
136
+ mustCreateNewPrice = true;
137
+ }
138
+ if (priceArr.recurring.trial_period_days !== trialPeriodDays) {
139
+ mustCreateNewPrice = true;
140
+ }
141
+ }
142
+ if (mustCreateNewPrice) {
143
+ const newPrice = await post("/strapi5-plugin-stripe/products", {
144
+ currency: priceArr.currency,
145
+ unit_amount: price * 100,
146
+ product: productArr.id,
147
+ ...isSubscription && {
148
+ recurring: {
149
+ interval: paymentInterval.includes("2") || paymentInterval.includes("6") ? paymentInterval.slice(1, paymentInterval.length - 1) : paymentInterval,
150
+ interval_count: paymentInterval.includes("2") ? 2 : paymentInterval.includes("6") ? 6 : void 0,
151
+ trial_period_days: trialPeriodDays || void 0
152
+ }
153
+ }
154
+ });
155
+ await del(
156
+ `/strapi5-plugin-stripe/prices/${productArr.id}&${priceArr.id}&${newPrice.data.id}`
157
+ );
158
+ }
159
+ setSuccess("Product updated successfully.");
160
+ setIsModalOpen(false);
161
+ resetForm();
162
+ loadProducts();
163
+ } catch (err) {
164
+ setError(
165
+ err?.response?.data?.error?.message || err?.response?.data?.message || err?.message || "An unexpected error occurred."
166
+ );
167
+ }
168
+ };
169
+ const currencySymbol = (price2) => {
170
+ if (price2.currency === "eur") return "€";
171
+ if (price2.currency === "usd") return "$";
172
+ if (price2.currency === "gbp") return "£";
173
+ if (price2.currency === "cad") return "CA$";
174
+ };
175
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, children: [
176
+ /* @__PURE__ */ jsxRuntime.jsxs(
177
+ designSystem.Flex,
178
+ {
179
+ justifyContent: "space-between",
180
+ alignItems: "center",
181
+ paddingBottom: 6,
182
+ children: [
183
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Stripe Products" }),
184
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: openCreateModal, children: "Create product" })
185
+ ]
186
+ }
187
+ ),
188
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 5, rowCount: productsAndPrices.length, children: [
189
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
190
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Name" }) }),
191
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Price" }) }),
192
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Type" }) }),
193
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Interval" }) }),
194
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "IDs" }) }),
195
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Actions" }) })
196
+ ] }) }),
197
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: productsAndPrices.prices.map((elm, index) => {
198
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
199
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: productsAndPrices.products[index].name }) }),
200
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
201
+ elm.unit_amount / 100,
202
+ " ",
203
+ currencySymbol(elm)
204
+ ] }) }),
205
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: elm.type.split("_").map((word) => {
206
+ return word.charAt(0).toUpperCase() + word.slice(1) + " ";
207
+ }) }) }),
208
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: elm.recurring ? elm.recurring.interval_count ? elm.recurring.interval_count + " " + elm.recurring.interval + "s" : elm.recurring.interval : "-" }) }),
209
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Td, { children: [
210
+ /* @__PURE__ */ jsxRuntime.jsx(
211
+ designSystem.Typography,
212
+ {
213
+ background: "rgba(173, 216, 230, 0.3)",
214
+ padding: "5px",
215
+ borderRadius: "8px",
216
+ children: productsAndPrices.products[index].id
217
+ }
218
+ ),
219
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: ", " }),
220
+ /* @__PURE__ */ jsxRuntime.jsx(
221
+ designSystem.Typography,
222
+ {
223
+ background: "rgba(173, 216, 230, 0.3)",
224
+ padding: "5px",
225
+ borderRadius: "8px",
226
+ children: elm.id
227
+ }
228
+ )
229
+ ] }),
230
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.IconButtonGroup, { children: [
231
+ /* @__PURE__ */ jsxRuntime.jsx(
232
+ designSystem.IconButton,
233
+ {
234
+ onClick: () => {
235
+ setSelectedProduct({
236
+ product: productsAndPrices.products[index],
237
+ price: elm
238
+ });
239
+ setIsEmbedModalOpen(true);
240
+ },
241
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.CodeBlock, {})
242
+ }
243
+ ),
244
+ /* @__PURE__ */ jsxRuntime.jsx(
245
+ designSystem.IconButton,
246
+ {
247
+ variant: "secondary",
248
+ onClick: () => {
249
+ openEditModal(
250
+ productsAndPrices.products[index],
251
+ elm,
252
+ index
253
+ );
254
+ },
255
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
256
+ }
257
+ ),
258
+ /* @__PURE__ */ jsxRuntime.jsx(
259
+ designSystem.IconButton,
260
+ {
261
+ variant: "danger",
262
+ onClick: () => deleteProduct(
263
+ productsAndPrices.products[index].id,
264
+ elm.id
265
+ ),
266
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
267
+ }
268
+ )
269
+ ] }) })
270
+ ] }, elm.id);
271
+ }) })
272
+ ] }),
273
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, children: success && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "success", title: "Success", children: success }) }) }),
274
+ isModalOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
275
+ /* @__PURE__ */ jsxRuntime.jsx(
276
+ designSystem.Box,
277
+ {
278
+ position: "fixed",
279
+ top: 0,
280
+ left: 0,
281
+ width: "100vw",
282
+ height: "100vh",
283
+ background: "rgba(0,0,0,0.5)",
284
+ pointerEvents: "none",
285
+ onClick: () => {
286
+ setIsModalOpen(false);
287
+ resetForm();
288
+ }
289
+ }
290
+ ),
291
+ /* @__PURE__ */ jsxRuntime.jsx(
292
+ designSystem.Box,
293
+ {
294
+ display: "flex",
295
+ style: {
296
+ flexDirection: "column",
297
+ justifyContent: "center",
298
+ position: "fixed",
299
+ top: "0",
300
+ left: "0",
301
+ width: "100%",
302
+ height: "100%"
303
+ },
304
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
305
+ designSystem.Box,
306
+ {
307
+ background: "neutral0",
308
+ width: "900px",
309
+ maxWidth: "90%",
310
+ margin: "auto",
311
+ borderRadius: "8px",
312
+ zIndex: 1e3,
313
+ children: [
314
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Create Product / Subscription" }) }),
315
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { wrap: "wrap", gap: 4, children: [
316
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "50%", children: [
317
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Payment Type" }),
318
+ /* @__PURE__ */ jsxRuntime.jsxs(
319
+ designSystem.SingleSelect,
320
+ {
321
+ value: paymentType,
322
+ onChange: (value) => {
323
+ setPaymentType(value);
324
+ setHasChanges(true);
325
+ },
326
+ children: [
327
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "oneTime", children: "One-Time" }),
328
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "subscription", children: "Subscription" })
329
+ ]
330
+ }
331
+ )
332
+ ] }),
333
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "50%", children: [
334
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Price" }),
335
+ /* @__PURE__ */ jsxRuntime.jsx(
336
+ designSystem.NumberInput,
337
+ {
338
+ value: price,
339
+ onValueChange: (value) => {
340
+ setPrice(value);
341
+ setHasChanges(true);
342
+ },
343
+ required: true
344
+ }
345
+ )
346
+ ] }),
347
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "50%", children: [
348
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Name" }),
349
+ /* @__PURE__ */ jsxRuntime.jsx(
350
+ designSystem.TextInput,
351
+ {
352
+ value: name,
353
+ onChange: (e) => {
354
+ setName(e.target.value);
355
+ setHasChanges(true);
356
+ },
357
+ required: true
358
+ }
359
+ )
360
+ ] }),
361
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "50%", children: [
362
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Payment Interval" }),
363
+ /* @__PURE__ */ jsxRuntime.jsxs(
364
+ designSystem.SingleSelect,
365
+ {
366
+ value: paymentInterval,
367
+ onChange: (value) => {
368
+ setPaymentInterval(value);
369
+ setHasChanges(true);
370
+ },
371
+ disabled: paymentType !== "subscription",
372
+ children: [
373
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "week", children: "Every week" }),
374
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "2weeks", children: "Every 2 weeks" }),
375
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "month", children: "Every month" }),
376
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "6months", children: "Every 6 months" }),
377
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "year", children: "Every year" })
378
+ ]
379
+ }
380
+ )
381
+ ] }),
382
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "50%", children: [
383
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Trial Period Days" }),
384
+ /* @__PURE__ */ jsxRuntime.jsx(
385
+ designSystem.NumberInput,
386
+ {
387
+ value: trialPeriodDays,
388
+ onValueChange: (value) => {
389
+ setTrialPeriodDays(value);
390
+ setHasChanges(true);
391
+ },
392
+ disabled: paymentType !== "subscription"
393
+ }
394
+ )
395
+ ] })
396
+ ] }) }),
397
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, children: error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", title: "Action failed", children: error }) }) }),
398
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
399
+ /* @__PURE__ */ jsxRuntime.jsx(
400
+ designSystem.Button,
401
+ {
402
+ variant: "tertiary",
403
+ onClick: () => {
404
+ setIsModalOpen(false);
405
+ },
406
+ children: "Cancel"
407
+ }
408
+ ),
409
+ /* @__PURE__ */ jsxRuntime.jsx(
410
+ designSystem.Button,
411
+ {
412
+ onClick: () => mode === "create" ? createProduct() : updateProduct(
413
+ productsAndPrices.products[editingIndex],
414
+ productsAndPrices.prices[editingIndex]
415
+ ),
416
+ disabled: !hasChanges,
417
+ children: mode === "create" ? "Create" : "Update"
418
+ }
419
+ )
420
+ ] }) })
421
+ ]
422
+ }
423
+ )
424
+ }
425
+ )
426
+ ] }),
427
+ isEmbedModalOpen && selectedProduct && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
428
+ /* @__PURE__ */ jsxRuntime.jsx(
429
+ designSystem.Box,
430
+ {
431
+ position: "fixed",
432
+ top: 0,
433
+ left: 0,
434
+ width: "100vw",
435
+ height: "100vh",
436
+ background: "rgba(0,0,0,0.5)",
437
+ onClick: () => {
438
+ setIsModalOpen(false);
439
+ resetForm();
440
+ },
441
+ zIndex: 90
442
+ }
443
+ ),
444
+ /* @__PURE__ */ jsxRuntime.jsx(
445
+ designSystem.Box,
446
+ {
447
+ display: "flex",
448
+ style: {
449
+ flexDirection: "column",
450
+ justifyContent: "center",
451
+ position: "relative",
452
+ top: "-100px",
453
+ width: "100%",
454
+ height: "100%"
455
+ },
456
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
457
+ designSystem.Box,
458
+ {
459
+ background: "neutral0",
460
+ width: "900px",
461
+ maxWidth: "90%",
462
+ margin: "auto",
463
+ borderRadius: "8px",
464
+ zIndex: 100,
465
+ children: [
466
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Payment button integration" }) }),
467
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
468
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "1. Import the script" }),
469
+ /* @__PURE__ */ jsxRuntime.jsx(
470
+ designSystem.Box,
471
+ {
472
+ background: "neutral100",
473
+ padding: 4,
474
+ borderRadius: "4px",
475
+ marginTop: 2,
476
+ children: /* @__PURE__ */ jsxRuntime.jsx("pre", { children: `<script>
477
+ window.addEventListener('load', () => {
478
+ document.querySelectorAll('[data-stripe-checkout]').forEach((btn) => {
479
+ btn.addEventListener('click', () => checkout(btn));
480
+ });
481
+
482
+ const sessionId = new URLSearchParams(location.search).get('session_id');
483
+ if (sessionId) retrieve(sessionId);
484
+ });
485
+
486
+ function checkout(btn) {
487
+ const apiUrl = btn.dataset.apiUrl;
488
+ const priceId = btn.dataset.priceId;
489
+
490
+ if (!apiUrl || !priceId) return;
491
+
492
+ const metadata = {};
493
+ Object.keys(btn.dataset).forEach((k) => {
494
+ if (k.startsWith('metadata')) {
495
+ metadata[k.replace('metadata', '').toLowerCase()] = btn.dataset[k];
496
+ }
497
+ });
498
+
499
+ fetch(apiUrl + "/api/strapi5-plugin-stripe/checkout", {
500
+ method: 'POST',
501
+ headers: { 'Content-Type': 'application/json' },
502
+ body: JSON.stringify({
503
+ priceId,
504
+ customer_email: btn.dataset.email,
505
+ metadata,
506
+ }),
507
+ })
508
+ .then((r) => r.json())
509
+ .then((r) => r.url && (location.href = r.url));
510
+ }
511
+ <\/script>` })
512
+ }
513
+ ),
514
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 4, children: [
515
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "2. Add the payment button" }),
516
+ /* @__PURE__ */ jsxRuntime.jsx(
517
+ designSystem.Box,
518
+ {
519
+ background: "neutral100",
520
+ padding: 4,
521
+ borderRadius: "4px",
522
+ marginTop: 2,
523
+ children: /* @__PURE__ */ jsxRuntime.jsx("pre", { children: `<button
524
+ data-stripe-checkout
525
+ data-api-url="${window.location.origin}"
526
+ data-price-id="${selectedProduct.price.id}"
527
+ data-email="customer@email.com"
528
+ data-metadata-order-id="ORDER_123"
529
+ >
530
+ Pay now
531
+ </button>` })
532
+ }
533
+ )
534
+ ] }),
535
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 4, children: [
536
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "3. Notes" }),
537
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", children: [
538
+ /* @__PURE__ */ jsxRuntime.jsx("br", {}),
539
+ "• ",
540
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: "priceId" }),
541
+ " identifies the product price",
542
+ /* @__PURE__ */ jsxRuntime.jsx("br", {}),
543
+ "• Metadata is optional and available in webhooks",
544
+ /* @__PURE__ */ jsxRuntime.jsx("br", {}),
545
+ "• Redirect is handled automatically by Stripe, with the session ID as a query parameter"
546
+ ] })
547
+ ] })
548
+ ] }),
549
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => setIsEmbedModalOpen(false), children: "Close" }) }) })
550
+ ]
551
+ }
552
+ )
553
+ }
554
+ )
555
+ ] })
556
+ ] });
557
+ };
558
+ const App = () => {
559
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
560
+ /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
561
+ /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
562
+ ] });
563
+ };
564
+ exports.App = App;