flintn-checkout 0.0.1 → 0.0.3

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 +10 -12
  2. package/dist/index.d.mts +2 -3
  3. package/dist/index.d.ts +2 -3
  4. package/dist/index.js +8 -6
  5. package/dist/index.mjs +8 -6
  6. package/dist/react.d.mts +1 -2
  7. package/dist/react.d.ts +1 -2
  8. package/dist/react.js +9 -8
  9. package/dist/react.mjs +9 -8
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -16,7 +16,7 @@ import { useFlintNPayment } from 'flintn-checkout/react';
16
16
  function Checkout() {
17
17
  const { containerRef, isReady, paymentResult, error } = useFlintNPayment({
18
18
  config: {
19
- clientToken: 'your_client_token',
19
+ clientSessionId: 'your_client_session_id',
20
20
  },
21
21
  onPayment: (result) => {
22
22
  if (result.status === 'PAYMENT_SUCCESS') {
@@ -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%', maxWidth: '440px', height: '600px' }} />
35
+ <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
36
36
  </div>
37
37
  );
38
38
  }
@@ -44,10 +44,7 @@ import { FlintNPayment } from 'flintn-checkout';
44
44
 
45
45
  const payment = new FlintNPayment({
46
46
  config: {
47
- clientToken: 'your_client_token',
48
- maxWidth: '440px',
49
- isCardHolderRequired: true,
50
- successRedirectUrl: 'https://example.com/success',
47
+ clientSessionId: 'your_client_session_id',
51
48
  },
52
49
  onPayment: (result) => {
53
50
  if (result.status === 'PAYMENT_SUCCESS') {
@@ -86,7 +83,7 @@ payment.unmount();
86
83
 
87
84
  const payment = new FlintNPayment({
88
85
  config: {
89
- clientToken: 'your_client_token',
86
+ clientSessionId: 'your_client_session_id',
90
87
  },
91
88
  onPayment: (result) => {
92
89
  console.log('Payment result:', result);
@@ -103,11 +100,12 @@ payment.unmount();
103
100
 
104
101
  | Option | Type | Required | Default | Description |
105
102
  |--------|------|----------|---------|-------------|
106
- | `clientToken` | `string` | ✅ | — | Client token from your backend |
107
- | `maxWidth` | `string` | ❌ | `'440px'` | Maximum width of widget |
103
+ | `clientSessionId` | `string` | ✅ | — | Client session ID from backend |
108
104
  | `isCardHolderRequired` | `boolean` | ❌ | `true` | Show cardholder name field |
109
105
  | `successRedirectUrl` | `string` | ❌ | — | Redirect URL after successful payment |
110
106
 
107
+ > **Note:** `isCardHolderRequired` only applies when using Primer as the payment provider.
108
+
111
109
  ## Callbacks
112
110
 
113
111
  | Callback | Description |
@@ -132,7 +130,7 @@ payment.unmount();
132
130
  ```typescript
133
131
  interface PaymentResult {
134
132
  status: 'PAYMENT_SUCCESS' | 'PAYMENT_ERROR' | 'PAYMENT_CANCELLED';
135
- data?: string; // Payment ID on success
133
+ data?: string; // Payment ID on success
136
134
  error?: {
137
135
  code: string;
138
136
  message: string;
@@ -161,13 +159,13 @@ Enable debug logs in console:
161
159
  ```typescript
162
160
  // React
163
161
  useFlintNPayment({
164
- config: { clientToken: '...' },
162
+ config: { clientSessionId: '...' },
165
163
  debug: true,
166
164
  });
167
165
 
168
166
  // Vanilla JS
169
167
  new FlintNPayment({
170
- config: { clientToken: '...' },
168
+ config: { clientSessionId: '...' },
171
169
  debug: true,
172
170
  });
173
171
  ```
package/dist/index.d.mts CHANGED
@@ -10,8 +10,7 @@ declare const EventType: {
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
12
  interface FlintNConfig {
13
- clientToken: string;
14
- maxWidth?: string;
13
+ clientSessionId: string;
15
14
  isCardHolderRequired?: boolean;
16
15
  successRedirectUrl?: string;
17
16
  }
@@ -59,7 +58,7 @@ declare const parseOrigin: (origin: string) => string;
59
58
  declare const buildIframeSrc: (origin: string) => string;
60
59
  declare const createIframeElement: (src: string) => HTMLIFrameElement;
61
60
  declare const validateConfig: (config: {
62
- clientToken?: string;
61
+ clientSessionId?: string;
63
62
  }) => void;
64
63
  declare const sanitizeToken: (token: string) => string;
65
64
 
package/dist/index.d.ts CHANGED
@@ -10,8 +10,7 @@ declare const EventType: {
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
12
  interface FlintNConfig {
13
- clientToken: string;
14
- maxWidth?: string;
13
+ clientSessionId: string;
15
14
  isCardHolderRequired?: boolean;
16
15
  successRedirectUrl?: string;
17
16
  }
@@ -59,7 +58,7 @@ declare const parseOrigin: (origin: string) => string;
59
58
  declare const buildIframeSrc: (origin: string) => string;
60
59
  declare const createIframeElement: (src: string) => HTMLIFrameElement;
61
60
  declare const validateConfig: (config: {
62
- clientToken?: string;
61
+ clientSessionId?: string;
63
62
  }) => void;
64
63
  declare const sanitizeToken: (token: string) => string;
65
64
 
package/dist/index.js CHANGED
@@ -55,7 +55,9 @@ var parseOrigin = (origin) => {
55
55
  }
56
56
  };
57
57
  var buildIframeSrc = (origin) => {
58
- return parseOrigin(origin) + "/";
58
+ const parsed = parseOrigin(origin);
59
+ if (parsed.includes("localhost")) return parsed + "/";
60
+ return parsed + "/iframe/";
59
61
  };
60
62
  var createIframeElement = (src) => {
61
63
  const iframe = document.createElement("iframe");
@@ -63,12 +65,12 @@ var createIframeElement = (src) => {
63
65
  iframe.title = "FlintN Checkout";
64
66
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
65
67
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
66
- iframe.setAttribute("allow", "payment; clipboard-write");
68
+ iframe.setAttribute("allow", "payment *; clipboard-write");
67
69
  return iframe;
68
70
  };
69
71
  var validateConfig = (config) => {
70
- if (!config.clientToken) {
71
- throw new Error("[FlintN SDK] clientToken is required");
72
+ if (!config.clientSessionId) {
73
+ throw new Error("[FlintN SDK] clientSessionId is required");
72
74
  }
73
75
  };
74
76
  var sanitizeToken = (token) => {
@@ -77,7 +79,7 @@ var sanitizeToken = (token) => {
77
79
  };
78
80
 
79
81
  // src/flintn-payment.ts
80
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
82
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
81
83
  var FlintNPayment = class {
82
84
  constructor(options) {
83
85
  this.iframe = null;
@@ -177,7 +179,7 @@ var FlintNPayment = class {
177
179
  },
178
180
  this.origin
179
181
  );
180
- this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
182
+ this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
181
183
  }
182
184
  log(...args) {
183
185
  if (this.options.debug) {
package/dist/index.mjs CHANGED
@@ -23,7 +23,9 @@ var parseOrigin = (origin) => {
23
23
  }
24
24
  };
25
25
  var buildIframeSrc = (origin) => {
26
- return parseOrigin(origin) + "/";
26
+ const parsed = parseOrigin(origin);
27
+ if (parsed.includes("localhost")) return parsed + "/";
28
+ return parsed + "/iframe/";
27
29
  };
28
30
  var createIframeElement = (src) => {
29
31
  const iframe = document.createElement("iframe");
@@ -31,12 +33,12 @@ var createIframeElement = (src) => {
31
33
  iframe.title = "FlintN Checkout";
32
34
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
33
35
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
34
- iframe.setAttribute("allow", "payment; clipboard-write");
36
+ iframe.setAttribute("allow", "payment *; clipboard-write");
35
37
  return iframe;
36
38
  };
37
39
  var validateConfig = (config) => {
38
- if (!config.clientToken) {
39
- throw new Error("[FlintN SDK] clientToken is required");
40
+ if (!config.clientSessionId) {
41
+ throw new Error("[FlintN SDK] clientSessionId is required");
40
42
  }
41
43
  };
42
44
  var sanitizeToken = (token) => {
@@ -45,7 +47,7 @@ var sanitizeToken = (token) => {
45
47
  };
46
48
 
47
49
  // src/flintn-payment.ts
48
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
50
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
49
51
  var FlintNPayment = class {
50
52
  constructor(options) {
51
53
  this.iframe = null;
@@ -145,7 +147,7 @@ var FlintNPayment = class {
145
147
  },
146
148
  this.origin
147
149
  );
148
- this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
150
+ this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
149
151
  }
150
152
  log(...args) {
151
153
  if (this.options.debug) {
package/dist/react.d.mts CHANGED
@@ -10,8 +10,7 @@ declare const EventType: {
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
12
  interface FlintNConfig {
13
- clientToken: string;
14
- maxWidth?: string;
13
+ clientSessionId: string;
15
14
  isCardHolderRequired?: boolean;
16
15
  successRedirectUrl?: string;
17
16
  }
package/dist/react.d.ts CHANGED
@@ -10,8 +10,7 @@ declare const EventType: {
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
12
  interface FlintNConfig {
13
- clientToken: string;
14
- maxWidth?: string;
13
+ clientSessionId: string;
15
14
  isCardHolderRequired?: boolean;
16
15
  successRedirectUrl?: string;
17
16
  }
package/dist/react.js CHANGED
@@ -53,7 +53,9 @@ var parseOrigin = (origin) => {
53
53
  }
54
54
  };
55
55
  var buildIframeSrc = (origin) => {
56
- return parseOrigin(origin) + "/";
56
+ const parsed = parseOrigin(origin);
57
+ if (parsed.includes("localhost")) return parsed + "/";
58
+ return parsed + "/iframe/";
57
59
  };
58
60
  var createIframeElement = (src) => {
59
61
  const iframe = document.createElement("iframe");
@@ -61,12 +63,12 @@ var createIframeElement = (src) => {
61
63
  iframe.title = "FlintN Checkout";
62
64
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
63
65
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
64
- iframe.setAttribute("allow", "payment; clipboard-write");
66
+ iframe.setAttribute("allow", "payment *; clipboard-write");
65
67
  return iframe;
66
68
  };
67
69
  var validateConfig = (config) => {
68
- if (!config.clientToken) {
69
- throw new Error("[FlintN SDK] clientToken is required");
70
+ if (!config.clientSessionId) {
71
+ throw new Error("[FlintN SDK] clientSessionId is required");
70
72
  }
71
73
  };
72
74
  var sanitizeToken = (token) => {
@@ -75,7 +77,7 @@ var sanitizeToken = (token) => {
75
77
  };
76
78
 
77
79
  // src/flintn-payment.ts
78
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
80
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
79
81
  var FlintNPayment = class {
80
82
  constructor(options) {
81
83
  this.iframe = null;
@@ -175,7 +177,7 @@ var FlintNPayment = class {
175
177
  },
176
178
  this.origin
177
179
  );
178
- this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
180
+ this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
179
181
  }
180
182
  log(...args) {
181
183
  if (this.options.debug) {
@@ -232,8 +234,7 @@ function useFlintNPayment(options) {
232
234
  }, [
233
235
  options.origin,
234
236
  options.debug,
235
- options.config.clientToken,
236
- options.config.maxWidth,
237
+ options.config.clientSessionId,
237
238
  options.config.isCardHolderRequired,
238
239
  options.config.successRedirectUrl
239
240
  ]);
package/dist/react.mjs CHANGED
@@ -26,7 +26,9 @@ var parseOrigin = (origin) => {
26
26
  }
27
27
  };
28
28
  var buildIframeSrc = (origin) => {
29
- return parseOrigin(origin) + "/";
29
+ const parsed = parseOrigin(origin);
30
+ if (parsed.includes("localhost")) return parsed + "/";
31
+ return parsed + "/iframe/";
30
32
  };
31
33
  var createIframeElement = (src) => {
32
34
  const iframe = document.createElement("iframe");
@@ -34,12 +36,12 @@ var createIframeElement = (src) => {
34
36
  iframe.title = "FlintN Checkout";
35
37
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
36
38
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
37
- iframe.setAttribute("allow", "payment; clipboard-write");
39
+ iframe.setAttribute("allow", "payment *; clipboard-write");
38
40
  return iframe;
39
41
  };
40
42
  var validateConfig = (config) => {
41
- if (!config.clientToken) {
42
- throw new Error("[FlintN SDK] clientToken is required");
43
+ if (!config.clientSessionId) {
44
+ throw new Error("[FlintN SDK] clientSessionId is required");
43
45
  }
44
46
  };
45
47
  var sanitizeToken = (token) => {
@@ -48,7 +50,7 @@ var sanitizeToken = (token) => {
48
50
  };
49
51
 
50
52
  // src/flintn-payment.ts
51
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
53
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
52
54
  var FlintNPayment = class {
53
55
  constructor(options) {
54
56
  this.iframe = null;
@@ -148,7 +150,7 @@ var FlintNPayment = class {
148
150
  },
149
151
  this.origin
150
152
  );
151
- this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
153
+ this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
152
154
  }
153
155
  log(...args) {
154
156
  if (this.options.debug) {
@@ -205,8 +207,7 @@ function useFlintNPayment(options) {
205
207
  }, [
206
208
  options.origin,
207
209
  options.debug,
208
- options.config.clientToken,
209
- options.config.maxWidth,
210
+ options.config.clientSessionId,
210
211
  options.config.isCardHolderRequired,
211
212
  options.config.successRedirectUrl
212
213
  ]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flintn-checkout",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
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",