@coincircuit/checkout 0.2.0 → 0.2.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.
Files changed (6) hide show
  1. package/dist/{chunk-VYS76EOY.js → chunk-NLDQKWTU.js} +25 -19
  2. package/dist/index.cjs +25 -19
  3. package/dist/index.js +1 -1
  4. package/dist/react.cjs +25 -19
  5. package/dist/react.js +1 -1
  6. package/package.json +1 -1
package/dist/{chunk-VYS76EOY.js → chunk-NLDQKWTU.js} RENAMED
@@ -83,36 +83,36 @@ function injectStyles() {
83
83
  }
84
84
  #${OVERLAY_ID} .cc-modal {
85
85
  position: relative;
86
- width: 100%;
87
- max-width: 450px;
88
- height: 90vh;
89
- max-height: 700px;
86
+ width: min(600px, 96vw);
87
+ max-width: 600px;
88
+ height: min(88vh, 800px);
90
89
  border-radius: 16px;
91
- overflow: hidden;
92
90
  background: #fff;
93
91
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
94
92
  }
95
93
  #${OVERLAY_ID} .cc-close {
96
- position: absolute;
97
- top: 12px;
98
- right: 12px;
99
- z-index: 10;
100
- width: 32px;
101
- height: 32px;
94
+ position: fixed;
95
+ top: 16px;
96
+ right: 16px;
97
+ z-index: 1000000;
98
+ width: 36px;
99
+ height: 36px;
102
100
  border: none;
103
101
  border-radius: 50%;
104
- background: rgba(0, 0, 0, 0.5);
102
+ background: rgba(255, 255, 255, 0.15);
103
+ backdrop-filter: blur(8px);
105
104
  color: #fff;
106
- font-size: 18px;
105
+ font-size: 20px;
107
106
  line-height: 1;
108
107
  cursor: pointer;
109
108
  display: flex;
110
109
  align-items: center;
111
110
  justify-content: center;
112
- transition: background 0.15s;
111
+ transition: background 0.15s, transform 0.15s;
113
112
  }
114
113
  #${OVERLAY_ID} .cc-close:hover {
115
- background: rgba(0, 0, 0, 0.7);
114
+ background: rgba(255, 255, 255, 0.25);
115
+ transform: scale(1.1);
116
116
  }
117
117
  #${OVERLAY_ID} iframe {
118
118
  width: 100%;
@@ -138,11 +138,11 @@ function injectStyles() {
138
138
  animation: cc-spin 0.8s linear infinite;
139
139
  }
140
140
  @keyframes cc-spin { to { transform: rotate(360deg); } }
141
- @media (max-width: 480px) {
141
+ @media (max-width: 720px) {
142
142
  #${OVERLAY_ID} .cc-modal {
143
+ width: 100%;
143
144
  max-width: 100%;
144
- height: 100vh;
145
- max-height: 100vh;
145
+ height: 100dvh;
146
146
  border-radius: 0;
147
147
  }
148
148
  }
@@ -173,9 +173,15 @@ function createOverlay(checkoutUrl, onCloseClick) {
173
173
  iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
174
174
  iframe.setAttribute("title", "CoinCircuit Checkout");
175
175
  iframe.setAttribute("allow", "payment");
176
+ const closeBtn = document.createElement("button");
177
+ closeBtn.className = "cc-close";
178
+ closeBtn.setAttribute("aria-label", "Close checkout");
179
+ closeBtn.textContent = "\u2715";
180
+ closeBtn.addEventListener("click", onCloseClick);
176
181
  modal.appendChild(spinner);
177
182
  modal.appendChild(iframe);
178
183
  overlay.appendChild(modal);
184
+ overlay.appendChild(closeBtn);
179
185
  return { overlay, iframe };
180
186
  }
181
187
  function showOverlay(overlay) {
@@ -267,7 +273,7 @@ var CoinCircuitCheckout = class {
267
273
  this.overlay = overlay;
268
274
  this.loadTimeout = setTimeout(() => {
269
275
  showErrorToast(
270
- "Checkout failed to load. The checkout service may be unavailable or blocked by security policy."
276
+ "Checkout failed to load."
271
277
  );
272
278
  this.close();
273
279
  }, 15e3);
package/dist/index.cjs CHANGED
@@ -114,36 +114,36 @@ function injectStyles() {
114
114
  }
115
115
  #${OVERLAY_ID} .cc-modal {
116
116
  position: relative;
117
- width: 100%;
118
- max-width: 450px;
119
- height: 90vh;
120
- max-height: 700px;
117
+ width: min(600px, 96vw);
118
+ max-width: 600px;
119
+ height: min(88vh, 800px);
121
120
  border-radius: 16px;
122
- overflow: hidden;
123
121
  background: #fff;
124
122
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
125
123
  }
126
124
  #${OVERLAY_ID} .cc-close {
127
- position: absolute;
128
- top: 12px;
129
- right: 12px;
130
- z-index: 10;
131
- width: 32px;
132
- height: 32px;
125
+ position: fixed;
126
+ top: 16px;
127
+ right: 16px;
128
+ z-index: 1000000;
129
+ width: 36px;
130
+ height: 36px;
133
131
  border: none;
134
132
  border-radius: 50%;
135
- background: rgba(0, 0, 0, 0.5);
133
+ background: rgba(255, 255, 255, 0.15);
134
+ backdrop-filter: blur(8px);
136
135
  color: #fff;
137
- font-size: 18px;
136
+ font-size: 20px;
138
137
  line-height: 1;
139
138
  cursor: pointer;
140
139
  display: flex;
141
140
  align-items: center;
142
141
  justify-content: center;
143
- transition: background 0.15s;
142
+ transition: background 0.15s, transform 0.15s;
144
143
  }
145
144
  #${OVERLAY_ID} .cc-close:hover {
146
- background: rgba(0, 0, 0, 0.7);
145
+ background: rgba(255, 255, 255, 0.25);
146
+ transform: scale(1.1);
147
147
  }
148
148
  #${OVERLAY_ID} iframe {
149
149
  width: 100%;
@@ -169,11 +169,11 @@ function injectStyles() {
169
169
  animation: cc-spin 0.8s linear infinite;
170
170
  }
171
171
  @keyframes cc-spin { to { transform: rotate(360deg); } }
172
- @media (max-width: 480px) {
172
+ @media (max-width: 720px) {
173
173
  #${OVERLAY_ID} .cc-modal {
174
+ width: 100%;
174
175
  max-width: 100%;
175
- height: 100vh;
176
- max-height: 100vh;
176
+ height: 100dvh;
177
177
  border-radius: 0;
178
178
  }
179
179
  }
@@ -204,9 +204,15 @@ function createOverlay(checkoutUrl, onCloseClick) {
204
204
  iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
205
205
  iframe.setAttribute("title", "CoinCircuit Checkout");
206
206
  iframe.setAttribute("allow", "payment");
207
+ const closeBtn = document.createElement("button");
208
+ closeBtn.className = "cc-close";
209
+ closeBtn.setAttribute("aria-label", "Close checkout");
210
+ closeBtn.textContent = "\u2715";
211
+ closeBtn.addEventListener("click", onCloseClick);
207
212
  modal.appendChild(spinner);
208
213
  modal.appendChild(iframe);
209
214
  overlay.appendChild(modal);
215
+ overlay.appendChild(closeBtn);
210
216
  return { overlay, iframe };
211
217
  }
212
218
  function showOverlay(overlay) {
@@ -298,7 +304,7 @@ var CoinCircuitCheckout = class {
298
304
  this.overlay = overlay;
299
305
  this.loadTimeout = setTimeout(() => {
300
306
  showErrorToast(
301
- "Checkout failed to load. The checkout service may be unavailable or blocked by security policy."
307
+ "Checkout failed to load."
302
308
  );
303
309
  this.close();
304
310
  }, 15e3);
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  buildCheckoutUrl,
6
6
  createMessageListener,
7
7
  extractOrigin
8
- } from "./chunk-VYS76EOY.js";
8
+ } from "./chunk-NLDQKWTU.js";
9
9
  export {
10
10
  CHECKOUT_MESSAGE_TYPES,
11
11
  CoinCircuitCheckout,
package/dist/react.cjs CHANGED
@@ -110,36 +110,36 @@ function injectStyles() {
110
110
  }
111
111
  #${OVERLAY_ID} .cc-modal {
112
112
  position: relative;
113
- width: 100%;
114
- max-width: 450px;
115
- height: 90vh;
116
- max-height: 700px;
113
+ width: min(600px, 96vw);
114
+ max-width: 600px;
115
+ height: min(88vh, 800px);
117
116
  border-radius: 16px;
118
- overflow: hidden;
119
117
  background: #fff;
120
118
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
121
119
  }
122
120
  #${OVERLAY_ID} .cc-close {
123
- position: absolute;
124
- top: 12px;
125
- right: 12px;
126
- z-index: 10;
127
- width: 32px;
128
- height: 32px;
121
+ position: fixed;
122
+ top: 16px;
123
+ right: 16px;
124
+ z-index: 1000000;
125
+ width: 36px;
126
+ height: 36px;
129
127
  border: none;
130
128
  border-radius: 50%;
131
- background: rgba(0, 0, 0, 0.5);
129
+ background: rgba(255, 255, 255, 0.15);
130
+ backdrop-filter: blur(8px);
132
131
  color: #fff;
133
- font-size: 18px;
132
+ font-size: 20px;
134
133
  line-height: 1;
135
134
  cursor: pointer;
136
135
  display: flex;
137
136
  align-items: center;
138
137
  justify-content: center;
139
- transition: background 0.15s;
138
+ transition: background 0.15s, transform 0.15s;
140
139
  }
141
140
  #${OVERLAY_ID} .cc-close:hover {
142
- background: rgba(0, 0, 0, 0.7);
141
+ background: rgba(255, 255, 255, 0.25);
142
+ transform: scale(1.1);
143
143
  }
144
144
  #${OVERLAY_ID} iframe {
145
145
  width: 100%;
@@ -165,11 +165,11 @@ function injectStyles() {
165
165
  animation: cc-spin 0.8s linear infinite;
166
166
  }
167
167
  @keyframes cc-spin { to { transform: rotate(360deg); } }
168
- @media (max-width: 480px) {
168
+ @media (max-width: 720px) {
169
169
  #${OVERLAY_ID} .cc-modal {
170
+ width: 100%;
170
171
  max-width: 100%;
171
- height: 100vh;
172
- max-height: 100vh;
172
+ height: 100dvh;
173
173
  border-radius: 0;
174
174
  }
175
175
  }
@@ -200,9 +200,15 @@ function createOverlay(checkoutUrl, onCloseClick) {
200
200
  iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
201
201
  iframe.setAttribute("title", "CoinCircuit Checkout");
202
202
  iframe.setAttribute("allow", "payment");
203
+ const closeBtn = document.createElement("button");
204
+ closeBtn.className = "cc-close";
205
+ closeBtn.setAttribute("aria-label", "Close checkout");
206
+ closeBtn.textContent = "\u2715";
207
+ closeBtn.addEventListener("click", onCloseClick);
203
208
  modal.appendChild(spinner);
204
209
  modal.appendChild(iframe);
205
210
  overlay.appendChild(modal);
211
+ overlay.appendChild(closeBtn);
206
212
  return { overlay, iframe };
207
213
  }
208
214
  function showOverlay(overlay) {
@@ -294,7 +300,7 @@ var CoinCircuitCheckout = class {
294
300
  this.overlay = overlay;
295
301
  this.loadTimeout = setTimeout(() => {
296
302
  showErrorToast(
297
- "Checkout failed to load. The checkout service may be unavailable or blocked by security policy."
303
+ "Checkout failed to load."
298
304
  );
299
305
  this.close();
300
306
  }, 15e3);
package/dist/react.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  CoinCircuitCheckout
3
- } from "./chunk-VYS76EOY.js";
3
+ } from "./chunk-NLDQKWTU.js";
4
4
 
5
5
  // src/react.ts
6
6
  import { useRef, useCallback, useEffect, createElement } from "react";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coincircuit/checkout",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Embed CoinCircuit checkout in your site via iframe, with vanilla JS and React support",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",