flintn-checkout 0.0.6 → 0.0.7

package/README.md

@@ -150,8 +150,9 @@ interface PaymentError {
 ### FormFields
 ```typescript
 interface FormFields {
-  isEmailVisible?: boolean;
-  isCardholderNameRequired?: boolean;
+  isEmailVisible?: boolean; // Primer only
+  isCardholderNameRequired?: boolean; // Primer only
+  formVariant?: 'DEFAULT' | 'LIST';
 }
 ```
 
@@ -159,8 +160,10 @@ interface FormFields {
 ```typescript
 interface FormStyles {
   loaderColor?: string;
-  inputBorderRadius?: string;
+  backgroundColor?: string;
   expressButtonsSpacing?: string;
+  inputBackgroundColor?: string;
+  inputBorderRadius?: string;
   inputBorderColor?: string;
   inputBorderHoverColor?: string;
   inputBorderFocusColor?: string;
@@ -170,9 +173,41 @@ interface FormStyles {
   buttonHoverColor?: string;
   buttonBorderRadius?: string;
   buttonText?: string;
+  cardButtonColor?: string;
+  cardButtonHoverColor?: string;
+  cardButtonText?: string;
 }
 ```
 
+### FormStyles Reference
+
+| Property | Description |
+|----------|-------------|
+| `loaderColor` | Color of the loading spinner |
+| `backgroundColor` | Background color of the checkout form |
+| `expressButtonsSpacing` | Spacing between express payment buttons (Apple Pay, Google Pay, PayPal) |
+| `inputBackgroundColor` | Background color of input fields |
+| `inputBorderRadius` | Border radius of input fields |
+| `inputBorderColor` | Default border color of input fields |
+| `inputBorderHoverColor` | Border color of input fields on hover |
+| `inputBorderFocusColor` | Border color of input fields on focus |
+| `inputBorderErrorColor` | Border color of input fields in error state |
+| `errorMessageColor` | Color of error messages below inputs |
+| `buttonColor` | Background color of the submit button |
+| `buttonHoverColor` | Background color of the submit button on hover/active |
+| `buttonBorderRadius` | Border radius of the submit button |
+| `buttonText` | Custom text for the submit button (overrides default "Pay $X.XX") |
+| `cardButtonColor` | Background color of the "Credit or Debit Card" button (LIST variant only) |
+| `cardButtonHoverColor` | Hover/active color of the card button (LIST variant only) |
+| `cardButtonText` | Custom text for the card button (LIST variant only) |
+
+## Form Variants
+
+The checkout form supports two layout variants via `formFields.formVariant`:
+
+- **DEFAULT** — Express payment methods shown above the card form with dividers
+- **LIST** — Express payment methods shown as a list with a "Credit or Debit Card" button; clicking it navigates to the card form with a back arrow
+
 ## Supported Payment Methods
 
 - 💳 Credit/Debit Cards (Visa, Mastercard, Amex, Discover)

package/dist/index.d.mts

@@ -9,14 +9,22 @@ declare const EventType: {
     readonly REDIRECT: "REDIRECT";
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
+declare const CheckoutFormVariant: {
+    readonly DEFAULT: "DEFAULT";
+    readonly LIST: "LIST";
+};
+type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
     isEmailVisible?: boolean;
     isCardholderNameRequired?: boolean;
+    formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
-    inputBorderRadius?: string;
+    backgroundColor?: string;
     expressButtonsSpacing?: string;
+    inputBackgroundColor?: string;
+    inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
@@ -26,6 +34,9 @@ interface FormStyles {
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
     buttonText?: string;
+    cardButtonColor?: string;
+    cardButtonHoverColor?: string;
+    cardButtonText?: string;
 }
 interface FlintNConfig {
     clientSessionId: string;
@@ -81,4 +92,4 @@ declare const validateConfig: (config: {
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 
-export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
+export { CheckoutFormVariant, EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };

package/dist/index.d.ts

@@ -9,14 +9,22 @@ declare const EventType: {
     readonly REDIRECT: "REDIRECT";
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
+declare const CheckoutFormVariant: {
+    readonly DEFAULT: "DEFAULT";
+    readonly LIST: "LIST";
+};
+type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
     isEmailVisible?: boolean;
     isCardholderNameRequired?: boolean;
+    formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
-    inputBorderRadius?: string;
+    backgroundColor?: string;
     expressButtonsSpacing?: string;
+    inputBackgroundColor?: string;
+    inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
@@ -26,6 +34,9 @@ interface FormStyles {
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
     buttonText?: string;
+    cardButtonColor?: string;
+    cardButtonHoverColor?: string;
+    cardButtonText?: string;
 }
 interface FlintNConfig {
     clientSessionId: string;
@@ -81,4 +92,4 @@ declare const validateConfig: (config: {
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 
-export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
+export { CheckoutFormVariant, EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };

package/dist/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CheckoutFormVariant: () => CheckoutFormVariant,
   EventType: () => EventType,
   FlintNPayment: () => FlintNPayment,
   buildIframeSrc: () => buildIframeSrc,
@@ -41,6 +42,10 @@ var EventType = {
   PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
   REDIRECT: "REDIRECT"
 };
+var CheckoutFormVariant = {
+  DEFAULT: "DEFAULT",
+  LIST: "LIST"
+};
 
 // src/utils.ts
 var parseOrigin = (origin) => {
@@ -190,6 +195,7 @@ var FlintNPayment = class {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CheckoutFormVariant,
   EventType,
   FlintNPayment,
   buildIframeSrc,

package/dist/index.mjs

@@ -9,6 +9,10 @@ var EventType = {
   PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
   REDIRECT: "REDIRECT"
 };
+var CheckoutFormVariant = {
+  DEFAULT: "DEFAULT",
+  LIST: "LIST"
+};
 
 // src/utils.ts
 var parseOrigin = (origin) => {
@@ -157,6 +161,7 @@ var FlintNPayment = class {
   }
 };
 export {
+  CheckoutFormVariant,
   EventType,
   FlintNPayment,
   buildIframeSrc,

package/dist/react.d.mts

@@ -9,14 +9,22 @@ declare const EventType: {
     readonly REDIRECT: "REDIRECT";
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
+declare const CheckoutFormVariant: {
+    readonly DEFAULT: "DEFAULT";
+    readonly LIST: "LIST";
+};
+type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
     isEmailVisible?: boolean;
     isCardholderNameRequired?: boolean;
+    formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
-    inputBorderRadius?: string;
+    backgroundColor?: string;
     expressButtonsSpacing?: string;
+    inputBackgroundColor?: string;
+    inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
@@ -26,6 +34,9 @@ interface FormStyles {
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
     buttonText?: string;
+    cardButtonColor?: string;
+    cardButtonHoverColor?: string;
+    cardButtonText?: string;
 }
 interface FlintNConfig {
     clientSessionId: string;
@@ -75,4 +86,4 @@ interface UseFlintNPaymentReturn {
 }
 declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
 
-export { EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
+export { CheckoutFormVariant, EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };

package/dist/react.d.ts

@@ -9,14 +9,22 @@ declare const EventType: {
     readonly REDIRECT: "REDIRECT";
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
+declare const CheckoutFormVariant: {
+    readonly DEFAULT: "DEFAULT";
+    readonly LIST: "LIST";
+};
+type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
     isEmailVisible?: boolean;
     isCardholderNameRequired?: boolean;
+    formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
-    inputBorderRadius?: string;
+    backgroundColor?: string;
     expressButtonsSpacing?: string;
+    inputBackgroundColor?: string;
+    inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
@@ -26,6 +34,9 @@ interface FormStyles {
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
     buttonText?: string;
+    cardButtonColor?: string;
+    cardButtonHoverColor?: string;
+    cardButtonText?: string;
 }
 interface FlintNConfig {
     clientSessionId: string;
@@ -75,4 +86,4 @@ interface UseFlintNPaymentReturn {
 }
 declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
 
-export { EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
+export { CheckoutFormVariant, EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };

package/dist/react.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
+  CheckoutFormVariant: () => CheckoutFormVariant,
   EventType: () => EventType,
   useFlintNPayment: () => useFlintNPayment
 });
@@ -39,6 +40,10 @@ var EventType = {
   PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
   REDIRECT: "REDIRECT"
 };
+var CheckoutFormVariant = {
+  DEFAULT: "DEFAULT",
+  LIST: "LIST"
+};
 
 // src/utils.ts
 var parseOrigin = (origin) => {
@@ -249,6 +254,7 @@ function useFlintNPayment(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CheckoutFormVariant,
   EventType,
   useFlintNPayment
 });

package/dist/react.mjs

@@ -12,6 +12,10 @@ var EventType = {
   PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
   REDIRECT: "REDIRECT"
 };
+var CheckoutFormVariant = {
+  DEFAULT: "DEFAULT",
+  LIST: "LIST"
+};
 
 // src/utils.ts
 var parseOrigin = (origin) => {
@@ -221,6 +225,7 @@ function useFlintNPayment(options) {
   };
 }
 export {
+  CheckoutFormVariant,
   EventType,
   useFlintNPayment
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flintn-checkout",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "FlintN Payment SDK — drop-in iframe checkout for card payments and wallets with localization and theming.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",