@solifyn/react 1.0.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.d.mts +51 -0
- package/dist/index.d.ts +51 -0
- package/dist/index.js +213 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +182 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +39 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { useCheckoutEmbedControls } from '@whop/checkout/react';
|
|
3
|
+
export { useCheckoutEmbedControls } from '@whop/checkout/react';
|
|
4
|
+
|
|
5
|
+
declare global {
|
|
6
|
+
interface Window {
|
|
7
|
+
SolifynEngine?: any;
|
|
8
|
+
UnthorEngine?: any;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
interface SolifynCheckoutLabels {
|
|
12
|
+
initializing?: string;
|
|
13
|
+
processing?: string;
|
|
14
|
+
payNow?: string;
|
|
15
|
+
secured?: string;
|
|
16
|
+
pciDSS?: string;
|
|
17
|
+
orderProcessedBy?: string;
|
|
18
|
+
privacy?: string;
|
|
19
|
+
terms?: string;
|
|
20
|
+
}
|
|
21
|
+
interface SolifynCheckoutProps {
|
|
22
|
+
sessionId?: string;
|
|
23
|
+
membershipId?: string;
|
|
24
|
+
licenseId?: string;
|
|
25
|
+
theme?: 'light' | 'dark' | 'system';
|
|
26
|
+
environment?: 'production' | 'sandbox';
|
|
27
|
+
prefill?: any;
|
|
28
|
+
labels?: SolifynCheckoutLabels;
|
|
29
|
+
hideEmail?: boolean;
|
|
30
|
+
disableEmail?: boolean;
|
|
31
|
+
hideAddressForm?: boolean;
|
|
32
|
+
hideSubmitButton?: boolean;
|
|
33
|
+
onStateChange?: (state: any) => void;
|
|
34
|
+
onComplete?: (id: string, extra?: any) => void;
|
|
35
|
+
onAddressValidationError?: (error: any) => void;
|
|
36
|
+
onCurrenciesAvailable?: (snapshot: any) => void;
|
|
37
|
+
onCurrencyChanged?: (event: any) => void;
|
|
38
|
+
[key: string]: any;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Custom Embedded Checkout component for Solifyn.
|
|
42
|
+
* Wraps CheckoutEmbed with fully customized Solifyn branding, masking logic, and visual assets.
|
|
43
|
+
*/
|
|
44
|
+
declare const SolifynCheckout: react.ForwardRefExoticComponent<Omit<SolifynCheckoutProps, "ref"> & react.RefAttributes<any>>;
|
|
45
|
+
declare const useSolifynCheckoutControls: typeof useCheckoutEmbedControls;
|
|
46
|
+
declare const SolifynCheckoutEmbed: react.ForwardRefExoticComponent<Omit<SolifynCheckoutProps, "ref"> & react.RefAttributes<any>>;
|
|
47
|
+
type SolifynCheckoutEmbedProps = SolifynCheckoutProps;
|
|
48
|
+
type SolifynCheckoutEmbedLabels = SolifynCheckoutLabels;
|
|
49
|
+
declare const useSolifynCheckoutEmbedControls: typeof useCheckoutEmbedControls;
|
|
50
|
+
|
|
51
|
+
export { SolifynCheckout, SolifynCheckoutEmbed, type SolifynCheckoutEmbedLabels, type SolifynCheckoutEmbedProps, type SolifynCheckoutLabels, type SolifynCheckoutProps, useSolifynCheckoutControls, useSolifynCheckoutEmbedControls };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { useCheckoutEmbedControls } from '@whop/checkout/react';
|
|
3
|
+
export { useCheckoutEmbedControls } from '@whop/checkout/react';
|
|
4
|
+
|
|
5
|
+
declare global {
|
|
6
|
+
interface Window {
|
|
7
|
+
SolifynEngine?: any;
|
|
8
|
+
UnthorEngine?: any;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
interface SolifynCheckoutLabels {
|
|
12
|
+
initializing?: string;
|
|
13
|
+
processing?: string;
|
|
14
|
+
payNow?: string;
|
|
15
|
+
secured?: string;
|
|
16
|
+
pciDSS?: string;
|
|
17
|
+
orderProcessedBy?: string;
|
|
18
|
+
privacy?: string;
|
|
19
|
+
terms?: string;
|
|
20
|
+
}
|
|
21
|
+
interface SolifynCheckoutProps {
|
|
22
|
+
sessionId?: string;
|
|
23
|
+
membershipId?: string;
|
|
24
|
+
licenseId?: string;
|
|
25
|
+
theme?: 'light' | 'dark' | 'system';
|
|
26
|
+
environment?: 'production' | 'sandbox';
|
|
27
|
+
prefill?: any;
|
|
28
|
+
labels?: SolifynCheckoutLabels;
|
|
29
|
+
hideEmail?: boolean;
|
|
30
|
+
disableEmail?: boolean;
|
|
31
|
+
hideAddressForm?: boolean;
|
|
32
|
+
hideSubmitButton?: boolean;
|
|
33
|
+
onStateChange?: (state: any) => void;
|
|
34
|
+
onComplete?: (id: string, extra?: any) => void;
|
|
35
|
+
onAddressValidationError?: (error: any) => void;
|
|
36
|
+
onCurrenciesAvailable?: (snapshot: any) => void;
|
|
37
|
+
onCurrencyChanged?: (event: any) => void;
|
|
38
|
+
[key: string]: any;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Custom Embedded Checkout component for Solifyn.
|
|
42
|
+
* Wraps CheckoutEmbed with fully customized Solifyn branding, masking logic, and visual assets.
|
|
43
|
+
*/
|
|
44
|
+
declare const SolifynCheckout: react.ForwardRefExoticComponent<Omit<SolifynCheckoutProps, "ref"> & react.RefAttributes<any>>;
|
|
45
|
+
declare const useSolifynCheckoutControls: typeof useCheckoutEmbedControls;
|
|
46
|
+
declare const SolifynCheckoutEmbed: react.ForwardRefExoticComponent<Omit<SolifynCheckoutProps, "ref"> & react.RefAttributes<any>>;
|
|
47
|
+
type SolifynCheckoutEmbedProps = SolifynCheckoutProps;
|
|
48
|
+
type SolifynCheckoutEmbedLabels = SolifynCheckoutLabels;
|
|
49
|
+
declare const useSolifynCheckoutEmbedControls: typeof useCheckoutEmbedControls;
|
|
50
|
+
|
|
51
|
+
export { SolifynCheckout, SolifynCheckoutEmbed, type SolifynCheckoutEmbedLabels, type SolifynCheckoutEmbedProps, type SolifynCheckoutLabels, type SolifynCheckoutProps, useSolifynCheckoutControls, useSolifynCheckoutEmbedControls };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
SolifynCheckout: () => SolifynCheckout,
|
|
24
|
+
SolifynCheckoutEmbed: () => SolifynCheckoutEmbed,
|
|
25
|
+
useCheckoutEmbedControls: () => import_react2.useCheckoutEmbedControls,
|
|
26
|
+
useSolifynCheckoutControls: () => useSolifynCheckoutControls,
|
|
27
|
+
useSolifynCheckoutEmbedControls: () => useSolifynCheckoutEmbedControls
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(index_exports);
|
|
30
|
+
|
|
31
|
+
// src/checkout.tsx
|
|
32
|
+
var import_react = require("react");
|
|
33
|
+
var import_react2 = require("@whop/checkout/react");
|
|
34
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
+
var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
36
|
+
"svg",
|
|
37
|
+
{
|
|
38
|
+
className: "animate-spin h-8 w-8 text-zinc-400 dark:text-zinc-600",
|
|
39
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
40
|
+
fill: "none",
|
|
41
|
+
viewBox: "0 0 24 24",
|
|
42
|
+
children: [
|
|
43
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
44
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
45
|
+
"path",
|
|
46
|
+
{
|
|
47
|
+
className: "opacity-75",
|
|
48
|
+
fill: "currentColor",
|
|
49
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
50
|
+
}
|
|
51
|
+
)
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
var MiniSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
56
|
+
"svg",
|
|
57
|
+
{
|
|
58
|
+
className: "animate-spin h-4 w-4 text-current",
|
|
59
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
60
|
+
fill: "none",
|
|
61
|
+
viewBox: "0 0 24 24",
|
|
62
|
+
children: [
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
"path",
|
|
66
|
+
{
|
|
67
|
+
className: "opacity-75",
|
|
68
|
+
fill: "currentColor",
|
|
69
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
var defaultLabels = {
|
|
76
|
+
initializing: "Initializing checkout...",
|
|
77
|
+
processing: "Processing...",
|
|
78
|
+
payNow: "Pay now",
|
|
79
|
+
secured: "Secured payment",
|
|
80
|
+
pciDSS: "PCI-DSS Compliant",
|
|
81
|
+
orderProcessedBy: "Order processed by solifyn.com",
|
|
82
|
+
privacy: "Privacy Policy",
|
|
83
|
+
terms: "Terms of Service"
|
|
84
|
+
};
|
|
85
|
+
var SolifynCheckout = (0, import_react.forwardRef)(({
|
|
86
|
+
labels: customLabels,
|
|
87
|
+
environment = "production",
|
|
88
|
+
onStateChange,
|
|
89
|
+
theme = "light",
|
|
90
|
+
hideEmail = false,
|
|
91
|
+
hideAddressForm = false,
|
|
92
|
+
hideSubmitButton = false,
|
|
93
|
+
...props
|
|
94
|
+
}, ref) => {
|
|
95
|
+
const mergedLabels = { ...defaultLabels, ...customLabels };
|
|
96
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
|
|
97
|
+
const internalRef = (0, import_react2.useCheckoutEmbedControls)();
|
|
98
|
+
(0, import_react.useImperativeHandle)(ref, () => ({
|
|
99
|
+
submit: () => internalRef.current?.submit(),
|
|
100
|
+
getEmail: () => internalRef.current?.getEmail(),
|
|
101
|
+
setEmail: (email) => internalRef.current?.setEmail(email),
|
|
102
|
+
getAddress: () => internalRef.current?.getAddress(),
|
|
103
|
+
setAddress: (address) => internalRef.current?.setAddress(address),
|
|
104
|
+
getAvailableCurrencies: () => internalRef.current?.getAvailableCurrencies(),
|
|
105
|
+
setDisplayCurrency: (currency) => internalRef.current?.setDisplayCurrency(currency)
|
|
106
|
+
}));
|
|
107
|
+
const handlePayNow = () => {
|
|
108
|
+
setIsSubmitting(true);
|
|
109
|
+
internalRef.current?.submit();
|
|
110
|
+
};
|
|
111
|
+
const handleStateChange = (state) => {
|
|
112
|
+
if (state === "loading") {
|
|
113
|
+
setIsSubmitting(true);
|
|
114
|
+
} else {
|
|
115
|
+
setIsSubmitting(false);
|
|
116
|
+
}
|
|
117
|
+
if (onStateChange) {
|
|
118
|
+
onStateChange(state);
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full h-full min-h-[500px] relative group/checkout overflow-hidden pb-32 solifyn-checkout-container", children: [
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
|
|
123
|
+
@keyframes solifynFadeInRight {
|
|
124
|
+
from { opacity: 0; transform: translateX(20px); }
|
|
125
|
+
to { opacity: 1; transform: translateX(0); }
|
|
126
|
+
}
|
|
127
|
+
@keyframes solifynFadeIn {
|
|
128
|
+
from { opacity: 0; }
|
|
129
|
+
to { opacity: 1; }
|
|
130
|
+
}
|
|
131
|
+
.solifyn-checkout-container {
|
|
132
|
+
animation: solifynFadeInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
133
|
+
}
|
|
134
|
+
.solifyn-branding-overlay {
|
|
135
|
+
animation: solifynFadeIn 0.7s ease-out forwards;
|
|
136
|
+
}
|
|
137
|
+
.fui-Text.fui-r-size-1:has(.fui-Strong),
|
|
138
|
+
.fui-Text:has(> [class*="fui-Strong"]),
|
|
139
|
+
div[class*="items-center"][class*="justify-center"] > .fui-Text:last-child,
|
|
140
|
+
.whop-checkout-wrapper iframe {
|
|
141
|
+
border-radius: 24px !important;
|
|
142
|
+
}
|
|
143
|
+
` }),
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
145
|
+
import_react2.WhopCheckoutEmbed,
|
|
146
|
+
{
|
|
147
|
+
ref: internalRef,
|
|
148
|
+
onStateChange: handleStateChange,
|
|
149
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full flex flex-col items-center justify-center py-20", children: [
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}) }),
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-zinc-650 dark:text-zinc-400 text-sm tracking-tight", children: mergedLabels.initializing })
|
|
152
|
+
] }),
|
|
153
|
+
hideTermsAndConditions: true,
|
|
154
|
+
hideEmail,
|
|
155
|
+
hideAddressForm,
|
|
156
|
+
hideSubmitButton: true,
|
|
157
|
+
theme,
|
|
158
|
+
environment,
|
|
159
|
+
styles: {
|
|
160
|
+
container: {
|
|
161
|
+
paddingLeft: 0,
|
|
162
|
+
paddingRight: 0,
|
|
163
|
+
paddingTop: 0,
|
|
164
|
+
paddingBottom: 0
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
...props
|
|
168
|
+
}
|
|
169
|
+
) }),
|
|
170
|
+
!hideSubmitButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "-mt-8 flex flex-col items-center relative z-10", children: [
|
|
171
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute -top-4 left-0 right-0 h-12 bg-white dark:bg-zinc-950 pointer-events-none" }),
|
|
172
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
173
|
+
"button",
|
|
174
|
+
{
|
|
175
|
+
type: "button",
|
|
176
|
+
disabled: isSubmitting,
|
|
177
|
+
onClick: handlePayNow,
|
|
178
|
+
className: "w-full group/btn relative mt-2 overflow-hidden h-10 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-lg transition-all disabled:opacity-70 disabled:cursor-not-allowed",
|
|
179
|
+
children: [
|
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-white/10 opacity-0 group-hover/btn:opacity-100 transition-opacity" }),
|
|
181
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative flex items-center font-semibold justify-center gap-3 text-sm", children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
182
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MiniSpinner, {}),
|
|
183
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tracking-tight", children: mergedLabels.processing })
|
|
184
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tracking-tight", children: mergedLabels.payNow }) })
|
|
185
|
+
]
|
|
186
|
+
}
|
|
187
|
+
)
|
|
188
|
+
] }),
|
|
189
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute mt-8 left-0 right-0 h-[75px] bg-white dark:bg-zinc-950 flex flex-col items-center justify-end pointer-events-none select-none pb-4 px-6 text-center solifyn-branding-overlay", children: [
|
|
190
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-zinc-600 dark:text-zinc-400 leading-normal max-w-md mb-2.5 text-xs", children: "Order processed via partner Merchant of Record. Powered by solifyn.com" }),
|
|
191
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 text-zinc-500 dark:text-zinc-400 tracking-tight text-xs", children: [
|
|
192
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Solifyn" }),
|
|
193
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-0.5 h-0.5 rounded-full bg-gray-400" }),
|
|
194
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Privacy Policy" }),
|
|
195
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-0.5 h-0.5 rounded-full bg-gray-400" }),
|
|
196
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Terms of Service" })
|
|
197
|
+
] })
|
|
198
|
+
] })
|
|
199
|
+
] });
|
|
200
|
+
});
|
|
201
|
+
SolifynCheckout.displayName = "SolifynCheckout";
|
|
202
|
+
var useSolifynCheckoutControls = import_react2.useCheckoutEmbedControls;
|
|
203
|
+
var SolifynCheckoutEmbed = SolifynCheckout;
|
|
204
|
+
var useSolifynCheckoutEmbedControls = useSolifynCheckoutControls;
|
|
205
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
206
|
+
0 && (module.exports = {
|
|
207
|
+
SolifynCheckout,
|
|
208
|
+
SolifynCheckoutEmbed,
|
|
209
|
+
useCheckoutEmbedControls,
|
|
210
|
+
useSolifynCheckoutControls,
|
|
211
|
+
useSolifynCheckoutEmbedControls
|
|
212
|
+
});
|
|
213
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/checkout.tsx"],"sourcesContent":["export * from './checkout';\n","import { forwardRef, useState, useImperativeHandle } from 'react';\nimport { WhopCheckoutEmbed, useCheckoutEmbedControls } from '@whop/checkout/react';\n\ndeclare global {\n interface Window {\n SolifynEngine?: any;\n UnthorEngine?: any;\n }\n}\n\n// Spinner component for loading states\nconst Spinner = () => (\n <svg\n className=\"animate-spin h-8 w-8 text-zinc-400 dark:text-zinc-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n);\n\n// Mini spinner component for the button\nconst MiniSpinner = () => (\n <svg\n className=\"animate-spin h-4 w-4 text-current\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n);\n\nexport interface SolifynCheckoutLabels {\n initializing?: string;\n processing?: string;\n payNow?: string;\n secured?: string;\n pciDSS?: string;\n orderProcessedBy?: string;\n privacy?: string;\n terms?: string;\n}\n\nconst defaultLabels: Required<SolifynCheckoutLabels> = {\n initializing: \"Initializing checkout...\",\n processing: \"Processing...\",\n payNow: \"Pay now\",\n secured: \"Secured payment\",\n pciDSS: \"PCI-DSS Compliant\",\n orderProcessedBy: \"Order processed by solifyn.com\",\n privacy: \"Privacy Policy\",\n terms: \"Terms of Service\"\n};\n\nexport interface SolifynCheckoutProps {\n sessionId?: string;\n membershipId?: string;\n licenseId?: string;\n theme?: 'light' | 'dark' | 'system';\n environment?: 'production' | 'sandbox';\n prefill?: any;\n labels?: SolifynCheckoutLabels;\n hideEmail?: boolean;\n disableEmail?: boolean;\n hideAddressForm?: boolean;\n hideSubmitButton?: boolean;\n onStateChange?: (state: any) => void;\n onComplete?: (id: string, extra?: any) => void;\n onAddressValidationError?: (error: any) => void;\n onCurrenciesAvailable?: (snapshot: any) => void;\n onCurrencyChanged?: (event: any) => void;\n [key: string]: any;\n}\n\n/**\n * Custom Embedded Checkout component for Solifyn.\n * Wraps CheckoutEmbed with fully customized Solifyn branding, masking logic, and visual assets.\n */\nexport const SolifynCheckout = forwardRef<any, SolifynCheckoutProps>(({\n labels: customLabels,\n environment = 'production',\n onStateChange,\n theme = 'light',\n hideEmail = false,\n hideAddressForm = false,\n hideSubmitButton = false,\n ...props\n}, ref) => {\n const mergedLabels = { ...defaultLabels, ...customLabels };\n const [isSubmitting, setIsSubmitting] = useState(false);\n const internalRef = useCheckoutEmbedControls();\n\n // Expose control ref to external consumers\n useImperativeHandle(ref, () => ({\n submit: () => internalRef.current?.submit(),\n getEmail: () => internalRef.current?.getEmail(),\n setEmail: (email: string) => internalRef.current?.setEmail(email),\n getAddress: () => internalRef.current?.getAddress(),\n setAddress: (address: any) => internalRef.current?.setAddress(address),\n getAvailableCurrencies: () => (internalRef.current as any)?.getAvailableCurrencies(),\n setDisplayCurrency: (currency: string) => (internalRef.current as any)?.setDisplayCurrency(currency),\n }));\n\n const handlePayNow = () => {\n setIsSubmitting(true);\n internalRef.current?.submit();\n };\n\n const handleStateChange = (state: any) => {\n if (state === 'loading') {\n setIsSubmitting(true);\n } else {\n setIsSubmitting(false);\n }\n if (onStateChange) {\n onStateChange(state);\n }\n };\n\n return (\n <div className=\"w-full h-full min-h-[500px] relative group/checkout overflow-hidden pb-32 solifyn-checkout-container\">\n <style>{`\n @keyframes solifynFadeInRight {\n from { opacity: 0; transform: translateX(20px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes solifynFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .solifyn-checkout-container {\n animation: solifynFadeInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n .solifyn-branding-overlay {\n animation: solifynFadeIn 0.7s ease-out forwards;\n }\n .fui-Text.fui-r-size-1:has(.fui-Strong),\n .fui-Text:has(> [class*=\"fui-Strong\"]),\n div[class*=\"items-center\"][class*=\"justify-center\"] > .fui-Text:last-child,\n .whop-checkout-wrapper iframe {\n border-radius: 24px !important;\n }\n `}</style>\n\n <div className=\"mx-2\">\n <WhopCheckoutEmbed\n ref={internalRef}\n onStateChange={handleStateChange}\n fallback={\n <div className=\"w-full flex flex-col items-center justify-center py-20\">\n <div className=\"mb-4\">\n <Spinner />\n </div>\n <p className=\"text-zinc-650 dark:text-zinc-400 text-sm tracking-tight\">{mergedLabels.initializing}</p>\n </div>\n }\n hideTermsAndConditions={true}\n hideEmail={hideEmail}\n hideAddressForm={hideAddressForm}\n hideSubmitButton={true}\n theme={theme as any}\n environment={environment}\n styles={{\n container: {\n paddingLeft: 0,\n paddingRight: 0,\n paddingTop: 0,\n paddingBottom: 0,\n },\n }}\n {...(props as any)}\n />\n </div>\n\n {!hideSubmitButton && (\n <div className=\"-mt-8 flex flex-col items-center relative z-10\">\n <div className=\"absolute -top-4 left-0 right-0 h-12 bg-white dark:bg-zinc-950 pointer-events-none\" />\n\n <button\n type=\"button\"\n disabled={isSubmitting}\n onClick={handlePayNow}\n className=\"w-full group/btn relative mt-2 overflow-hidden h-10 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-lg transition-all disabled:opacity-70 disabled:cursor-not-allowed\"\n >\n <div className=\"absolute inset-0 bg-white/10 opacity-0 group-hover/btn:opacity-100 transition-opacity\" />\n <div className=\"relative flex items-center font-semibold justify-center gap-3 text-sm\">\n {isSubmitting ? (\n <>\n <MiniSpinner />\n <span className=\"tracking-tight\">{mergedLabels.processing}</span>\n </>\n ) : (\n <span className=\"tracking-tight\">{mergedLabels.payNow}</span>\n )}\n </div>\n </button>\n </div>\n )}\n\n <div className=\"absolute mt-8 left-0 right-0 h-[75px] bg-white dark:bg-zinc-950 flex flex-col items-center justify-end pointer-events-none select-none pb-4 px-6 text-center solifyn-branding-overlay\">\n <p className=\"text-zinc-600 dark:text-zinc-400 leading-normal max-w-md mb-2.5 text-xs\">\n Order processed via partner Merchant of Record. Powered by solifyn.com\n </p>\n <div className=\"flex items-center gap-3 text-zinc-500 dark:text-zinc-400 tracking-tight text-xs\">\n <span>Solifyn</span>\n <span className=\"w-0.5 h-0.5 rounded-full bg-gray-400\" />\n <span>Privacy Policy</span>\n <span className=\"w-0.5 h-0.5 rounded-full bg-gray-400\" />\n <span>Terms of Service</span>\n </div>\n </div>\n </div>\n );\n});\n\nSolifynCheckout.displayName = 'SolifynCheckout';\n\nexport const useSolifynCheckoutControls = useCheckoutEmbedControls;\n\n// Backward-compatible aliases\nexport const SolifynCheckoutEmbed = SolifynCheckout;\nexport type SolifynCheckoutEmbedProps = SolifynCheckoutProps;\nexport type SolifynCheckoutEmbedLabels = SolifynCheckoutLabels;\nexport const useSolifynCheckoutEmbedControls = useSolifynCheckoutControls;\n\nexport { useCheckoutEmbedControls };\n"],"mappings":"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","names":["import_react"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
// src/checkout.tsx
|
|
2
|
+
import { forwardRef, useState, useImperativeHandle } from "react";
|
|
3
|
+
import { WhopCheckoutEmbed, useCheckoutEmbedControls } from "@whop/checkout/react";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
var Spinner = () => /* @__PURE__ */ jsxs(
|
|
6
|
+
"svg",
|
|
7
|
+
{
|
|
8
|
+
className: "animate-spin h-8 w-8 text-zinc-400 dark:text-zinc-600",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
fill: "none",
|
|
11
|
+
viewBox: "0 0 24 24",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
14
|
+
/* @__PURE__ */ jsx(
|
|
15
|
+
"path",
|
|
16
|
+
{
|
|
17
|
+
className: "opacity-75",
|
|
18
|
+
fill: "currentColor",
|
|
19
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
20
|
+
}
|
|
21
|
+
)
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
var MiniSpinner = () => /* @__PURE__ */ jsxs(
|
|
26
|
+
"svg",
|
|
27
|
+
{
|
|
28
|
+
className: "animate-spin h-4 w-4 text-current",
|
|
29
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
30
|
+
fill: "none",
|
|
31
|
+
viewBox: "0 0 24 24",
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
34
|
+
/* @__PURE__ */ jsx(
|
|
35
|
+
"path",
|
|
36
|
+
{
|
|
37
|
+
className: "opacity-75",
|
|
38
|
+
fill: "currentColor",
|
|
39
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
40
|
+
}
|
|
41
|
+
)
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
var defaultLabels = {
|
|
46
|
+
initializing: "Initializing checkout...",
|
|
47
|
+
processing: "Processing...",
|
|
48
|
+
payNow: "Pay now",
|
|
49
|
+
secured: "Secured payment",
|
|
50
|
+
pciDSS: "PCI-DSS Compliant",
|
|
51
|
+
orderProcessedBy: "Order processed by solifyn.com",
|
|
52
|
+
privacy: "Privacy Policy",
|
|
53
|
+
terms: "Terms of Service"
|
|
54
|
+
};
|
|
55
|
+
var SolifynCheckout = forwardRef(({
|
|
56
|
+
labels: customLabels,
|
|
57
|
+
environment = "production",
|
|
58
|
+
onStateChange,
|
|
59
|
+
theme = "light",
|
|
60
|
+
hideEmail = false,
|
|
61
|
+
hideAddressForm = false,
|
|
62
|
+
hideSubmitButton = false,
|
|
63
|
+
...props
|
|
64
|
+
}, ref) => {
|
|
65
|
+
const mergedLabels = { ...defaultLabels, ...customLabels };
|
|
66
|
+
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
67
|
+
const internalRef = useCheckoutEmbedControls();
|
|
68
|
+
useImperativeHandle(ref, () => ({
|
|
69
|
+
submit: () => internalRef.current?.submit(),
|
|
70
|
+
getEmail: () => internalRef.current?.getEmail(),
|
|
71
|
+
setEmail: (email) => internalRef.current?.setEmail(email),
|
|
72
|
+
getAddress: () => internalRef.current?.getAddress(),
|
|
73
|
+
setAddress: (address) => internalRef.current?.setAddress(address),
|
|
74
|
+
getAvailableCurrencies: () => internalRef.current?.getAvailableCurrencies(),
|
|
75
|
+
setDisplayCurrency: (currency) => internalRef.current?.setDisplayCurrency(currency)
|
|
76
|
+
}));
|
|
77
|
+
const handlePayNow = () => {
|
|
78
|
+
setIsSubmitting(true);
|
|
79
|
+
internalRef.current?.submit();
|
|
80
|
+
};
|
|
81
|
+
const handleStateChange = (state) => {
|
|
82
|
+
if (state === "loading") {
|
|
83
|
+
setIsSubmitting(true);
|
|
84
|
+
} else {
|
|
85
|
+
setIsSubmitting(false);
|
|
86
|
+
}
|
|
87
|
+
if (onStateChange) {
|
|
88
|
+
onStateChange(state);
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
return /* @__PURE__ */ jsxs("div", { className: "w-full h-full min-h-[500px] relative group/checkout overflow-hidden pb-32 solifyn-checkout-container", children: [
|
|
92
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
93
|
+
@keyframes solifynFadeInRight {
|
|
94
|
+
from { opacity: 0; transform: translateX(20px); }
|
|
95
|
+
to { opacity: 1; transform: translateX(0); }
|
|
96
|
+
}
|
|
97
|
+
@keyframes solifynFadeIn {
|
|
98
|
+
from { opacity: 0; }
|
|
99
|
+
to { opacity: 1; }
|
|
100
|
+
}
|
|
101
|
+
.solifyn-checkout-container {
|
|
102
|
+
animation: solifynFadeInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
103
|
+
}
|
|
104
|
+
.solifyn-branding-overlay {
|
|
105
|
+
animation: solifynFadeIn 0.7s ease-out forwards;
|
|
106
|
+
}
|
|
107
|
+
.fui-Text.fui-r-size-1:has(.fui-Strong),
|
|
108
|
+
.fui-Text:has(> [class*="fui-Strong"]),
|
|
109
|
+
div[class*="items-center"][class*="justify-center"] > .fui-Text:last-child,
|
|
110
|
+
.whop-checkout-wrapper iframe {
|
|
111
|
+
border-radius: 24px !important;
|
|
112
|
+
}
|
|
113
|
+
` }),
|
|
114
|
+
/* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsx(
|
|
115
|
+
WhopCheckoutEmbed,
|
|
116
|
+
{
|
|
117
|
+
ref: internalRef,
|
|
118
|
+
onStateChange: handleStateChange,
|
|
119
|
+
fallback: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center justify-center py-20", children: [
|
|
120
|
+
/* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(Spinner, {}) }),
|
|
121
|
+
/* @__PURE__ */ jsx("p", { className: "text-zinc-650 dark:text-zinc-400 text-sm tracking-tight", children: mergedLabels.initializing })
|
|
122
|
+
] }),
|
|
123
|
+
hideTermsAndConditions: true,
|
|
124
|
+
hideEmail,
|
|
125
|
+
hideAddressForm,
|
|
126
|
+
hideSubmitButton: true,
|
|
127
|
+
theme,
|
|
128
|
+
environment,
|
|
129
|
+
styles: {
|
|
130
|
+
container: {
|
|
131
|
+
paddingLeft: 0,
|
|
132
|
+
paddingRight: 0,
|
|
133
|
+
paddingTop: 0,
|
|
134
|
+
paddingBottom: 0
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
...props
|
|
138
|
+
}
|
|
139
|
+
) }),
|
|
140
|
+
!hideSubmitButton && /* @__PURE__ */ jsxs("div", { className: "-mt-8 flex flex-col items-center relative z-10", children: [
|
|
141
|
+
/* @__PURE__ */ jsx("div", { className: "absolute -top-4 left-0 right-0 h-12 bg-white dark:bg-zinc-950 pointer-events-none" }),
|
|
142
|
+
/* @__PURE__ */ jsxs(
|
|
143
|
+
"button",
|
|
144
|
+
{
|
|
145
|
+
type: "button",
|
|
146
|
+
disabled: isSubmitting,
|
|
147
|
+
onClick: handlePayNow,
|
|
148
|
+
className: "w-full group/btn relative mt-2 overflow-hidden h-10 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-lg transition-all disabled:opacity-70 disabled:cursor-not-allowed",
|
|
149
|
+
children: [
|
|
150
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/10 opacity-0 group-hover/btn:opacity-100 transition-opacity" }),
|
|
151
|
+
/* @__PURE__ */ jsx("div", { className: "relative flex items-center font-semibold justify-center gap-3 text-sm", children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
152
|
+
/* @__PURE__ */ jsx(MiniSpinner, {}),
|
|
153
|
+
/* @__PURE__ */ jsx("span", { className: "tracking-tight", children: mergedLabels.processing })
|
|
154
|
+
] }) : /* @__PURE__ */ jsx("span", { className: "tracking-tight", children: mergedLabels.payNow }) })
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
] }),
|
|
159
|
+
/* @__PURE__ */ jsxs("div", { className: "absolute mt-8 left-0 right-0 h-[75px] bg-white dark:bg-zinc-950 flex flex-col items-center justify-end pointer-events-none select-none pb-4 px-6 text-center solifyn-branding-overlay", children: [
|
|
160
|
+
/* @__PURE__ */ jsx("p", { className: "text-zinc-600 dark:text-zinc-400 leading-normal max-w-md mb-2.5 text-xs", children: "Order processed via partner Merchant of Record. Powered by solifyn.com" }),
|
|
161
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-zinc-500 dark:text-zinc-400 tracking-tight text-xs", children: [
|
|
162
|
+
/* @__PURE__ */ jsx("span", { children: "Solifyn" }),
|
|
163
|
+
/* @__PURE__ */ jsx("span", { className: "w-0.5 h-0.5 rounded-full bg-gray-400" }),
|
|
164
|
+
/* @__PURE__ */ jsx("span", { children: "Privacy Policy" }),
|
|
165
|
+
/* @__PURE__ */ jsx("span", { className: "w-0.5 h-0.5 rounded-full bg-gray-400" }),
|
|
166
|
+
/* @__PURE__ */ jsx("span", { children: "Terms of Service" })
|
|
167
|
+
] })
|
|
168
|
+
] })
|
|
169
|
+
] });
|
|
170
|
+
});
|
|
171
|
+
SolifynCheckout.displayName = "SolifynCheckout";
|
|
172
|
+
var useSolifynCheckoutControls = useCheckoutEmbedControls;
|
|
173
|
+
var SolifynCheckoutEmbed = SolifynCheckout;
|
|
174
|
+
var useSolifynCheckoutEmbedControls = useSolifynCheckoutControls;
|
|
175
|
+
export {
|
|
176
|
+
SolifynCheckout,
|
|
177
|
+
SolifynCheckoutEmbed,
|
|
178
|
+
useCheckoutEmbedControls,
|
|
179
|
+
useSolifynCheckoutControls,
|
|
180
|
+
useSolifynCheckoutEmbedControls
|
|
181
|
+
};
|
|
182
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkout.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle } from 'react';\nimport { WhopCheckoutEmbed, useCheckoutEmbedControls } from '@whop/checkout/react';\n\ndeclare global {\n interface Window {\n SolifynEngine?: any;\n UnthorEngine?: any;\n }\n}\n\n// Spinner component for loading states\nconst Spinner = () => (\n <svg\n className=\"animate-spin h-8 w-8 text-zinc-400 dark:text-zinc-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n);\n\n// Mini spinner component for the button\nconst MiniSpinner = () => (\n <svg\n className=\"animate-spin h-4 w-4 text-current\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n);\n\nexport interface SolifynCheckoutLabels {\n initializing?: string;\n processing?: string;\n payNow?: string;\n secured?: string;\n pciDSS?: string;\n orderProcessedBy?: string;\n privacy?: string;\n terms?: string;\n}\n\nconst defaultLabels: Required<SolifynCheckoutLabels> = {\n initializing: \"Initializing checkout...\",\n processing: \"Processing...\",\n payNow: \"Pay now\",\n secured: \"Secured payment\",\n pciDSS: \"PCI-DSS Compliant\",\n orderProcessedBy: \"Order processed by solifyn.com\",\n privacy: \"Privacy Policy\",\n terms: \"Terms of Service\"\n};\n\nexport interface SolifynCheckoutProps {\n sessionId?: string;\n membershipId?: string;\n licenseId?: string;\n theme?: 'light' | 'dark' | 'system';\n environment?: 'production' | 'sandbox';\n prefill?: any;\n labels?: SolifynCheckoutLabels;\n hideEmail?: boolean;\n disableEmail?: boolean;\n hideAddressForm?: boolean;\n hideSubmitButton?: boolean;\n onStateChange?: (state: any) => void;\n onComplete?: (id: string, extra?: any) => void;\n onAddressValidationError?: (error: any) => void;\n onCurrenciesAvailable?: (snapshot: any) => void;\n onCurrencyChanged?: (event: any) => void;\n [key: string]: any;\n}\n\n/**\n * Custom Embedded Checkout component for Solifyn.\n * Wraps CheckoutEmbed with fully customized Solifyn branding, masking logic, and visual assets.\n */\nexport const SolifynCheckout = forwardRef<any, SolifynCheckoutProps>(({\n labels: customLabels,\n environment = 'production',\n onStateChange,\n theme = 'light',\n hideEmail = false,\n hideAddressForm = false,\n hideSubmitButton = false,\n ...props\n}, ref) => {\n const mergedLabels = { ...defaultLabels, ...customLabels };\n const [isSubmitting, setIsSubmitting] = useState(false);\n const internalRef = useCheckoutEmbedControls();\n\n // Expose control ref to external consumers\n useImperativeHandle(ref, () => ({\n submit: () => internalRef.current?.submit(),\n getEmail: () => internalRef.current?.getEmail(),\n setEmail: (email: string) => internalRef.current?.setEmail(email),\n getAddress: () => internalRef.current?.getAddress(),\n setAddress: (address: any) => internalRef.current?.setAddress(address),\n getAvailableCurrencies: () => (internalRef.current as any)?.getAvailableCurrencies(),\n setDisplayCurrency: (currency: string) => (internalRef.current as any)?.setDisplayCurrency(currency),\n }));\n\n const handlePayNow = () => {\n setIsSubmitting(true);\n internalRef.current?.submit();\n };\n\n const handleStateChange = (state: any) => {\n if (state === 'loading') {\n setIsSubmitting(true);\n } else {\n setIsSubmitting(false);\n }\n if (onStateChange) {\n onStateChange(state);\n }\n };\n\n return (\n <div className=\"w-full h-full min-h-[500px] relative group/checkout overflow-hidden pb-32 solifyn-checkout-container\">\n <style>{`\n @keyframes solifynFadeInRight {\n from { opacity: 0; transform: translateX(20px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes solifynFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .solifyn-checkout-container {\n animation: solifynFadeInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n }\n .solifyn-branding-overlay {\n animation: solifynFadeIn 0.7s ease-out forwards;\n }\n .fui-Text.fui-r-size-1:has(.fui-Strong),\n .fui-Text:has(> [class*=\"fui-Strong\"]),\n div[class*=\"items-center\"][class*=\"justify-center\"] > .fui-Text:last-child,\n .whop-checkout-wrapper iframe {\n border-radius: 24px !important;\n }\n `}</style>\n\n <div className=\"mx-2\">\n <WhopCheckoutEmbed\n ref={internalRef}\n onStateChange={handleStateChange}\n fallback={\n <div className=\"w-full flex flex-col items-center justify-center py-20\">\n <div className=\"mb-4\">\n <Spinner />\n </div>\n <p className=\"text-zinc-650 dark:text-zinc-400 text-sm tracking-tight\">{mergedLabels.initializing}</p>\n </div>\n }\n hideTermsAndConditions={true}\n hideEmail={hideEmail}\n hideAddressForm={hideAddressForm}\n hideSubmitButton={true}\n theme={theme as any}\n environment={environment}\n styles={{\n container: {\n paddingLeft: 0,\n paddingRight: 0,\n paddingTop: 0,\n paddingBottom: 0,\n },\n }}\n {...(props as any)}\n />\n </div>\n\n {!hideSubmitButton && (\n <div className=\"-mt-8 flex flex-col items-center relative z-10\">\n <div className=\"absolute -top-4 left-0 right-0 h-12 bg-white dark:bg-zinc-950 pointer-events-none\" />\n\n <button\n type=\"button\"\n disabled={isSubmitting}\n onClick={handlePayNow}\n className=\"w-full group/btn relative mt-2 overflow-hidden h-10 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-lg transition-all disabled:opacity-70 disabled:cursor-not-allowed\"\n >\n <div className=\"absolute inset-0 bg-white/10 opacity-0 group-hover/btn:opacity-100 transition-opacity\" />\n <div className=\"relative flex items-center font-semibold justify-center gap-3 text-sm\">\n {isSubmitting ? (\n <>\n <MiniSpinner />\n <span className=\"tracking-tight\">{mergedLabels.processing}</span>\n </>\n ) : (\n <span className=\"tracking-tight\">{mergedLabels.payNow}</span>\n )}\n </div>\n </button>\n </div>\n )}\n\n <div className=\"absolute mt-8 left-0 right-0 h-[75px] bg-white dark:bg-zinc-950 flex flex-col items-center justify-end pointer-events-none select-none pb-4 px-6 text-center solifyn-branding-overlay\">\n <p className=\"text-zinc-600 dark:text-zinc-400 leading-normal max-w-md mb-2.5 text-xs\">\n Order processed via partner Merchant of Record. Powered by solifyn.com\n </p>\n <div className=\"flex items-center gap-3 text-zinc-500 dark:text-zinc-400 tracking-tight text-xs\">\n <span>Solifyn</span>\n <span className=\"w-0.5 h-0.5 rounded-full bg-gray-400\" />\n <span>Privacy Policy</span>\n <span className=\"w-0.5 h-0.5 rounded-full bg-gray-400\" />\n <span>Terms of Service</span>\n </div>\n </div>\n </div>\n );\n});\n\nSolifynCheckout.displayName = 'SolifynCheckout';\n\nexport const useSolifynCheckoutControls = useCheckoutEmbedControls;\n\n// Backward-compatible aliases\nexport const SolifynCheckoutEmbed = SolifynCheckout;\nexport type SolifynCheckoutEmbedProps = SolifynCheckoutProps;\nexport type SolifynCheckoutEmbedLabels = SolifynCheckoutLabels;\nexport const useSolifynCheckoutEmbedControls = useSolifynCheckoutControls;\n\nexport { useCheckoutEmbedControls };\n"],"mappings":"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","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@solifyn/react",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"description": "Solifyn React SDK with embedded checkout component and hooks",
|
|
8
|
+
"main": "./dist/index.js",
|
|
9
|
+
"module": "./dist/index.mjs",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"require": "./dist/index.js",
|
|
15
|
+
"import": "./dist/index.mjs"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist"
|
|
20
|
+
],
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "tsup",
|
|
23
|
+
"test": "vitest run"
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"@whop/checkout": "^0.0.53",
|
|
27
|
+
"@solifyn/core": "workspace:*"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
31
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"tsup": "^8.0.2",
|
|
35
|
+
"typescript": "^5.3.3",
|
|
36
|
+
"vitest": "^1.3.1",
|
|
37
|
+
"@types/react": "^19.0.0"
|
|
38
|
+
}
|
|
39
|
+
}
|