flintn-checkout 0.0.7 → 0.0.8

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 (10) hide show
  1. package/README.md +12 -2
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +8 -2
  5. package/dist/index.mjs +8 -2
  6. package/dist/react.d.mts +1 -0
  7. package/dist/react.d.ts +1 -0
  8. package/dist/react.js +8 -2
  9. package/dist/react.mjs +8 -2
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -32,7 +32,7 @@ function Checkout() {
32
32
 
33
33
  return (
34
34
  <div style={{ display: 'flex', justifyContent: 'center' }}>
35
- <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
35
+ <div ref={containerRef} style={{ width: '100%', maxWidth: 440 }} />
36
36
  </div>
37
37
  );
38
38
  }
@@ -76,7 +76,7 @@ payment.unmount();
76
76
  <title>FlintN Checkout</title>
77
77
  </head>
78
78
  <body>
79
- <div id="payment-container" style="max-width: 440px; height: 600px; margin: 0 auto;"></div>
79
+ <div id="payment-container" style="max-width: 440px; margin: 0 auto;"></div>
80
80
 
81
81
  <script type="module">
82
82
  import { FlintNPayment } from 'flintn-checkout';
@@ -96,6 +96,16 @@ payment.unmount();
96
96
  </html>
97
97
  ```
98
98
 
99
+ ## Container Sizing
100
+
101
+ The widget auto-sizes to fit its content — you only need to set a width on the container. Height is managed by the SDK and updates automatically as the form changes state (loading, express view, card form, success).
102
+
103
+ ```tsx
104
+ <div ref={containerRef} style={{ width: '100%', maxWidth: 440 }} />
105
+ ```
106
+
107
+ Do **not** set a fixed `height` on the container — it will leave empty space below the widget when content is shorter than your hardcoded value, and the iframe never scrolls internally.
108
+
99
109
  ## Configuration
100
110
 
101
111
  | Option | Type | Required | Default | Description |
package/dist/index.d.mts CHANGED
@@ -7,6 +7,7 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
13
  declare const CheckoutFormVariant: {
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
13
  declare const CheckoutFormVariant: {
package/dist/index.js CHANGED
@@ -40,7 +40,8 @@ var EventType = {
40
40
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
41
41
  PAYMENT_ERROR: "PAYMENT_ERROR",
42
42
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
43
- REDIRECT: "REDIRECT"
43
+ REDIRECT: "REDIRECT",
44
+ RESIZE: "RESIZE"
44
45
  };
45
46
  var CheckoutFormVariant = {
46
47
  DEFAULT: "DEFAULT",
@@ -69,7 +70,7 @@ var createIframeElement = (src) => {
69
70
  const iframe = document.createElement("iframe");
70
71
  iframe.src = src;
71
72
  iframe.title = "FlintN Checkout";
72
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
73
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
73
74
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
74
75
  iframe.setAttribute("allow", "payment *; clipboard-write");
75
76
  return iframe;
@@ -146,6 +147,11 @@ var FlintNPayment = class {
146
147
  window.location.href = payload.url;
147
148
  }
148
149
  break;
150
+ case EventType.RESIZE:
151
+ if (this.iframe && typeof payload?.height === "number") {
152
+ this.iframe.style.height = `${payload.height}px`;
153
+ }
154
+ break;
149
155
  }
150
156
  }
151
157
  isValidRedirectUrl(url) {
package/dist/index.mjs CHANGED
@@ -7,7 +7,8 @@ var EventType = {
7
7
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
8
8
  PAYMENT_ERROR: "PAYMENT_ERROR",
9
9
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
10
- REDIRECT: "REDIRECT"
10
+ REDIRECT: "REDIRECT",
11
+ RESIZE: "RESIZE"
11
12
  };
12
13
  var CheckoutFormVariant = {
13
14
  DEFAULT: "DEFAULT",
@@ -36,7 +37,7 @@ var createIframeElement = (src) => {
36
37
  const iframe = document.createElement("iframe");
37
38
  iframe.src = src;
38
39
  iframe.title = "FlintN Checkout";
39
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
40
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
40
41
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
41
42
  iframe.setAttribute("allow", "payment *; clipboard-write");
42
43
  return iframe;
@@ -113,6 +114,11 @@ var FlintNPayment = class {
113
114
  window.location.href = payload.url;
114
115
  }
115
116
  break;
117
+ case EventType.RESIZE:
118
+ if (this.iframe && typeof payload?.height === "number") {
119
+ this.iframe.style.height = `${payload.height}px`;
120
+ }
121
+ break;
116
122
  }
117
123
  }
118
124
  isValidRedirectUrl(url) {
package/dist/react.d.mts CHANGED
@@ -7,6 +7,7 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
13
  declare const CheckoutFormVariant: {
package/dist/react.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
13
  declare const CheckoutFormVariant: {
package/dist/react.js CHANGED
@@ -38,7 +38,8 @@ var EventType = {
38
38
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
39
39
  PAYMENT_ERROR: "PAYMENT_ERROR",
40
40
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
41
- REDIRECT: "REDIRECT"
41
+ REDIRECT: "REDIRECT",
42
+ RESIZE: "RESIZE"
42
43
  };
43
44
  var CheckoutFormVariant = {
44
45
  DEFAULT: "DEFAULT",
@@ -67,7 +68,7 @@ var createIframeElement = (src) => {
67
68
  const iframe = document.createElement("iframe");
68
69
  iframe.src = src;
69
70
  iframe.title = "FlintN Checkout";
70
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
71
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
71
72
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
72
73
  iframe.setAttribute("allow", "payment *; clipboard-write");
73
74
  return iframe;
@@ -144,6 +145,11 @@ var FlintNPayment = class {
144
145
  window.location.href = payload.url;
145
146
  }
146
147
  break;
148
+ case EventType.RESIZE:
149
+ if (this.iframe && typeof payload?.height === "number") {
150
+ this.iframe.style.height = `${payload.height}px`;
151
+ }
152
+ break;
147
153
  }
148
154
  }
149
155
  isValidRedirectUrl(url) {
package/dist/react.mjs CHANGED
@@ -10,7 +10,8 @@ var EventType = {
10
10
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
11
11
  PAYMENT_ERROR: "PAYMENT_ERROR",
12
12
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
13
- REDIRECT: "REDIRECT"
13
+ REDIRECT: "REDIRECT",
14
+ RESIZE: "RESIZE"
14
15
  };
15
16
  var CheckoutFormVariant = {
16
17
  DEFAULT: "DEFAULT",
@@ -39,7 +40,7 @@ var createIframeElement = (src) => {
39
40
  const iframe = document.createElement("iframe");
40
41
  iframe.src = src;
41
42
  iframe.title = "FlintN Checkout";
42
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
43
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
43
44
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
44
45
  iframe.setAttribute("allow", "payment *; clipboard-write");
45
46
  return iframe;
@@ -116,6 +117,11 @@ var FlintNPayment = class {
116
117
  window.location.href = payload.url;
117
118
  }
118
119
  break;
120
+ case EventType.RESIZE:
121
+ if (this.iframe && typeof payload?.height === "number") {
122
+ this.iframe.style.height = `${payload.height}px`;
123
+ }
124
+ break;
119
125
  }
120
126
  }
121
127
  isValidRedirectUrl(url) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flintn-checkout",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "FlintN Payment SDK — drop-in iframe checkout for card payments and wallets with localization and theming.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",