flintn-checkout 0.0.14 → 0.0.15
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.
- package/README.md +40 -1
- package/dist/index.d.mts +22 -1
- package/dist/index.d.ts +22 -1
- package/dist/react.d.mts +21 -0
- package/dist/react.d.ts +21 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -243,7 +243,8 @@ Do **not** set a fixed `height` on the container — it will leave empty space b
|
|
|
243
243
|
|----------|------|----------|-------------|
|
|
244
244
|
| `clientSessionId` | `string` | Yes | Client session ID from backend |
|
|
245
245
|
| `formFields` | `FormFields` | No | Form display options — layout via `formVariant`. Field visibility and requirements are controlled by the merchant session configuration, not SDK options |
|
|
246
|
-
| `styles` | `FormStyles` | No | Custom styles for the checkout form |
|
|
246
|
+
| `styles` | `FormStyles` | No | Custom styles (colors, border radius, text) for the checkout form |
|
|
247
|
+
| `placeholders` | `FormPlaceholders` | No | Per-field placeholder text overrides (see `FormPlaceholders`) |
|
|
247
248
|
| `successRedirectUrl` | `string` | No | Redirect URL after successful payment |
|
|
248
249
|
|
|
249
250
|
### React Hook Return Values
|
|
@@ -619,8 +620,13 @@ interface FormStyles {
|
|
|
619
620
|
inputBorderHoverColor?: string;
|
|
620
621
|
inputBorderFocusColor?: string;
|
|
621
622
|
inputBorderErrorColor?: string;
|
|
623
|
+
inputTextColor?: string;
|
|
624
|
+
inputFontSize?: string;
|
|
625
|
+
inputHeight?: string;
|
|
626
|
+
placeholderColor?: string;
|
|
622
627
|
errorMessageColor?: string;
|
|
623
628
|
labelColor?: string;
|
|
629
|
+
labelFontSize?: string;
|
|
624
630
|
dividerColor?: string;
|
|
625
631
|
dividerTextColor?: string;
|
|
626
632
|
safeCheckoutAccentColor?: string;
|
|
@@ -637,6 +643,8 @@ interface FormStyles {
|
|
|
637
643
|
buttonColor?: string;
|
|
638
644
|
buttonHoverColor?: string;
|
|
639
645
|
buttonBorderRadius?: string;
|
|
646
|
+
buttonHeight?: string;
|
|
647
|
+
buttonFontSize?: string;
|
|
640
648
|
buttonText?: string;
|
|
641
649
|
cardButtonColor?: string;
|
|
642
650
|
cardButtonHoverColor?: string;
|
|
@@ -644,6 +652,30 @@ interface FormStyles {
|
|
|
644
652
|
}
|
|
645
653
|
```
|
|
646
654
|
|
|
655
|
+
### FormPlaceholders
|
|
656
|
+
|
|
657
|
+
```typescript
|
|
658
|
+
interface FormPlaceholders {
|
|
659
|
+
email?: string;
|
|
660
|
+
cardNumber?: string;
|
|
661
|
+
expiry?: string;
|
|
662
|
+
cvv?: string;
|
|
663
|
+
cardholderName?: string;
|
|
664
|
+
addressLine1?: string;
|
|
665
|
+
addressLine2?: string;
|
|
666
|
+
city?: string;
|
|
667
|
+
state?: string;
|
|
668
|
+
postalCode?: string;
|
|
669
|
+
country?: string;
|
|
670
|
+
}
|
|
671
|
+
```
|
|
672
|
+
|
|
673
|
+
Per-field placeholder text overrides for the **iframe checkout** form, passed as
|
|
674
|
+
`config.placeholders` (not under `styles` — placeholder text is field content, not
|
|
675
|
+
visual styling). Any field left undefined keeps its built-in default placeholder.
|
|
676
|
+
For **hosted fields**, set placeholder text per field via the `placeholder` option
|
|
677
|
+
on `createField` (or the `fields` prop of `useFlintNFields`) instead.
|
|
678
|
+
|
|
647
679
|
### FormStyles Reference
|
|
648
680
|
|
|
649
681
|
| Property | Iframe Checkout | Hosted Fields | Description |
|
|
@@ -659,8 +691,13 @@ interface FormStyles {
|
|
|
659
691
|
| `inputBorderHoverColor` | ✅ | ✅ | Input border color on hover |
|
|
660
692
|
| `inputBorderFocusColor` | ✅ | ✅ | Input border color on focus |
|
|
661
693
|
| `inputBorderErrorColor` | ✅ | ✅ | Input border color in error state |
|
|
694
|
+
| `inputTextColor` | ✅ | ✅ | Input text (typed value) color |
|
|
695
|
+
| `inputFontSize` | ✅ | ✅ | Input text font size (e.g. `16px`) |
|
|
696
|
+
| `inputHeight` | ✅ | ✅ | Total input field height, border included (e.g. `48px`; default `40px`) |
|
|
697
|
+
| `placeholderColor` | ✅ | ✅ | Input placeholder text color |
|
|
662
698
|
| `errorMessageColor` | ✅ | — | Error message text color |
|
|
663
699
|
| `labelColor` | ✅ | — | Field label text color |
|
|
700
|
+
| `labelFontSize` | ✅ | — | Field label font size (e.g. `14px`) |
|
|
664
701
|
| `dividerColor` | ✅ | — | Divider line color ("or" + "safe checkout" dividers) |
|
|
665
702
|
| `dividerTextColor` | ✅ | — | "or" divider text color |
|
|
666
703
|
| `safeCheckoutAccentColor` | ✅ | — | "Safe" accent word color (defaults to theme success) |
|
|
@@ -677,6 +714,8 @@ interface FormStyles {
|
|
|
677
714
|
| `buttonColor` | ✅ | — | Submit button background color |
|
|
678
715
|
| `buttonHoverColor` | ✅ | — | Submit button hover color |
|
|
679
716
|
| `buttonBorderRadius` | ✅ | — | Submit button border radius |
|
|
717
|
+
| `buttonHeight` | ✅ | — | Submit button height (e.g. `48px`; default `40px`) |
|
|
718
|
+
| `buttonFontSize` | ✅ | — | Submit button text font size (e.g. `16px`; default `14px`) |
|
|
680
719
|
| `buttonText` | ✅ | — | Custom submit button text |
|
|
681
720
|
| `cardButtonColor` | ✅ | — | Card button color (LIST variant) |
|
|
682
721
|
| `cardButtonHoverColor` | ✅ | — | Card button hover color (LIST variant) |
|
package/dist/index.d.mts
CHANGED
|
@@ -20,6 +20,19 @@ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFo
|
|
|
20
20
|
interface FormFields {
|
|
21
21
|
formVariant?: TCheckoutFormVariant;
|
|
22
22
|
}
|
|
23
|
+
interface FormPlaceholders {
|
|
24
|
+
email?: string;
|
|
25
|
+
cardNumber?: string;
|
|
26
|
+
expiry?: string;
|
|
27
|
+
cvv?: string;
|
|
28
|
+
cardholderName?: string;
|
|
29
|
+
addressLine1?: string;
|
|
30
|
+
addressLine2?: string;
|
|
31
|
+
city?: string;
|
|
32
|
+
state?: string;
|
|
33
|
+
postalCode?: string;
|
|
34
|
+
country?: string;
|
|
35
|
+
}
|
|
23
36
|
interface FormStyles {
|
|
24
37
|
loaderColor?: string;
|
|
25
38
|
backgroundColor?: string;
|
|
@@ -32,8 +45,13 @@ interface FormStyles {
|
|
|
32
45
|
inputBorderHoverColor?: string;
|
|
33
46
|
inputBorderFocusColor?: string;
|
|
34
47
|
inputBorderErrorColor?: string;
|
|
48
|
+
inputTextColor?: string;
|
|
49
|
+
inputFontSize?: string;
|
|
50
|
+
inputHeight?: string;
|
|
51
|
+
placeholderColor?: string;
|
|
35
52
|
errorMessageColor?: string;
|
|
36
53
|
labelColor?: string;
|
|
54
|
+
labelFontSize?: string;
|
|
37
55
|
dividerColor?: string;
|
|
38
56
|
dividerTextColor?: string;
|
|
39
57
|
safeCheckoutAccentColor?: string;
|
|
@@ -50,6 +68,8 @@ interface FormStyles {
|
|
|
50
68
|
buttonColor?: string;
|
|
51
69
|
buttonHoverColor?: string;
|
|
52
70
|
buttonBorderRadius?: string;
|
|
71
|
+
buttonHeight?: string;
|
|
72
|
+
buttonFontSize?: string;
|
|
53
73
|
buttonText?: string;
|
|
54
74
|
cardButtonColor?: string;
|
|
55
75
|
cardButtonHoverColor?: string;
|
|
@@ -59,6 +79,7 @@ interface FlintNConfig {
|
|
|
59
79
|
clientSessionId: string;
|
|
60
80
|
formFields?: FormFields;
|
|
61
81
|
styles?: FormStyles;
|
|
82
|
+
placeholders?: FormPlaceholders;
|
|
62
83
|
successRedirectUrl?: string;
|
|
63
84
|
}
|
|
64
85
|
declare const PaymentMethod: {
|
|
@@ -244,4 +265,4 @@ declare const validateConfig: (config: {
|
|
|
244
265
|
}) => void;
|
|
245
266
|
declare const sanitizeToken: (token: string) => string;
|
|
246
267
|
|
|
247
|
-
export { type CheckoutEvent, CheckoutFormVariant, CheckoutView, EventType, type FieldChangeEvent, FieldEventType, type FieldOptions, type FieldState, FieldType, type FieldValidationResult, type FieldsValidationResult, type FlintNConfig, type FlintNField, type FlintNFieldInternalCallbacks, type FlintNFields, type FlintNFieldsConfig, type FlintNFieldsOptions, type FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentAttempt, PaymentAttemptResult, type PaymentError, PaymentMethod, type PaymentResult, type PaymentUI, PaymentUIEvent, type SubmitOptions, type TCheckoutFormVariant, type TCheckoutView, type TEventType, type TFieldEventType, type TFieldType, type TPaymentAttemptResult, type TPaymentMethod, type TPaymentUIEvent, buildIframeSrc, createFlintNField, createFlintNFields, createFlintNPayment, createIframeElement, isAttemptEvent, isUIEvent, parseOrigin, sanitizeToken, validateConfig };
|
|
268
|
+
export { type CheckoutEvent, CheckoutFormVariant, CheckoutView, EventType, type FieldChangeEvent, FieldEventType, type FieldOptions, type FieldState, FieldType, type FieldValidationResult, type FieldsValidationResult, type FlintNConfig, type FlintNField, type FlintNFieldInternalCallbacks, type FlintNFields, type FlintNFieldsConfig, type FlintNFieldsOptions, type FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormPlaceholders, type FormStyles, type PaymentAttempt, PaymentAttemptResult, type PaymentError, PaymentMethod, type PaymentResult, type PaymentUI, PaymentUIEvent, type SubmitOptions, type TCheckoutFormVariant, type TCheckoutView, type TEventType, type TFieldEventType, type TFieldType, type TPaymentAttemptResult, type TPaymentMethod, type TPaymentUIEvent, buildIframeSrc, createFlintNField, createFlintNFields, createFlintNPayment, createIframeElement, isAttemptEvent, isUIEvent, parseOrigin, sanitizeToken, validateConfig };
|
package/dist/index.d.ts
CHANGED
|
@@ -20,6 +20,19 @@ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFo
|
|
|
20
20
|
interface FormFields {
|
|
21
21
|
formVariant?: TCheckoutFormVariant;
|
|
22
22
|
}
|
|
23
|
+
interface FormPlaceholders {
|
|
24
|
+
email?: string;
|
|
25
|
+
cardNumber?: string;
|
|
26
|
+
expiry?: string;
|
|
27
|
+
cvv?: string;
|
|
28
|
+
cardholderName?: string;
|
|
29
|
+
addressLine1?: string;
|
|
30
|
+
addressLine2?: string;
|
|
31
|
+
city?: string;
|
|
32
|
+
state?: string;
|
|
33
|
+
postalCode?: string;
|
|
34
|
+
country?: string;
|
|
35
|
+
}
|
|
23
36
|
interface FormStyles {
|
|
24
37
|
loaderColor?: string;
|
|
25
38
|
backgroundColor?: string;
|
|
@@ -32,8 +45,13 @@ interface FormStyles {
|
|
|
32
45
|
inputBorderHoverColor?: string;
|
|
33
46
|
inputBorderFocusColor?: string;
|
|
34
47
|
inputBorderErrorColor?: string;
|
|
48
|
+
inputTextColor?: string;
|
|
49
|
+
inputFontSize?: string;
|
|
50
|
+
inputHeight?: string;
|
|
51
|
+
placeholderColor?: string;
|
|
35
52
|
errorMessageColor?: string;
|
|
36
53
|
labelColor?: string;
|
|
54
|
+
labelFontSize?: string;
|
|
37
55
|
dividerColor?: string;
|
|
38
56
|
dividerTextColor?: string;
|
|
39
57
|
safeCheckoutAccentColor?: string;
|
|
@@ -50,6 +68,8 @@ interface FormStyles {
|
|
|
50
68
|
buttonColor?: string;
|
|
51
69
|
buttonHoverColor?: string;
|
|
52
70
|
buttonBorderRadius?: string;
|
|
71
|
+
buttonHeight?: string;
|
|
72
|
+
buttonFontSize?: string;
|
|
53
73
|
buttonText?: string;
|
|
54
74
|
cardButtonColor?: string;
|
|
55
75
|
cardButtonHoverColor?: string;
|
|
@@ -59,6 +79,7 @@ interface FlintNConfig {
|
|
|
59
79
|
clientSessionId: string;
|
|
60
80
|
formFields?: FormFields;
|
|
61
81
|
styles?: FormStyles;
|
|
82
|
+
placeholders?: FormPlaceholders;
|
|
62
83
|
successRedirectUrl?: string;
|
|
63
84
|
}
|
|
64
85
|
declare const PaymentMethod: {
|
|
@@ -244,4 +265,4 @@ declare const validateConfig: (config: {
|
|
|
244
265
|
}) => void;
|
|
245
266
|
declare const sanitizeToken: (token: string) => string;
|
|
246
267
|
|
|
247
|
-
export { type CheckoutEvent, CheckoutFormVariant, CheckoutView, EventType, type FieldChangeEvent, FieldEventType, type FieldOptions, type FieldState, FieldType, type FieldValidationResult, type FieldsValidationResult, type FlintNConfig, type FlintNField, type FlintNFieldInternalCallbacks, type FlintNFields, type FlintNFieldsConfig, type FlintNFieldsOptions, type FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentAttempt, PaymentAttemptResult, type PaymentError, PaymentMethod, type PaymentResult, type PaymentUI, PaymentUIEvent, type SubmitOptions, type TCheckoutFormVariant, type TCheckoutView, type TEventType, type TFieldEventType, type TFieldType, type TPaymentAttemptResult, type TPaymentMethod, type TPaymentUIEvent, buildIframeSrc, createFlintNField, createFlintNFields, createFlintNPayment, createIframeElement, isAttemptEvent, isUIEvent, parseOrigin, sanitizeToken, validateConfig };
|
|
268
|
+
export { type CheckoutEvent, CheckoutFormVariant, CheckoutView, EventType, type FieldChangeEvent, FieldEventType, type FieldOptions, type FieldState, FieldType, type FieldValidationResult, type FieldsValidationResult, type FlintNConfig, type FlintNField, type FlintNFieldInternalCallbacks, type FlintNFields, type FlintNFieldsConfig, type FlintNFieldsOptions, type FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormPlaceholders, type FormStyles, type PaymentAttempt, PaymentAttemptResult, type PaymentError, PaymentMethod, type PaymentResult, type PaymentUI, PaymentUIEvent, type SubmitOptions, type TCheckoutFormVariant, type TCheckoutView, type TEventType, type TFieldEventType, type TFieldType, type TPaymentAttemptResult, type TPaymentMethod, type TPaymentUIEvent, buildIframeSrc, createFlintNField, createFlintNFields, createFlintNPayment, createIframeElement, isAttemptEvent, isUIEvent, parseOrigin, sanitizeToken, validateConfig };
|
package/dist/react.d.mts
CHANGED
|
@@ -19,6 +19,19 @@ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFo
|
|
|
19
19
|
interface FormFields {
|
|
20
20
|
formVariant?: TCheckoutFormVariant;
|
|
21
21
|
}
|
|
22
|
+
interface FormPlaceholders {
|
|
23
|
+
email?: string;
|
|
24
|
+
cardNumber?: string;
|
|
25
|
+
expiry?: string;
|
|
26
|
+
cvv?: string;
|
|
27
|
+
cardholderName?: string;
|
|
28
|
+
addressLine1?: string;
|
|
29
|
+
addressLine2?: string;
|
|
30
|
+
city?: string;
|
|
31
|
+
state?: string;
|
|
32
|
+
postalCode?: string;
|
|
33
|
+
country?: string;
|
|
34
|
+
}
|
|
22
35
|
interface FormStyles {
|
|
23
36
|
loaderColor?: string;
|
|
24
37
|
backgroundColor?: string;
|
|
@@ -31,8 +44,13 @@ interface FormStyles {
|
|
|
31
44
|
inputBorderHoverColor?: string;
|
|
32
45
|
inputBorderFocusColor?: string;
|
|
33
46
|
inputBorderErrorColor?: string;
|
|
47
|
+
inputTextColor?: string;
|
|
48
|
+
inputFontSize?: string;
|
|
49
|
+
inputHeight?: string;
|
|
50
|
+
placeholderColor?: string;
|
|
34
51
|
errorMessageColor?: string;
|
|
35
52
|
labelColor?: string;
|
|
53
|
+
labelFontSize?: string;
|
|
36
54
|
dividerColor?: string;
|
|
37
55
|
dividerTextColor?: string;
|
|
38
56
|
safeCheckoutAccentColor?: string;
|
|
@@ -49,6 +67,8 @@ interface FormStyles {
|
|
|
49
67
|
buttonColor?: string;
|
|
50
68
|
buttonHoverColor?: string;
|
|
51
69
|
buttonBorderRadius?: string;
|
|
70
|
+
buttonHeight?: string;
|
|
71
|
+
buttonFontSize?: string;
|
|
52
72
|
buttonText?: string;
|
|
53
73
|
cardButtonColor?: string;
|
|
54
74
|
cardButtonHoverColor?: string;
|
|
@@ -58,6 +78,7 @@ interface FlintNConfig {
|
|
|
58
78
|
clientSessionId: string;
|
|
59
79
|
formFields?: FormFields;
|
|
60
80
|
styles?: FormStyles;
|
|
81
|
+
placeholders?: FormPlaceholders;
|
|
61
82
|
successRedirectUrl?: string;
|
|
62
83
|
}
|
|
63
84
|
declare const PaymentMethod: {
|
package/dist/react.d.ts
CHANGED
|
@@ -19,6 +19,19 @@ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFo
|
|
|
19
19
|
interface FormFields {
|
|
20
20
|
formVariant?: TCheckoutFormVariant;
|
|
21
21
|
}
|
|
22
|
+
interface FormPlaceholders {
|
|
23
|
+
email?: string;
|
|
24
|
+
cardNumber?: string;
|
|
25
|
+
expiry?: string;
|
|
26
|
+
cvv?: string;
|
|
27
|
+
cardholderName?: string;
|
|
28
|
+
addressLine1?: string;
|
|
29
|
+
addressLine2?: string;
|
|
30
|
+
city?: string;
|
|
31
|
+
state?: string;
|
|
32
|
+
postalCode?: string;
|
|
33
|
+
country?: string;
|
|
34
|
+
}
|
|
22
35
|
interface FormStyles {
|
|
23
36
|
loaderColor?: string;
|
|
24
37
|
backgroundColor?: string;
|
|
@@ -31,8 +44,13 @@ interface FormStyles {
|
|
|
31
44
|
inputBorderHoverColor?: string;
|
|
32
45
|
inputBorderFocusColor?: string;
|
|
33
46
|
inputBorderErrorColor?: string;
|
|
47
|
+
inputTextColor?: string;
|
|
48
|
+
inputFontSize?: string;
|
|
49
|
+
inputHeight?: string;
|
|
50
|
+
placeholderColor?: string;
|
|
34
51
|
errorMessageColor?: string;
|
|
35
52
|
labelColor?: string;
|
|
53
|
+
labelFontSize?: string;
|
|
36
54
|
dividerColor?: string;
|
|
37
55
|
dividerTextColor?: string;
|
|
38
56
|
safeCheckoutAccentColor?: string;
|
|
@@ -49,6 +67,8 @@ interface FormStyles {
|
|
|
49
67
|
buttonColor?: string;
|
|
50
68
|
buttonHoverColor?: string;
|
|
51
69
|
buttonBorderRadius?: string;
|
|
70
|
+
buttonHeight?: string;
|
|
71
|
+
buttonFontSize?: string;
|
|
52
72
|
buttonText?: string;
|
|
53
73
|
cardButtonColor?: string;
|
|
54
74
|
cardButtonHoverColor?: string;
|
|
@@ -58,6 +78,7 @@ interface FlintNConfig {
|
|
|
58
78
|
clientSessionId: string;
|
|
59
79
|
formFields?: FormFields;
|
|
60
80
|
styles?: FormStyles;
|
|
81
|
+
placeholders?: FormPlaceholders;
|
|
61
82
|
successRedirectUrl?: string;
|
|
62
83
|
}
|
|
63
84
|
declare const PaymentMethod: {
|
package/package.json
CHANGED