@v7-pay/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.
Files changed (3) hide show
  1. package/dist/index.js +41 -9
  2. package/dist/index.mjs +42 -10
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -102,12 +102,28 @@ function EmbeddedCheckout({ className, style }) {
102
102
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "EmbeddedCheckoutProvider is required" }) });
103
103
  }
104
104
  if (loading) {
105
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
105
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
106
106
  "div",
107
107
  {
108
108
  className,
109
- style: __spreadProps(__spreadValues({}, style), { display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }),
110
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Carregando checkout..." })
109
+ style: __spreadProps(__spreadValues({}, style), { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, minHeight: 400 }),
110
+ children: [
111
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
112
+ "div",
113
+ {
114
+ style: {
115
+ width: 32,
116
+ height: 32,
117
+ border: "3px solid #e5e7eb",
118
+ borderTopColor: "#3b82f6",
119
+ borderRadius: "50%",
120
+ animation: "v7-pay-spin 0.8s linear infinite"
121
+ }
122
+ }
123
+ ),
124
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes v7-pay-spin { to { transform: rotate(360deg); } }` }),
125
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#6b7280", fontSize: 14 }, children: "Carregando checkout..." })
126
+ ]
111
127
  }
112
128
  );
113
129
  }
@@ -120,14 +136,30 @@ function EmbeddedCheckout({ className, style }) {
120
136
  const base = opts.baseUrl.replace(/\/$/, "");
121
137
  const iframeSrc = `${base}/checkout/${sessionId}?embed=1`;
122
138
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
- "iframe",
139
+ "div",
124
140
  {
125
- ref: iframeRef,
126
- src: iframeSrc,
127
- title: "V7 Pay Checkout",
128
141
  className,
129
- style: __spreadValues({ width: "100%", minHeight: 500, border: "none" }, style),
130
- allow: "payment"
142
+ style: __spreadValues({
143
+ minWidth: 360,
144
+ width: "100%",
145
+ overflow: "hidden"
146
+ }, style),
147
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
148
+ "iframe",
149
+ {
150
+ ref: iframeRef,
151
+ src: iframeSrc,
152
+ title: "V7 Pay Checkout",
153
+ style: {
154
+ width: "100%",
155
+ minWidth: 360,
156
+ minHeight: 500,
157
+ border: "none",
158
+ display: "block"
159
+ },
160
+ allow: "payment"
161
+ }
162
+ )
131
163
  }
132
164
  );
133
165
  }
package/dist/index.mjs CHANGED
@@ -21,7 +21,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
21
 
22
22
  // src/index.tsx
23
23
  import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
24
- import { jsx } from "react/jsx-runtime";
24
+ import { jsx, jsxs } from "react/jsx-runtime";
25
25
  var EmbeddedCheckoutContext = createContext(null);
26
26
  function EmbeddedCheckoutProvider({
27
27
  options,
@@ -80,12 +80,28 @@ function EmbeddedCheckout({ className, style }) {
80
80
  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx("p", { children: "EmbeddedCheckoutProvider is required" }) });
81
81
  }
82
82
  if (loading) {
83
- return /* @__PURE__ */ jsx(
83
+ return /* @__PURE__ */ jsxs(
84
84
  "div",
85
85
  {
86
86
  className,
87
- style: __spreadProps(__spreadValues({}, style), { display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }),
88
- children: /* @__PURE__ */ jsx("span", { children: "Carregando checkout..." })
87
+ style: __spreadProps(__spreadValues({}, style), { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, minHeight: 400 }),
88
+ children: [
89
+ /* @__PURE__ */ jsx(
90
+ "div",
91
+ {
92
+ style: {
93
+ width: 32,
94
+ height: 32,
95
+ border: "3px solid #e5e7eb",
96
+ borderTopColor: "#3b82f6",
97
+ borderRadius: "50%",
98
+ animation: "v7-pay-spin 0.8s linear infinite"
99
+ }
100
+ }
101
+ ),
102
+ /* @__PURE__ */ jsx("style", { children: `@keyframes v7-pay-spin { to { transform: rotate(360deg); } }` }),
103
+ /* @__PURE__ */ jsx("span", { style: { color: "#6b7280", fontSize: 14 }, children: "Carregando checkout..." })
104
+ ]
89
105
  }
90
106
  );
91
107
  }
@@ -98,14 +114,30 @@ function EmbeddedCheckout({ className, style }) {
98
114
  const base = opts.baseUrl.replace(/\/$/, "");
99
115
  const iframeSrc = `${base}/checkout/${sessionId}?embed=1`;
100
116
  return /* @__PURE__ */ jsx(
101
- "iframe",
117
+ "div",
102
118
  {
103
- ref: iframeRef,
104
- src: iframeSrc,
105
- title: "V7 Pay Checkout",
106
119
  className,
107
- style: __spreadValues({ width: "100%", minHeight: 500, border: "none" }, style),
108
- allow: "payment"
120
+ style: __spreadValues({
121
+ minWidth: 360,
122
+ width: "100%",
123
+ overflow: "hidden"
124
+ }, style),
125
+ children: /* @__PURE__ */ jsx(
126
+ "iframe",
127
+ {
128
+ ref: iframeRef,
129
+ src: iframeSrc,
130
+ title: "V7 Pay Checkout",
131
+ style: {
132
+ width: "100%",
133
+ minWidth: 360,
134
+ minHeight: 500,
135
+ border: "none",
136
+ display: "block"
137
+ },
138
+ allow: "payment"
139
+ }
140
+ )
109
141
  }
110
142
  );
111
143
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@v7-pay/react",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "React components for embedding V7 Pay checkout (Stripe Embedded Checkout style)",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",