flintn-checkout 0.0.2 → 0.0.4

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 +29 -2
  2. package/dist/index.d.mts +21 -3
  3. package/dist/index.d.ts +21 -3
  4. package/dist/index.js +6 -3
  5. package/dist/index.mjs +6 -3
  6. package/dist/react.d.mts +21 -3
  7. package/dist/react.d.ts +21 -3
  8. package/dist/react.js +9 -5
  9. package/dist/react.mjs +9 -5
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -101,10 +101,11 @@ payment.unmount();
101
101
  | Option | Type | Required | Default | Description |
102
102
  |--------|------|----------|---------|-------------|
103
103
  | `clientSessionId` | `string` | ✅ | — | Client session ID from backend |
104
- | `isCardHolderRequired` | `boolean` | ❌ | `true` | Show cardholder name field |
104
+ | `formFields` | `FormFields` | ❌ | — | Form field visibility and requirements |
105
+ | `styles` | `FormStyles` | ❌ | — | Custom styles for the checkout form |
105
106
  | `successRedirectUrl` | `string` | ❌ | — | Redirect URL after successful payment |
106
107
 
107
- > **Note:** `isCardHolderRequired` only applies when using Primer as the payment provider.
108
+ > **Note:** `formFields` only applies when using Primer as the payment provider.
108
109
 
109
110
  ## Callbacks
110
111
 
@@ -146,6 +147,32 @@ interface PaymentError {
146
147
  }
147
148
  ```
148
149
 
150
+ ### FormFields
151
+ ```typescript
152
+ interface FormFields {
153
+ isEmailVisible?: boolean;
154
+ isCardholderNameRequired?: boolean;
155
+ }
156
+ ```
157
+
158
+ ### FormStyles
159
+ ```typescript
160
+ interface FormStyles {
161
+ loaderColor?: string;
162
+ inputBorderRadius?: string;
163
+ expressButtonsSpacing?: string;
164
+ inputBorderColor?: string;
165
+ inputBorderHoverColor?: string;
166
+ inputBorderFocusColor?: string;
167
+ inputBorderErrorColor?: string;
168
+ errorMessageColor?: string;
169
+ buttonColor?: string;
170
+ buttonHoverColor?: string;
171
+ buttonBorderRadius?: string
172
+ buttonText?: string
173
+ }
174
+ ```
175
+
149
176
  ## Supported Payment Methods
150
177
 
151
178
  - 💳 Credit/Debit Cards (Visa, Mastercard, Amex, Discover)
package/dist/index.d.mts CHANGED
@@ -9,10 +9,28 @@ declare const EventType: {
9
9
  readonly REDIRECT: "REDIRECT";
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
+ interface FormFields {
13
+ isEmailVisible?: boolean;
14
+ isCardholderNameRequired?: boolean;
15
+ }
16
+ interface FormStyles {
17
+ loaderColor?: string;
18
+ inputBorderRadius?: string;
19
+ expressButtonsSpacing?: string;
20
+ inputBorderColor?: string;
21
+ inputBorderHoverColor?: string;
22
+ inputBorderFocusColor?: string;
23
+ inputBorderErrorColor?: string;
24
+ errorMessageColor?: string;
25
+ buttonColor?: string;
26
+ buttonHoverColor?: string;
27
+ buttonBorderRadius?: string;
28
+ buttonText?: string;
29
+ }
12
30
  interface FlintNConfig {
13
31
  clientSessionId: string;
14
- maxWidth?: string;
15
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
16
34
  successRedirectUrl?: string;
17
35
  }
18
36
  interface PaymentResult {
@@ -63,4 +81,4 @@ declare const validateConfig: (config: {
63
81
  }) => void;
64
82
  declare const sanitizeToken: (token: string) => string;
65
83
 
66
- export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
84
+ export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
package/dist/index.d.ts CHANGED
@@ -9,10 +9,28 @@ declare const EventType: {
9
9
  readonly REDIRECT: "REDIRECT";
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
+ interface FormFields {
13
+ isEmailVisible?: boolean;
14
+ isCardholderNameRequired?: boolean;
15
+ }
16
+ interface FormStyles {
17
+ loaderColor?: string;
18
+ inputBorderRadius?: string;
19
+ expressButtonsSpacing?: string;
20
+ inputBorderColor?: string;
21
+ inputBorderHoverColor?: string;
22
+ inputBorderFocusColor?: string;
23
+ inputBorderErrorColor?: string;
24
+ errorMessageColor?: string;
25
+ buttonColor?: string;
26
+ buttonHoverColor?: string;
27
+ buttonBorderRadius?: string;
28
+ buttonText?: string;
29
+ }
12
30
  interface FlintNConfig {
13
31
  clientSessionId: string;
14
- maxWidth?: string;
15
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
16
34
  successRedirectUrl?: string;
17
35
  }
18
36
  interface PaymentResult {
@@ -63,4 +81,4 @@ declare const validateConfig: (config: {
63
81
  }) => void;
64
82
  declare const sanitizeToken: (token: string) => string;
65
83
 
66
- export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
84
+ export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
package/dist/index.js CHANGED
@@ -55,7 +55,10 @@ var parseOrigin = (origin) => {
55
55
  }
56
56
  };
57
57
  var buildIframeSrc = (origin) => {
58
- return parseOrigin(origin) + "/";
58
+ const parsed = parseOrigin(origin);
59
+ const { hostname } = new URL(parsed);
60
+ if (hostname === "localhost") return parsed + "/";
61
+ return parsed + "/iframe/";
59
62
  };
60
63
  var createIframeElement = (src) => {
61
64
  const iframe = document.createElement("iframe");
@@ -63,7 +66,7 @@ var createIframeElement = (src) => {
63
66
  iframe.title = "FlintN Checkout";
64
67
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
65
68
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
66
- iframe.setAttribute("allow", "payment; clipboard-write");
69
+ iframe.setAttribute("allow", "payment *; clipboard-write");
67
70
  return iframe;
68
71
  };
69
72
  var validateConfig = (config) => {
@@ -77,7 +80,7 @@ var sanitizeToken = (token) => {
77
80
  };
78
81
 
79
82
  // src/flintn-payment.ts
80
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
83
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
81
84
  var FlintNPayment = class {
82
85
  constructor(options) {
83
86
  this.iframe = null;
package/dist/index.mjs CHANGED
@@ -23,7 +23,10 @@ var parseOrigin = (origin) => {
23
23
  }
24
24
  };
25
25
  var buildIframeSrc = (origin) => {
26
- return parseOrigin(origin) + "/";
26
+ const parsed = parseOrigin(origin);
27
+ const { hostname } = new URL(parsed);
28
+ if (hostname === "localhost") return parsed + "/";
29
+ return parsed + "/iframe/";
27
30
  };
28
31
  var createIframeElement = (src) => {
29
32
  const iframe = document.createElement("iframe");
@@ -31,7 +34,7 @@ var createIframeElement = (src) => {
31
34
  iframe.title = "FlintN Checkout";
32
35
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
33
36
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
34
- iframe.setAttribute("allow", "payment; clipboard-write");
37
+ iframe.setAttribute("allow", "payment *; clipboard-write");
35
38
  return iframe;
36
39
  };
37
40
  var validateConfig = (config) => {
@@ -45,7 +48,7 @@ var sanitizeToken = (token) => {
45
48
  };
46
49
 
47
50
  // src/flintn-payment.ts
48
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
51
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
49
52
  var FlintNPayment = class {
50
53
  constructor(options) {
51
54
  this.iframe = null;
package/dist/react.d.mts CHANGED
@@ -9,10 +9,28 @@ declare const EventType: {
9
9
  readonly REDIRECT: "REDIRECT";
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
+ interface FormFields {
13
+ isEmailVisible?: boolean;
14
+ isCardholderNameRequired?: boolean;
15
+ }
16
+ interface FormStyles {
17
+ loaderColor?: string;
18
+ inputBorderRadius?: string;
19
+ expressButtonsSpacing?: string;
20
+ inputBorderColor?: string;
21
+ inputBorderHoverColor?: string;
22
+ inputBorderFocusColor?: string;
23
+ inputBorderErrorColor?: string;
24
+ errorMessageColor?: string;
25
+ buttonColor?: string;
26
+ buttonHoverColor?: string;
27
+ buttonBorderRadius?: string;
28
+ buttonText?: string;
29
+ }
12
30
  interface FlintNConfig {
13
31
  clientSessionId: string;
14
- maxWidth?: string;
15
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
16
34
  successRedirectUrl?: string;
17
35
  }
18
36
  interface PaymentResult {
@@ -57,4 +75,4 @@ interface UseFlintNPaymentReturn {
57
75
  }
58
76
  declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
59
77
 
60
- export { EventType, type FlintNConfig, type FlintNPaymentOptions, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
78
+ export { EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
package/dist/react.d.ts CHANGED
@@ -9,10 +9,28 @@ declare const EventType: {
9
9
  readonly REDIRECT: "REDIRECT";
10
10
  };
11
11
  type TEventType = (typeof EventType)[keyof typeof EventType];
12
+ interface FormFields {
13
+ isEmailVisible?: boolean;
14
+ isCardholderNameRequired?: boolean;
15
+ }
16
+ interface FormStyles {
17
+ loaderColor?: string;
18
+ inputBorderRadius?: string;
19
+ expressButtonsSpacing?: string;
20
+ inputBorderColor?: string;
21
+ inputBorderHoverColor?: string;
22
+ inputBorderFocusColor?: string;
23
+ inputBorderErrorColor?: string;
24
+ errorMessageColor?: string;
25
+ buttonColor?: string;
26
+ buttonHoverColor?: string;
27
+ buttonBorderRadius?: string;
28
+ buttonText?: string;
29
+ }
12
30
  interface FlintNConfig {
13
31
  clientSessionId: string;
14
- maxWidth?: string;
15
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
16
34
  successRedirectUrl?: string;
17
35
  }
18
36
  interface PaymentResult {
@@ -57,4 +75,4 @@ interface UseFlintNPaymentReturn {
57
75
  }
58
76
  declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
59
77
 
60
- export { EventType, type FlintNConfig, type FlintNPaymentOptions, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
78
+ export { EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
package/dist/react.js CHANGED
@@ -53,7 +53,10 @@ var parseOrigin = (origin) => {
53
53
  }
54
54
  };
55
55
  var buildIframeSrc = (origin) => {
56
- return parseOrigin(origin) + "/";
56
+ const parsed = parseOrigin(origin);
57
+ const { hostname } = new URL(parsed);
58
+ if (hostname === "localhost") return parsed + "/";
59
+ return parsed + "/iframe/";
57
60
  };
58
61
  var createIframeElement = (src) => {
59
62
  const iframe = document.createElement("iframe");
@@ -61,7 +64,7 @@ var createIframeElement = (src) => {
61
64
  iframe.title = "FlintN Checkout";
62
65
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
63
66
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
64
- iframe.setAttribute("allow", "payment; clipboard-write");
67
+ iframe.setAttribute("allow", "payment *; clipboard-write");
65
68
  return iframe;
66
69
  };
67
70
  var validateConfig = (config) => {
@@ -75,7 +78,7 @@ var sanitizeToken = (token) => {
75
78
  };
76
79
 
77
80
  // src/flintn-payment.ts
78
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
81
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
79
82
  var FlintNPayment = class {
80
83
  constructor(options) {
81
84
  this.iframe = null;
@@ -233,8 +236,9 @@ function useFlintNPayment(options) {
233
236
  options.origin,
234
237
  options.debug,
235
238
  options.config.clientSessionId,
236
- options.config.isCardHolderRequired,
237
- options.config.successRedirectUrl
239
+ options.config.successRedirectUrl,
240
+ JSON.stringify(options.config.formFields),
241
+ JSON.stringify(options.config.styles)
238
242
  ]);
239
243
  return {
240
244
  containerRef,
package/dist/react.mjs CHANGED
@@ -26,7 +26,10 @@ var parseOrigin = (origin) => {
26
26
  }
27
27
  };
28
28
  var buildIframeSrc = (origin) => {
29
- return parseOrigin(origin) + "/";
29
+ const parsed = parseOrigin(origin);
30
+ const { hostname } = new URL(parsed);
31
+ if (hostname === "localhost") return parsed + "/";
32
+ return parsed + "/iframe/";
30
33
  };
31
34
  var createIframeElement = (src) => {
32
35
  const iframe = document.createElement("iframe");
@@ -34,7 +37,7 @@ var createIframeElement = (src) => {
34
37
  iframe.title = "FlintN Checkout";
35
38
  iframe.style.cssText = "width: 100%; height: 100%; border: none;";
36
39
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
37
- iframe.setAttribute("allow", "payment; clipboard-write");
40
+ iframe.setAttribute("allow", "payment *; clipboard-write");
38
41
  return iframe;
39
42
  };
40
43
  var validateConfig = (config) => {
@@ -48,7 +51,7 @@ var sanitizeToken = (token) => {
48
51
  };
49
52
 
50
53
  // src/flintn-payment.ts
51
- var DEFAULT_ORIGIN = "https://pay.flintn.com/iframe";
54
+ var DEFAULT_ORIGIN = "https://pay.flintn.com";
52
55
  var FlintNPayment = class {
53
56
  constructor(options) {
54
57
  this.iframe = null;
@@ -206,8 +209,9 @@ function useFlintNPayment(options) {
206
209
  options.origin,
207
210
  options.debug,
208
211
  options.config.clientSessionId,
209
- options.config.isCardHolderRequired,
210
- options.config.successRedirectUrl
212
+ options.config.successRedirectUrl,
213
+ JSON.stringify(options.config.formFields),
214
+ JSON.stringify(options.config.styles)
211
215
  ]);
212
216
  return {
213
217
  containerRef,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flintn-checkout",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
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",