flintn-checkout 0.0.3 → 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 -2
  3. package/dist/index.d.ts +21 -2
  4. package/dist/index.js +2 -1
  5. package/dist/index.mjs +2 -1
  6. package/dist/react.d.mts +21 -2
  7. package/dist/react.d.ts +21 -2
  8. package/dist/react.js +5 -3
  9. package/dist/react.mjs +5 -3
  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,9 +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
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
15
34
  successRedirectUrl?: string;
16
35
  }
17
36
  interface PaymentResult {
@@ -62,4 +81,4 @@ declare const validateConfig: (config: {
62
81
  }) => void;
63
82
  declare const sanitizeToken: (token: string) => string;
64
83
 
65
- 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,9 +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
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
15
34
  successRedirectUrl?: string;
16
35
  }
17
36
  interface PaymentResult {
@@ -62,4 +81,4 @@ declare const validateConfig: (config: {
62
81
  }) => void;
63
82
  declare const sanitizeToken: (token: string) => string;
64
83
 
65
- 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
@@ -56,7 +56,8 @@ var parseOrigin = (origin) => {
56
56
  };
57
57
  var buildIframeSrc = (origin) => {
58
58
  const parsed = parseOrigin(origin);
59
- if (parsed.includes("localhost")) return parsed + "/";
59
+ const { hostname } = new URL(parsed);
60
+ if (hostname === "localhost") return parsed + "/";
60
61
  return parsed + "/iframe/";
61
62
  };
62
63
  var createIframeElement = (src) => {
package/dist/index.mjs CHANGED
@@ -24,7 +24,8 @@ var parseOrigin = (origin) => {
24
24
  };
25
25
  var buildIframeSrc = (origin) => {
26
26
  const parsed = parseOrigin(origin);
27
- if (parsed.includes("localhost")) return parsed + "/";
27
+ const { hostname } = new URL(parsed);
28
+ if (hostname === "localhost") return parsed + "/";
28
29
  return parsed + "/iframe/";
29
30
  };
30
31
  var createIframeElement = (src) => {
package/dist/react.d.mts CHANGED
@@ -9,9 +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
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
15
34
  successRedirectUrl?: string;
16
35
  }
17
36
  interface PaymentResult {
@@ -56,4 +75,4 @@ interface UseFlintNPaymentReturn {
56
75
  }
57
76
  declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
58
77
 
59
- 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,9 +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
- isCardHolderRequired?: boolean;
32
+ formFields?: FormFields;
33
+ styles?: FormStyles;
15
34
  successRedirectUrl?: string;
16
35
  }
17
36
  interface PaymentResult {
@@ -56,4 +75,4 @@ interface UseFlintNPaymentReturn {
56
75
  }
57
76
  declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
58
77
 
59
- 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
@@ -54,7 +54,8 @@ var parseOrigin = (origin) => {
54
54
  };
55
55
  var buildIframeSrc = (origin) => {
56
56
  const parsed = parseOrigin(origin);
57
- if (parsed.includes("localhost")) return parsed + "/";
57
+ const { hostname } = new URL(parsed);
58
+ if (hostname === "localhost") return parsed + "/";
58
59
  return parsed + "/iframe/";
59
60
  };
60
61
  var createIframeElement = (src) => {
@@ -235,8 +236,9 @@ function useFlintNPayment(options) {
235
236
  options.origin,
236
237
  options.debug,
237
238
  options.config.clientSessionId,
238
- options.config.isCardHolderRequired,
239
- options.config.successRedirectUrl
239
+ options.config.successRedirectUrl,
240
+ JSON.stringify(options.config.formFields),
241
+ JSON.stringify(options.config.styles)
240
242
  ]);
241
243
  return {
242
244
  containerRef,
package/dist/react.mjs CHANGED
@@ -27,7 +27,8 @@ var parseOrigin = (origin) => {
27
27
  };
28
28
  var buildIframeSrc = (origin) => {
29
29
  const parsed = parseOrigin(origin);
30
- if (parsed.includes("localhost")) return parsed + "/";
30
+ const { hostname } = new URL(parsed);
31
+ if (hostname === "localhost") return parsed + "/";
31
32
  return parsed + "/iframe/";
32
33
  };
33
34
  var createIframeElement = (src) => {
@@ -208,8 +209,9 @@ function useFlintNPayment(options) {
208
209
  options.origin,
209
210
  options.debug,
210
211
  options.config.clientSessionId,
211
- options.config.isCardHolderRequired,
212
- options.config.successRedirectUrl
212
+ options.config.successRedirectUrl,
213
+ JSON.stringify(options.config.formFields),
214
+ JSON.stringify(options.config.styles)
213
215
  ]);
214
216
  return {
215
217
  containerRef,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flintn-checkout",
3
- "version": "0.0.3",
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",