flintn-checkout 0.0.13 → 0.0.14
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 +38 -5
- package/dist/index.d.mts +16 -2
- package/dist/index.d.ts +16 -2
- package/dist/react.d.mts +16 -2
- package/dist/react.d.ts +16 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ npm install flintn-checkout
|
|
|
10
10
|
|
|
11
11
|
## Iframe Checkout
|
|
12
12
|
|
|
13
|
-
Full checkout UI rendered inside a single iframe. Includes card form, express payments (Apple Pay,
|
|
13
|
+
Full checkout UI rendered inside a single iframe. Includes card form, express payments (Apple Pay, PayPal), and 3DS handling.
|
|
14
14
|
|
|
15
15
|
**React**
|
|
16
16
|
|
|
@@ -242,7 +242,7 @@ Do **not** set a fixed `height` on the container — it will leave empty space b
|
|
|
242
242
|
| Property | Type | Required | Description |
|
|
243
243
|
|----------|------|----------|-------------|
|
|
244
244
|
| `clientSessionId` | `string` | Yes | Client session ID from backend |
|
|
245
|
-
| `formFields` | `FormFields` | No | Form
|
|
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
246
|
| `styles` | `FormStyles` | No | Custom styles for the checkout form |
|
|
247
247
|
| `successRedirectUrl` | `string` | No | Redirect URL after successful payment |
|
|
248
248
|
|
|
@@ -597,18 +597,22 @@ interface FieldsValidationResult {
|
|
|
597
597
|
### FormFields
|
|
598
598
|
```typescript
|
|
599
599
|
interface FormFields {
|
|
600
|
-
isEmailVisible?: boolean; // Primer only
|
|
601
|
-
isCardholderNameRequired?: boolean; // Primer only
|
|
602
600
|
formVariant?: 'DEFAULT' | 'LIST' | 'RADIO';
|
|
603
601
|
}
|
|
604
602
|
```
|
|
605
603
|
|
|
604
|
+
> **Note:** form field visibility and requirements (e.g. email, cardholder
|
|
605
|
+
> name) are controlled by the merchant's session configuration, not by SDK
|
|
606
|
+
> options. Use `formVariant` to control the checkout layout.
|
|
607
|
+
|
|
606
608
|
### FormStyles
|
|
607
609
|
```typescript
|
|
608
610
|
interface FormStyles {
|
|
609
611
|
loaderColor?: string;
|
|
610
612
|
backgroundColor?: string;
|
|
613
|
+
lightLogos?: boolean;
|
|
611
614
|
expressButtonsSpacing?: string;
|
|
615
|
+
expressButtonsBorderRadius?: string;
|
|
612
616
|
inputBackgroundColor?: string;
|
|
613
617
|
inputBorderRadius?: string;
|
|
614
618
|
inputBorderColor?: string;
|
|
@@ -616,6 +620,20 @@ interface FormStyles {
|
|
|
616
620
|
inputBorderFocusColor?: string;
|
|
617
621
|
inputBorderErrorColor?: string;
|
|
618
622
|
errorMessageColor?: string;
|
|
623
|
+
labelColor?: string;
|
|
624
|
+
dividerColor?: string;
|
|
625
|
+
dividerTextColor?: string;
|
|
626
|
+
safeCheckoutAccentColor?: string;
|
|
627
|
+
safeCheckoutTextColor?: string;
|
|
628
|
+
radioOptionBorderColor?: string;
|
|
629
|
+
radioOptionBorderRadius?: string;
|
|
630
|
+
radioOptionBackgroundColor?: string;
|
|
631
|
+
radioOptionActiveBackgroundColor?: string;
|
|
632
|
+
radioOptionTitleColor?: string;
|
|
633
|
+
radioButtonColor?: string;
|
|
634
|
+
radioButtonActiveColor?: string;
|
|
635
|
+
fastCheckoutText?: string;
|
|
636
|
+
cardPaymentText?: string;
|
|
619
637
|
buttonColor?: string;
|
|
620
638
|
buttonHoverColor?: string;
|
|
621
639
|
buttonBorderRadius?: string;
|
|
@@ -632,7 +650,9 @@ interface FormStyles {
|
|
|
632
650
|
|----------|:-:|:-:|-------------|
|
|
633
651
|
| `loaderColor` | ✅ | — | Loading spinner color |
|
|
634
652
|
| `backgroundColor` | ✅ | — | Form background color |
|
|
653
|
+
| `lightLogos` | ✅ | — | Use light logo variants in the safe-checkout row (for dark backgrounds) |
|
|
635
654
|
| `expressButtonsSpacing` | ✅ | — | Spacing between express payment buttons |
|
|
655
|
+
| `expressButtonsBorderRadius` | ✅ | — | Corner radius for express buttons — Apple Pay, Google Pay, PayPal, and the "Credit or debit card" button in the LIST variant (e.g. `8px`) |
|
|
636
656
|
| `inputBackgroundColor` | ✅ | ✅ | Input field background color |
|
|
637
657
|
| `inputBorderRadius` | ✅ | ✅ | Input field border radius |
|
|
638
658
|
| `inputBorderColor` | ✅ | ✅ | Default input border color |
|
|
@@ -640,6 +660,20 @@ interface FormStyles {
|
|
|
640
660
|
| `inputBorderFocusColor` | ✅ | ✅ | Input border color on focus |
|
|
641
661
|
| `inputBorderErrorColor` | ✅ | ✅ | Input border color in error state |
|
|
642
662
|
| `errorMessageColor` | ✅ | — | Error message text color |
|
|
663
|
+
| `labelColor` | ✅ | — | Field label text color |
|
|
664
|
+
| `dividerColor` | ✅ | — | Divider line color ("or" + "safe checkout" dividers) |
|
|
665
|
+
| `dividerTextColor` | ✅ | — | "or" divider text color |
|
|
666
|
+
| `safeCheckoutAccentColor` | ✅ | — | "Safe" accent word color (defaults to theme success) |
|
|
667
|
+
| `safeCheckoutTextColor` | ✅ | — | "Checkout" word color in the safe-checkout divider |
|
|
668
|
+
| `radioOptionBorderColor` | ✅ | — | Radio option card border color (RADIO variant) |
|
|
669
|
+
| `radioOptionBorderRadius` | ✅ | — | Radio option card border radius (RADIO variant) |
|
|
670
|
+
| `radioOptionBackgroundColor` | ✅ | — | Radio option card background, inactive (RADIO variant) |
|
|
671
|
+
| `radioOptionActiveBackgroundColor` | ✅ | — | Radio option card background, active (RADIO variant) |
|
|
672
|
+
| `radioOptionTitleColor` | ✅ | — | Radio option title text color (RADIO variant) |
|
|
673
|
+
| `radioButtonColor` | ✅ | — | Radio button color, unselected (RADIO variant) |
|
|
674
|
+
| `radioButtonActiveColor` | ✅ | — | Radio button color, selected (RADIO variant) |
|
|
675
|
+
| `fastCheckoutText` | ✅ | — | Custom "Fast checkout" option label (RADIO variant) |
|
|
676
|
+
| `cardPaymentText` | ✅ | — | Custom "Card payment" option label (RADIO variant) |
|
|
643
677
|
| `buttonColor` | ✅ | — | Submit button background color |
|
|
644
678
|
| `buttonHoverColor` | ✅ | — | Submit button hover color |
|
|
645
679
|
| `buttonBorderRadius` | ✅ | — | Submit button border radius |
|
|
@@ -677,7 +711,6 @@ Every cancellation still emits a `CANCELLED` `onEvent` regardless of variant, so
|
|
|
677
711
|
### Iframe Checkout
|
|
678
712
|
- Credit/Debit Cards (Visa, Mastercard, Amex, Discover)
|
|
679
713
|
- Apple Pay
|
|
680
|
-
- Google Pay
|
|
681
714
|
- PayPal
|
|
682
715
|
|
|
683
716
|
### Hosted Fields
|
package/dist/index.d.mts
CHANGED
|
@@ -18,14 +18,14 @@ declare const CheckoutFormVariant: {
|
|
|
18
18
|
};
|
|
19
19
|
type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
|
|
20
20
|
interface FormFields {
|
|
21
|
-
isEmailVisible?: boolean;
|
|
22
|
-
isCardholderNameRequired?: boolean;
|
|
23
21
|
formVariant?: TCheckoutFormVariant;
|
|
24
22
|
}
|
|
25
23
|
interface FormStyles {
|
|
26
24
|
loaderColor?: string;
|
|
27
25
|
backgroundColor?: string;
|
|
26
|
+
lightLogos?: boolean;
|
|
28
27
|
expressButtonsSpacing?: string;
|
|
28
|
+
expressButtonsBorderRadius?: string;
|
|
29
29
|
inputBackgroundColor?: string;
|
|
30
30
|
inputBorderRadius?: string;
|
|
31
31
|
inputBorderColor?: string;
|
|
@@ -33,6 +33,20 @@ interface FormStyles {
|
|
|
33
33
|
inputBorderFocusColor?: string;
|
|
34
34
|
inputBorderErrorColor?: string;
|
|
35
35
|
errorMessageColor?: string;
|
|
36
|
+
labelColor?: string;
|
|
37
|
+
dividerColor?: string;
|
|
38
|
+
dividerTextColor?: string;
|
|
39
|
+
safeCheckoutAccentColor?: string;
|
|
40
|
+
safeCheckoutTextColor?: string;
|
|
41
|
+
radioOptionBorderColor?: string;
|
|
42
|
+
radioOptionBorderRadius?: string;
|
|
43
|
+
radioOptionBackgroundColor?: string;
|
|
44
|
+
radioOptionActiveBackgroundColor?: string;
|
|
45
|
+
radioOptionTitleColor?: string;
|
|
46
|
+
radioButtonColor?: string;
|
|
47
|
+
radioButtonActiveColor?: string;
|
|
48
|
+
fastCheckoutText?: string;
|
|
49
|
+
cardPaymentText?: string;
|
|
36
50
|
buttonColor?: string;
|
|
37
51
|
buttonHoverColor?: string;
|
|
38
52
|
buttonBorderRadius?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -18,14 +18,14 @@ declare const CheckoutFormVariant: {
|
|
|
18
18
|
};
|
|
19
19
|
type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
|
|
20
20
|
interface FormFields {
|
|
21
|
-
isEmailVisible?: boolean;
|
|
22
|
-
isCardholderNameRequired?: boolean;
|
|
23
21
|
formVariant?: TCheckoutFormVariant;
|
|
24
22
|
}
|
|
25
23
|
interface FormStyles {
|
|
26
24
|
loaderColor?: string;
|
|
27
25
|
backgroundColor?: string;
|
|
26
|
+
lightLogos?: boolean;
|
|
28
27
|
expressButtonsSpacing?: string;
|
|
28
|
+
expressButtonsBorderRadius?: string;
|
|
29
29
|
inputBackgroundColor?: string;
|
|
30
30
|
inputBorderRadius?: string;
|
|
31
31
|
inputBorderColor?: string;
|
|
@@ -33,6 +33,20 @@ interface FormStyles {
|
|
|
33
33
|
inputBorderFocusColor?: string;
|
|
34
34
|
inputBorderErrorColor?: string;
|
|
35
35
|
errorMessageColor?: string;
|
|
36
|
+
labelColor?: string;
|
|
37
|
+
dividerColor?: string;
|
|
38
|
+
dividerTextColor?: string;
|
|
39
|
+
safeCheckoutAccentColor?: string;
|
|
40
|
+
safeCheckoutTextColor?: string;
|
|
41
|
+
radioOptionBorderColor?: string;
|
|
42
|
+
radioOptionBorderRadius?: string;
|
|
43
|
+
radioOptionBackgroundColor?: string;
|
|
44
|
+
radioOptionActiveBackgroundColor?: string;
|
|
45
|
+
radioOptionTitleColor?: string;
|
|
46
|
+
radioButtonColor?: string;
|
|
47
|
+
radioButtonActiveColor?: string;
|
|
48
|
+
fastCheckoutText?: string;
|
|
49
|
+
cardPaymentText?: string;
|
|
36
50
|
buttonColor?: string;
|
|
37
51
|
buttonHoverColor?: string;
|
|
38
52
|
buttonBorderRadius?: string;
|
package/dist/react.d.mts
CHANGED
|
@@ -17,14 +17,14 @@ declare const CheckoutFormVariant: {
|
|
|
17
17
|
};
|
|
18
18
|
type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
|
|
19
19
|
interface FormFields {
|
|
20
|
-
isEmailVisible?: boolean;
|
|
21
|
-
isCardholderNameRequired?: boolean;
|
|
22
20
|
formVariant?: TCheckoutFormVariant;
|
|
23
21
|
}
|
|
24
22
|
interface FormStyles {
|
|
25
23
|
loaderColor?: string;
|
|
26
24
|
backgroundColor?: string;
|
|
25
|
+
lightLogos?: boolean;
|
|
27
26
|
expressButtonsSpacing?: string;
|
|
27
|
+
expressButtonsBorderRadius?: string;
|
|
28
28
|
inputBackgroundColor?: string;
|
|
29
29
|
inputBorderRadius?: string;
|
|
30
30
|
inputBorderColor?: string;
|
|
@@ -32,6 +32,20 @@ interface FormStyles {
|
|
|
32
32
|
inputBorderFocusColor?: string;
|
|
33
33
|
inputBorderErrorColor?: string;
|
|
34
34
|
errorMessageColor?: string;
|
|
35
|
+
labelColor?: string;
|
|
36
|
+
dividerColor?: string;
|
|
37
|
+
dividerTextColor?: string;
|
|
38
|
+
safeCheckoutAccentColor?: string;
|
|
39
|
+
safeCheckoutTextColor?: string;
|
|
40
|
+
radioOptionBorderColor?: string;
|
|
41
|
+
radioOptionBorderRadius?: string;
|
|
42
|
+
radioOptionBackgroundColor?: string;
|
|
43
|
+
radioOptionActiveBackgroundColor?: string;
|
|
44
|
+
radioOptionTitleColor?: string;
|
|
45
|
+
radioButtonColor?: string;
|
|
46
|
+
radioButtonActiveColor?: string;
|
|
47
|
+
fastCheckoutText?: string;
|
|
48
|
+
cardPaymentText?: string;
|
|
35
49
|
buttonColor?: string;
|
|
36
50
|
buttonHoverColor?: string;
|
|
37
51
|
buttonBorderRadius?: string;
|
package/dist/react.d.ts
CHANGED
|
@@ -17,14 +17,14 @@ declare const CheckoutFormVariant: {
|
|
|
17
17
|
};
|
|
18
18
|
type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
|
|
19
19
|
interface FormFields {
|
|
20
|
-
isEmailVisible?: boolean;
|
|
21
|
-
isCardholderNameRequired?: boolean;
|
|
22
20
|
formVariant?: TCheckoutFormVariant;
|
|
23
21
|
}
|
|
24
22
|
interface FormStyles {
|
|
25
23
|
loaderColor?: string;
|
|
26
24
|
backgroundColor?: string;
|
|
25
|
+
lightLogos?: boolean;
|
|
27
26
|
expressButtonsSpacing?: string;
|
|
27
|
+
expressButtonsBorderRadius?: string;
|
|
28
28
|
inputBackgroundColor?: string;
|
|
29
29
|
inputBorderRadius?: string;
|
|
30
30
|
inputBorderColor?: string;
|
|
@@ -32,6 +32,20 @@ interface FormStyles {
|
|
|
32
32
|
inputBorderFocusColor?: string;
|
|
33
33
|
inputBorderErrorColor?: string;
|
|
34
34
|
errorMessageColor?: string;
|
|
35
|
+
labelColor?: string;
|
|
36
|
+
dividerColor?: string;
|
|
37
|
+
dividerTextColor?: string;
|
|
38
|
+
safeCheckoutAccentColor?: string;
|
|
39
|
+
safeCheckoutTextColor?: string;
|
|
40
|
+
radioOptionBorderColor?: string;
|
|
41
|
+
radioOptionBorderRadius?: string;
|
|
42
|
+
radioOptionBackgroundColor?: string;
|
|
43
|
+
radioOptionActiveBackgroundColor?: string;
|
|
44
|
+
radioOptionTitleColor?: string;
|
|
45
|
+
radioButtonColor?: string;
|
|
46
|
+
radioButtonActiveColor?: string;
|
|
47
|
+
fastCheckoutText?: string;
|
|
48
|
+
cardPaymentText?: string;
|
|
35
49
|
buttonColor?: string;
|
|
36
50
|
buttonHoverColor?: string;
|
|
37
51
|
buttonBorderRadius?: string;
|
package/package.json
CHANGED