@inttegro/react 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +22 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -8
- package/dist/index.d.ts +9 -8
- package/dist/index.js +22 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -32,6 +32,7 @@ var Checkout = (0, import_react.forwardRef)(
|
|
|
32
32
|
function Checkout2({
|
|
33
33
|
appearance,
|
|
34
34
|
className,
|
|
35
|
+
features,
|
|
35
36
|
locale,
|
|
36
37
|
onCompleted,
|
|
37
38
|
onError,
|
|
@@ -46,6 +47,11 @@ var Checkout = (0, import_react.forwardRef)(
|
|
|
46
47
|
const checkoutRef = (0, import_react.useRef)(null);
|
|
47
48
|
const callbacksRef = (0, import_react.useRef)({ onCompleted, onError, onEvent, onReady });
|
|
48
49
|
const updateOptionsRef = (0, import_react.useRef)({ appearance, locale });
|
|
50
|
+
const hasFeatureOverrides = features !== void 0;
|
|
51
|
+
const showLineItems = features?.showLineItems;
|
|
52
|
+
const showInvoiceDownload = features?.showInvoiceDownload;
|
|
53
|
+
const showReceiptDownload = features?.showReceiptDownload;
|
|
54
|
+
const allowPaymentMethodChange = features?.allowPaymentMethodChange;
|
|
49
55
|
callbacksRef.current = { onCompleted, onError, onEvent, onReady };
|
|
50
56
|
updateOptionsRef.current = { appearance, locale };
|
|
51
57
|
(0, import_react.useImperativeHandle)(
|
|
@@ -67,6 +73,12 @@ var Checkout = (0, import_react.forwardRef)(
|
|
|
67
73
|
const instance = inttegro.createCheckout(
|
|
68
74
|
definedOptions({
|
|
69
75
|
...updateOptionsRef.current,
|
|
76
|
+
features: hasFeatureOverrides ? definedOptions({
|
|
77
|
+
allowPaymentMethodChange,
|
|
78
|
+
showInvoiceDownload,
|
|
79
|
+
showLineItems,
|
|
80
|
+
showReceiptDownload
|
|
81
|
+
}) : void 0,
|
|
70
82
|
orderId,
|
|
71
83
|
timeout,
|
|
72
84
|
title
|
|
@@ -95,7 +107,16 @@ var Checkout = (0, import_react.forwardRef)(
|
|
|
95
107
|
checkout?.destroy();
|
|
96
108
|
if (checkoutRef.current === checkout) checkoutRef.current = null;
|
|
97
109
|
};
|
|
98
|
-
}, [
|
|
110
|
+
}, [
|
|
111
|
+
allowPaymentMethodChange,
|
|
112
|
+
hasFeatureOverrides,
|
|
113
|
+
orderId,
|
|
114
|
+
showInvoiceDownload,
|
|
115
|
+
showLineItems,
|
|
116
|
+
showReceiptDownload,
|
|
117
|
+
timeout,
|
|
118
|
+
title
|
|
119
|
+
]);
|
|
99
120
|
(0, import_react.useEffect)(() => {
|
|
100
121
|
checkoutRef.current?.update(definedOptions({ appearance, locale }));
|
|
101
122
|
}, [appearance, locale]);
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Checkout.tsx"],"sourcesContent":["/**\n * React component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/react\n */\nexport { Checkout, type CheckoutHandle, type CheckoutProps } from './Checkout'\nexport type {\n CheckoutAppearance,\n CheckoutErrorEvent,\n CheckoutEvent,\n CheckoutTheme,\n} from '@inttegro/js'\n","import {\n loadInttegro,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n type CheckoutOptions,\n} from '@inttegro/js'\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `orderId`, `timeout`, and `title` identify the embedded experience. Changing
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Checkout.tsx"],"sourcesContent":["/**\n * React component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/react\n */\nexport { Checkout, type CheckoutHandle, type CheckoutProps } from './Checkout'\nexport type {\n CheckoutAppearance,\n CheckoutErrorEvent,\n CheckoutEvent,\n CheckoutFeatures,\n CheckoutTheme,\n} from '@inttegro/js'\n","import {\n loadInttegro,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n type CheckoutOptions,\n} from '@inttegro/js'\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `features`, `orderId`, `timeout`, and `title` identify the embedded\n * experience. Changing one replaces the underlying controller. `appearance`\n * and `locale` update the existing controller without discarding payer\n * progress.\n *\n * @category React\n */\nexport interface CheckoutProps extends CheckoutOptions {\n /** CSS class applied to the outer container owned by your React application. */\n className?: string\n /** Inline styles applied to the outer container, never to controls inside Checkout. */\n style?: CSSProperties\n /**\n * Called after Checkout reports its successful terminal state.\n * Use this to navigate or refresh server-owned Order state, not as the sole\n * signal for fulfillment.\n */\n onCompleted?: (event: Extract<CheckoutEvent, { type: 'completed' }>) => void\n /**\n * Called for loader/mount errors and sanitized hosted errors.\n * Use `error instanceof InttegroCheckoutError` or check for an event `type`\n * before reading framework-independent details.\n */\n onError?: (event: CheckoutErrorEvent | Error) => void\n /** Called for every sanitized lifecycle event, including events above. */\n onEvent?: (event: CheckoutEvent) => void\n /** Called once the iframe is interactive and its mount promise has resolved. */\n onReady?: (event: Extract<CheckoutEvent, { type: 'ready' }>) => void\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a React ref.\n *\n * Prefer props for normal updates. Use the handle for focus management in\n * dialogs or for updates driven by imperative host integrations.\n *\n * @category React\n */\nexport interface CheckoutHandle {\n /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */\n focus(): void\n /** Applies a new locale or theme when the controller exists. */\n update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a React application.\n *\n * The component renders an empty `div`, loads the executable runtime from\n * Inttegro's fixed origin after mount, creates a controller for `orderId`, and\n * destroys it during cleanup. Server rendering is safe because no runtime is\n * loaded until the effect runs in a browser.\n *\n * Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted\n * experience. Changing `appearance` or `locale` updates the active experience\n * in place. Keep the component mounted while a payment is pending or\n * confirmation is in progress.\n *\n * @example Handle success, failure, and focus in a dialog\n * ```tsx\n * import { useRef } from 'react'\n * import { Checkout, type CheckoutHandle } from '@inttegro/react'\n *\n * function Payment({ orderId }: { orderId: string }) {\n * const checkout = useRef<CheckoutHandle>(null)\n *\n * return (\n * <dialog open onTransitionEnd={() => checkout.current?.focus()}>\n * <Checkout\n * ref={checkout}\n * orderId={orderId}\n * appearance={{ theme: 'system' }}\n * onCompleted={() => location.assign(`/orders/${orderId}/complete`)}\n * onError={(error) => reportCheckoutError(error)}\n * />\n * </dialog>\n * )\n * }\n * ```\n *\n * @category React\n */\nexport const Checkout = forwardRef<CheckoutHandle, CheckoutProps>(\n function Checkout(\n {\n appearance,\n className,\n features,\n locale,\n onCompleted,\n onError,\n onEvent,\n onReady,\n orderId,\n style,\n timeout,\n title,\n },\n forwardedRef,\n ) {\n const containerRef = useRef<HTMLDivElement>(null)\n const checkoutRef = useRef<CheckoutController | null>(null)\n const callbacksRef = useRef({ onCompleted, onError, onEvent, onReady })\n const updateOptionsRef = useRef({ appearance, locale })\n const hasFeatureOverrides = features !== undefined\n const showLineItems = features?.showLineItems\n const showInvoiceDownload = features?.showInvoiceDownload\n const showReceiptDownload = features?.showReceiptDownload\n const allowPaymentMethodChange = features?.allowPaymentMethodChange\n callbacksRef.current = { onCompleted, onError, onEvent, onReady }\n updateOptionsRef.current = { appearance, locale }\n\n useImperativeHandle(\n forwardedRef,\n () => ({\n focus: () => checkoutRef.current?.focus(),\n update: (options) => checkoutRef.current?.update(options),\n }),\n [],\n )\n\n useEffect(() => {\n const target = containerRef.current\n if (!target) return\n\n let active = true\n let checkout: CheckoutController | undefined\n let unsubscribe: (() => void) | undefined\n\n void loadInttegro()\n .then(async (inttegro) => {\n if (!active || !inttegro) return\n const instance = inttegro.createCheckout(\n definedOptions({\n ...updateOptionsRef.current,\n features: hasFeatureOverrides\n ? definedOptions({\n allowPaymentMethodChange,\n showInvoiceDownload,\n showLineItems,\n showReceiptDownload,\n })\n : undefined,\n orderId,\n timeout,\n title,\n }),\n )\n if (!active) {\n instance.destroy()\n return\n }\n checkout = instance\n checkoutRef.current = instance\n unsubscribe = instance.onEvent((event) => {\n callbacksRef.current.onEvent?.(event)\n if (event.type === 'ready') callbacksRef.current.onReady?.(event)\n if (event.type === 'completed')\n callbacksRef.current.onCompleted?.(event)\n if (event.type === 'error') callbacksRef.current.onError?.(event)\n })\n await instance.mount(target)\n })\n .catch((error: unknown) => {\n if (active) callbacksRef.current.onError?.(asError(error))\n })\n\n return () => {\n active = false\n unsubscribe?.()\n checkout?.destroy()\n if (checkoutRef.current === checkout) checkoutRef.current = null\n }\n }, [\n allowPaymentMethodChange,\n hasFeatureOverrides,\n orderId,\n showInvoiceDownload,\n showLineItems,\n showReceiptDownload,\n timeout,\n title,\n ])\n\n useEffect(() => {\n checkoutRef.current?.update(definedOptions({ appearance, locale }))\n }, [appearance, locale])\n\n return <div className={className} ref={containerRef} style={style} />\n },\n)\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n return Object.fromEntries(\n Object.entries(options).filter(([, value]) => value !== undefined),\n ) as Value\n}\n\nfunction asError(error: unknown): Error {\n return error instanceof Error ? error : new Error('Checkout failed to load.')\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gBAMO;AACP,mBAMO;AAiMI;AA1GJ,IAAM,eAAW;AAAA,EACtB,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,cACA;AACA,UAAM,mBAAe,qBAAuB,IAAI;AAChD,UAAM,kBAAc,qBAAkC,IAAI;AAC1D,UAAM,mBAAe,qBAAO,EAAE,aAAa,SAAS,SAAS,QAAQ,CAAC;AACtE,UAAM,uBAAmB,qBAAO,EAAE,YAAY,OAAO,CAAC;AACtD,UAAM,sBAAsB,aAAa;AACzC,UAAM,gBAAgB,UAAU;AAChC,UAAM,sBAAsB,UAAU;AACtC,UAAM,sBAAsB,UAAU;AACtC,UAAM,2BAA2B,UAAU;AAC3C,iBAAa,UAAU,EAAE,aAAa,SAAS,SAAS,QAAQ;AAChE,qBAAiB,UAAU,EAAE,YAAY,OAAO;AAEhD;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,OAAO,MAAM,YAAY,SAAS,MAAM;AAAA,QACxC,QAAQ,CAAC,YAAY,YAAY,SAAS,OAAO,OAAO;AAAA,MAC1D;AAAA,MACA,CAAC;AAAA,IACH;AAEA,gCAAU,MAAM;AACd,YAAM,SAAS,aAAa;AAC5B,UAAI,CAAC,OAAQ;AAEb,UAAI,SAAS;AACb,UAAI;AACJ,UAAI;AAEJ,eAAK,wBAAa,EACf,KAAK,OAAO,aAAa;AACxB,YAAI,CAAC,UAAU,CAAC,SAAU;AAC1B,cAAM,WAAW,SAAS;AAAA,UACxB,eAAe;AAAA,YACb,GAAG,iBAAiB;AAAA,YACpB,UAAU,sBACN,eAAe;AAAA,cACb;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC,IACD;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH;AACA,YAAI,CAAC,QAAQ;AACX,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,mBAAW;AACX,oBAAY,UAAU;AACtB,sBAAc,SAAS,QAAQ,CAAC,UAAU;AACxC,uBAAa,QAAQ,UAAU,KAAK;AACpC,cAAI,MAAM,SAAS,QAAS,cAAa,QAAQ,UAAU,KAAK;AAChE,cAAI,MAAM,SAAS;AACjB,yBAAa,QAAQ,cAAc,KAAK;AAC1C,cAAI,MAAM,SAAS,QAAS,cAAa,QAAQ,UAAU,KAAK;AAAA,QAClE,CAAC;AACD,cAAM,SAAS,MAAM,MAAM;AAAA,MAC7B,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,YAAI,OAAQ,cAAa,QAAQ,UAAU,QAAQ,KAAK,CAAC;AAAA,MAC3D,CAAC;AAEH,aAAO,MAAM;AACX,iBAAS;AACT,sBAAc;AACd,kBAAU,QAAQ;AAClB,YAAI,YAAY,YAAY,SAAU,aAAY,UAAU;AAAA,MAC9D;AAAA,IACF,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,gCAAU,MAAM;AACd,kBAAY,SAAS,OAAO,eAAe,EAAE,YAAY,OAAO,CAAC,CAAC;AAAA,IACpE,GAAG,CAAC,YAAY,MAAM,CAAC;AAEvB,WAAO,4CAAC,SAAI,WAAsB,KAAK,cAAc,OAAc;AAAA,EACrE;AACF;AAEA,SAAS,eAAqC,SAAuB;AACnE,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AAAA,EACnE;AACF;AAEA,SAAS,QAAQ,OAAuB;AACtC,SAAO,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,0BAA0B;AAC9E;","names":["Checkout"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties } from 'react';
|
|
3
3
|
import { CheckoutOptions, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
|
|
4
|
-
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
|
|
4
|
+
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutTheme } from '@inttegro/js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Props for {@link Checkout}.
|
|
8
8
|
*
|
|
9
|
-
* `orderId`, `timeout`, and `title` identify the embedded
|
|
10
|
-
* one replaces the underlying controller. `appearance`
|
|
11
|
-
* existing controller without discarding payer
|
|
9
|
+
* `features`, `orderId`, `timeout`, and `title` identify the embedded
|
|
10
|
+
* experience. Changing one replaces the underlying controller. `appearance`
|
|
11
|
+
* and `locale` update the existing controller without discarding payer
|
|
12
|
+
* progress.
|
|
12
13
|
*
|
|
13
14
|
* @category React
|
|
14
15
|
*/
|
|
@@ -60,10 +61,10 @@ interface CheckoutHandle {
|
|
|
60
61
|
* destroys it during cleanup. Server rendering is safe because no runtime is
|
|
61
62
|
* loaded until the effect runs in a browser.
|
|
62
63
|
*
|
|
63
|
-
* Changing `orderId`, `timeout`, or `title` starts a fresh hosted
|
|
64
|
-
* Changing `appearance` or `locale` updates the active experience
|
|
65
|
-
* Keep the component mounted while a payment is pending or
|
|
66
|
-
* progress.
|
|
64
|
+
* Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted
|
|
65
|
+
* experience. Changing `appearance` or `locale` updates the active experience
|
|
66
|
+
* in place. Keep the component mounted while a payment is pending or
|
|
67
|
+
* confirmation is in progress.
|
|
67
68
|
*
|
|
68
69
|
* @example Handle success, failure, and focus in a dialog
|
|
69
70
|
* ```tsx
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties } from 'react';
|
|
3
3
|
import { CheckoutOptions, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
|
|
4
|
-
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
|
|
4
|
+
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutTheme } from '@inttegro/js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Props for {@link Checkout}.
|
|
8
8
|
*
|
|
9
|
-
* `orderId`, `timeout`, and `title` identify the embedded
|
|
10
|
-
* one replaces the underlying controller. `appearance`
|
|
11
|
-
* existing controller without discarding payer
|
|
9
|
+
* `features`, `orderId`, `timeout`, and `title` identify the embedded
|
|
10
|
+
* experience. Changing one replaces the underlying controller. `appearance`
|
|
11
|
+
* and `locale` update the existing controller without discarding payer
|
|
12
|
+
* progress.
|
|
12
13
|
*
|
|
13
14
|
* @category React
|
|
14
15
|
*/
|
|
@@ -60,10 +61,10 @@ interface CheckoutHandle {
|
|
|
60
61
|
* destroys it during cleanup. Server rendering is safe because no runtime is
|
|
61
62
|
* loaded until the effect runs in a browser.
|
|
62
63
|
*
|
|
63
|
-
* Changing `orderId`, `timeout`, or `title` starts a fresh hosted
|
|
64
|
-
* Changing `appearance` or `locale` updates the active experience
|
|
65
|
-
* Keep the component mounted while a payment is pending or
|
|
66
|
-
* progress.
|
|
64
|
+
* Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted
|
|
65
|
+
* experience. Changing `appearance` or `locale` updates the active experience
|
|
66
|
+
* in place. Keep the component mounted while a payment is pending or
|
|
67
|
+
* confirmation is in progress.
|
|
67
68
|
*
|
|
68
69
|
* @example Handle success, failure, and focus in a dialog
|
|
69
70
|
* ```tsx
|
package/dist/index.js
CHANGED
|
@@ -13,6 +13,7 @@ var Checkout = forwardRef(
|
|
|
13
13
|
function Checkout2({
|
|
14
14
|
appearance,
|
|
15
15
|
className,
|
|
16
|
+
features,
|
|
16
17
|
locale,
|
|
17
18
|
onCompleted,
|
|
18
19
|
onError,
|
|
@@ -27,6 +28,11 @@ var Checkout = forwardRef(
|
|
|
27
28
|
const checkoutRef = useRef(null);
|
|
28
29
|
const callbacksRef = useRef({ onCompleted, onError, onEvent, onReady });
|
|
29
30
|
const updateOptionsRef = useRef({ appearance, locale });
|
|
31
|
+
const hasFeatureOverrides = features !== void 0;
|
|
32
|
+
const showLineItems = features?.showLineItems;
|
|
33
|
+
const showInvoiceDownload = features?.showInvoiceDownload;
|
|
34
|
+
const showReceiptDownload = features?.showReceiptDownload;
|
|
35
|
+
const allowPaymentMethodChange = features?.allowPaymentMethodChange;
|
|
30
36
|
callbacksRef.current = { onCompleted, onError, onEvent, onReady };
|
|
31
37
|
updateOptionsRef.current = { appearance, locale };
|
|
32
38
|
useImperativeHandle(
|
|
@@ -48,6 +54,12 @@ var Checkout = forwardRef(
|
|
|
48
54
|
const instance = inttegro.createCheckout(
|
|
49
55
|
definedOptions({
|
|
50
56
|
...updateOptionsRef.current,
|
|
57
|
+
features: hasFeatureOverrides ? definedOptions({
|
|
58
|
+
allowPaymentMethodChange,
|
|
59
|
+
showInvoiceDownload,
|
|
60
|
+
showLineItems,
|
|
61
|
+
showReceiptDownload
|
|
62
|
+
}) : void 0,
|
|
51
63
|
orderId,
|
|
52
64
|
timeout,
|
|
53
65
|
title
|
|
@@ -76,7 +88,16 @@ var Checkout = forwardRef(
|
|
|
76
88
|
checkout?.destroy();
|
|
77
89
|
if (checkoutRef.current === checkout) checkoutRef.current = null;
|
|
78
90
|
};
|
|
79
|
-
}, [
|
|
91
|
+
}, [
|
|
92
|
+
allowPaymentMethodChange,
|
|
93
|
+
hasFeatureOverrides,
|
|
94
|
+
orderId,
|
|
95
|
+
showInvoiceDownload,
|
|
96
|
+
showLineItems,
|
|
97
|
+
showReceiptDownload,
|
|
98
|
+
timeout,
|
|
99
|
+
title
|
|
100
|
+
]);
|
|
80
101
|
useEffect(() => {
|
|
81
102
|
checkoutRef.current?.update(definedOptions({ appearance, locale }));
|
|
82
103
|
}, [appearance, locale]);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Checkout.tsx"],"sourcesContent":["import {\n loadInttegro,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n type CheckoutOptions,\n} from '@inttegro/js'\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `orderId`, `timeout`, and `title` identify the embedded experience. Changing
|
|
1
|
+
{"version":3,"sources":["../src/Checkout.tsx"],"sourcesContent":["import {\n loadInttegro,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n type CheckoutOptions,\n} from '@inttegro/js'\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react'\n\n/**\n * Props for {@link Checkout}.\n *\n * `features`, `orderId`, `timeout`, and `title` identify the embedded\n * experience. Changing one replaces the underlying controller. `appearance`\n * and `locale` update the existing controller without discarding payer\n * progress.\n *\n * @category React\n */\nexport interface CheckoutProps extends CheckoutOptions {\n /** CSS class applied to the outer container owned by your React application. */\n className?: string\n /** Inline styles applied to the outer container, never to controls inside Checkout. */\n style?: CSSProperties\n /**\n * Called after Checkout reports its successful terminal state.\n * Use this to navigate or refresh server-owned Order state, not as the sole\n * signal for fulfillment.\n */\n onCompleted?: (event: Extract<CheckoutEvent, { type: 'completed' }>) => void\n /**\n * Called for loader/mount errors and sanitized hosted errors.\n * Use `error instanceof InttegroCheckoutError` or check for an event `type`\n * before reading framework-independent details.\n */\n onError?: (event: CheckoutErrorEvent | Error) => void\n /** Called for every sanitized lifecycle event, including events above. */\n onEvent?: (event: CheckoutEvent) => void\n /** Called once the iframe is interactive and its mount promise has resolved. */\n onReady?: (event: Extract<CheckoutEvent, { type: 'ready' }>) => void\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a React ref.\n *\n * Prefer props for normal updates. Use the handle for focus management in\n * dialogs or for updates driven by imperative host integrations.\n *\n * @category React\n */\nexport interface CheckoutHandle {\n /** Moves focus into Checkout when its controller is ready; otherwise does nothing. */\n focus(): void\n /** Applies a new locale or theme when the controller exists. */\n update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a React application.\n *\n * The component renders an empty `div`, loads the executable runtime from\n * Inttegro's fixed origin after mount, creates a controller for `orderId`, and\n * destroys it during cleanup. Server rendering is safe because no runtime is\n * loaded until the effect runs in a browser.\n *\n * Changing `features`, `orderId`, `timeout`, or `title` starts a fresh hosted\n * experience. Changing `appearance` or `locale` updates the active experience\n * in place. Keep the component mounted while a payment is pending or\n * confirmation is in progress.\n *\n * @example Handle success, failure, and focus in a dialog\n * ```tsx\n * import { useRef } from 'react'\n * import { Checkout, type CheckoutHandle } from '@inttegro/react'\n *\n * function Payment({ orderId }: { orderId: string }) {\n * const checkout = useRef<CheckoutHandle>(null)\n *\n * return (\n * <dialog open onTransitionEnd={() => checkout.current?.focus()}>\n * <Checkout\n * ref={checkout}\n * orderId={orderId}\n * appearance={{ theme: 'system' }}\n * onCompleted={() => location.assign(`/orders/${orderId}/complete`)}\n * onError={(error) => reportCheckoutError(error)}\n * />\n * </dialog>\n * )\n * }\n * ```\n *\n * @category React\n */\nexport const Checkout = forwardRef<CheckoutHandle, CheckoutProps>(\n function Checkout(\n {\n appearance,\n className,\n features,\n locale,\n onCompleted,\n onError,\n onEvent,\n onReady,\n orderId,\n style,\n timeout,\n title,\n },\n forwardedRef,\n ) {\n const containerRef = useRef<HTMLDivElement>(null)\n const checkoutRef = useRef<CheckoutController | null>(null)\n const callbacksRef = useRef({ onCompleted, onError, onEvent, onReady })\n const updateOptionsRef = useRef({ appearance, locale })\n const hasFeatureOverrides = features !== undefined\n const showLineItems = features?.showLineItems\n const showInvoiceDownload = features?.showInvoiceDownload\n const showReceiptDownload = features?.showReceiptDownload\n const allowPaymentMethodChange = features?.allowPaymentMethodChange\n callbacksRef.current = { onCompleted, onError, onEvent, onReady }\n updateOptionsRef.current = { appearance, locale }\n\n useImperativeHandle(\n forwardedRef,\n () => ({\n focus: () => checkoutRef.current?.focus(),\n update: (options) => checkoutRef.current?.update(options),\n }),\n [],\n )\n\n useEffect(() => {\n const target = containerRef.current\n if (!target) return\n\n let active = true\n let checkout: CheckoutController | undefined\n let unsubscribe: (() => void) | undefined\n\n void loadInttegro()\n .then(async (inttegro) => {\n if (!active || !inttegro) return\n const instance = inttegro.createCheckout(\n definedOptions({\n ...updateOptionsRef.current,\n features: hasFeatureOverrides\n ? definedOptions({\n allowPaymentMethodChange,\n showInvoiceDownload,\n showLineItems,\n showReceiptDownload,\n })\n : undefined,\n orderId,\n timeout,\n title,\n }),\n )\n if (!active) {\n instance.destroy()\n return\n }\n checkout = instance\n checkoutRef.current = instance\n unsubscribe = instance.onEvent((event) => {\n callbacksRef.current.onEvent?.(event)\n if (event.type === 'ready') callbacksRef.current.onReady?.(event)\n if (event.type === 'completed')\n callbacksRef.current.onCompleted?.(event)\n if (event.type === 'error') callbacksRef.current.onError?.(event)\n })\n await instance.mount(target)\n })\n .catch((error: unknown) => {\n if (active) callbacksRef.current.onError?.(asError(error))\n })\n\n return () => {\n active = false\n unsubscribe?.()\n checkout?.destroy()\n if (checkoutRef.current === checkout) checkoutRef.current = null\n }\n }, [\n allowPaymentMethodChange,\n hasFeatureOverrides,\n orderId,\n showInvoiceDownload,\n showLineItems,\n showReceiptDownload,\n timeout,\n title,\n ])\n\n useEffect(() => {\n checkoutRef.current?.update(definedOptions({ appearance, locale }))\n }, [appearance, locale])\n\n return <div className={className} ref={containerRef} style={style} />\n },\n)\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n return Object.fromEntries(\n Object.entries(options).filter(([, value]) => value !== undefined),\n ) as Value\n}\n\nfunction asError(error: unknown): Error {\n return error instanceof Error ? error : new Error('Checkout failed to load.')\n}\n"],"mappings":"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","names":["Checkout"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inttegro/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "React components for Inttegro hosted workflows",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"typecheck": "tsc --noEmit"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@inttegro/js": "0.
|
|
35
|
+
"@inttegro/js": "0.2.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": ">=18"
|