flintn-checkout 0.0.13 → 0.0.15

package/README.md

@@ -10,7 +10,7 @@ npm install flintn-checkout
 
 ## Iframe Checkout
 
-Full checkout UI rendered inside a single iframe. Includes card form, express payments (Apple Pay, Google Pay, PayPal), and 3DS handling.
+Full checkout UI rendered inside a single iframe. Includes card form, express payments (Apple Pay, PayPal), and 3DS handling.
 
 **React**
 
@@ -242,8 +242,9 @@ Do **not** set a fixed `height` on the container — it will leave empty space b
 | Property | Type | Required | Description |
 |----------|------|----------|-------------|
 | `clientSessionId` | `string` | Yes | Client session ID from backend |
-| `formFields` | `FormFields` | No | Form field visibility and requirements |
-| `styles` | `FormStyles` | No | Custom styles for the checkout form |
+| `formFields` | `FormFields` | No | Form display options — layout via `formVariant`. Field visibility and requirements are controlled by the merchant session configuration, not SDK options |
+| `styles` | `FormStyles` | No | Custom styles (colors, border radius, text) for the checkout form |
+| `placeholders` | `FormPlaceholders` | No | Per-field placeholder text overrides (see `FormPlaceholders`) |
 | `successRedirectUrl` | `string` | No | Redirect URL after successful payment |
 
 ### React Hook Return Values
@@ -597,28 +598,53 @@ interface FieldsValidationResult {
 ### FormFields
 ```typescript
 interface FormFields {
-  isEmailVisible?: boolean;       // Primer only
-  isCardholderNameRequired?: boolean; // Primer only
   formVariant?: 'DEFAULT' | 'LIST' | 'RADIO';
 }
 ```
 
+> **Note:** form field visibility and requirements (e.g. email, cardholder
+> name) are controlled by the merchant's session configuration, not by SDK
+> options. Use `formVariant` to control the checkout layout.
+
 ### FormStyles
 ```typescript
 interface FormStyles {
   loaderColor?: string;
   backgroundColor?: string;
+  lightLogos?: boolean;
   expressButtonsSpacing?: string;
+  expressButtonsBorderRadius?: string;
   inputBackgroundColor?: string;
   inputBorderRadius?: string;
   inputBorderColor?: string;
   inputBorderHoverColor?: string;
   inputBorderFocusColor?: string;
   inputBorderErrorColor?: string;
+  inputTextColor?: string;
+  inputFontSize?: string;
+  inputHeight?: string;
+  placeholderColor?: string;
   errorMessageColor?: string;
+  labelColor?: string;
+  labelFontSize?: string;
+  dividerColor?: string;
+  dividerTextColor?: string;
+  safeCheckoutAccentColor?: string;
+  safeCheckoutTextColor?: string;
+  radioOptionBorderColor?: string;
+  radioOptionBorderRadius?: string;
+  radioOptionBackgroundColor?: string;
+  radioOptionActiveBackgroundColor?: string;
+  radioOptionTitleColor?: string;
+  radioButtonColor?: string;
+  radioButtonActiveColor?: string;
+  fastCheckoutText?: string;
+  cardPaymentText?: string;
   buttonColor?: string;
   buttonHoverColor?: string;
   buttonBorderRadius?: string;
+  buttonHeight?: string;
+  buttonFontSize?: string;
   buttonText?: string;
   cardButtonColor?: string;
   cardButtonHoverColor?: string;
@@ -626,23 +652,70 @@ interface FormStyles {
 }
 ```
 
+### FormPlaceholders
+
+```typescript
+interface FormPlaceholders {
+  email?: string;
+  cardNumber?: string;
+  expiry?: string;
+  cvv?: string;
+  cardholderName?: string;
+  addressLine1?: string;
+  addressLine2?: string;
+  city?: string;
+  state?: string;
+  postalCode?: string;
+  country?: string;
+}
+```
+
+Per-field placeholder text overrides for the **iframe checkout** form, passed as
+`config.placeholders` (not under `styles` — placeholder text is field content, not
+visual styling). Any field left undefined keeps its built-in default placeholder.
+For **hosted fields**, set placeholder text per field via the `placeholder` option
+on `createField` (or the `fields` prop of `useFlintNFields`) instead.
+
 ### FormStyles Reference
 
 | Property | Iframe Checkout | Hosted Fields | Description |
 |----------|:-:|:-:|-------------|
 | `loaderColor` | ✅ | — | Loading spinner color |
 | `backgroundColor` | ✅ | — | Form background color |
+| `lightLogos` | ✅ | — | Use light logo variants in the safe-checkout row (for dark backgrounds) |
 | `expressButtonsSpacing` | ✅ | — | Spacing between express payment buttons |
+| `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`) |
 | `inputBackgroundColor` | ✅ | ✅ | Input field background color |
 | `inputBorderRadius` | ✅ | ✅ | Input field border radius |
 | `inputBorderColor` | ✅ | ✅ | Default input border color |
 | `inputBorderHoverColor` | ✅ | ✅ | Input border color on hover |
 | `inputBorderFocusColor` | ✅ | ✅ | Input border color on focus |
 | `inputBorderErrorColor` | ✅ | ✅ | Input border color in error state |
+| `inputTextColor` | ✅ | ✅ | Input text (typed value) color |
+| `inputFontSize` | ✅ | ✅ | Input text font size (e.g. `16px`) |
+| `inputHeight` | ✅ | ✅ | Total input field height, border included (e.g. `48px`; default `40px`) |
+| `placeholderColor` | ✅ | ✅ | Input placeholder text color |
 | `errorMessageColor` | ✅ | — | Error message text color |
+| `labelColor` | ✅ | — | Field label text color |
+| `labelFontSize` | ✅ | — | Field label font size (e.g. `14px`) |
+| `dividerColor` | ✅ | — | Divider line color ("or" + "safe checkout" dividers) |
+| `dividerTextColor` | ✅ | — | "or" divider text color |
+| `safeCheckoutAccentColor` | ✅ | — | "Safe" accent word color (defaults to theme success) |
+| `safeCheckoutTextColor` | ✅ | — | "Checkout" word color in the safe-checkout divider |
+| `radioOptionBorderColor` | ✅ | — | Radio option card border color (RADIO variant) |
+| `radioOptionBorderRadius` | ✅ | — | Radio option card border radius (RADIO variant) |
+| `radioOptionBackgroundColor` | ✅ | — | Radio option card background, inactive (RADIO variant) |
+| `radioOptionActiveBackgroundColor` | ✅ | — | Radio option card background, active (RADIO variant) |
+| `radioOptionTitleColor` | ✅ | — | Radio option title text color (RADIO variant) |
+| `radioButtonColor` | ✅ | — | Radio button color, unselected (RADIO variant) |
+| `radioButtonActiveColor` | ✅ | — | Radio button color, selected (RADIO variant) |
+| `fastCheckoutText` | ✅ | — | Custom "Fast checkout" option label (RADIO variant) |
+| `cardPaymentText` | ✅ | — | Custom "Card payment" option label (RADIO variant) |
 | `buttonColor` | ✅ | — | Submit button background color |
 | `buttonHoverColor` | ✅ | — | Submit button hover color |
 | `buttonBorderRadius` | ✅ | — | Submit button border radius |
+| `buttonHeight` | ✅ | — | Submit button height (e.g. `48px`; default `40px`) |
+| `buttonFontSize` | ✅ | — | Submit button text font size (e.g. `16px`; default `14px`) |
 | `buttonText` | ✅ | — | Custom submit button text |
 | `cardButtonColor` | ✅ | — | Card button color (LIST variant) |
 | `cardButtonHoverColor` | ✅ | — | Card button hover color (LIST variant) |
@@ -677,7 +750,6 @@ Every cancellation still emits a `CANCELLED` `onEvent` regardless of variant, so
 ### Iframe Checkout
 - Credit/Debit Cards (Visa, Mastercard, Amex, Discover)
 - Apple Pay
-- Google Pay
 - PayPal
 
 ### Hosted Fields

package/dist/index.d.mts

@@ -18,24 +18,58 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
+interface FormPlaceholders {
+    email?: string;
+    cardNumber?: string;
+    expiry?: string;
+    cvv?: string;
+    cardholderName?: string;
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    postalCode?: string;
+    country?: string;
+}
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
+    inputTextColor?: string;
+    inputFontSize?: string;
+    inputHeight?: string;
+    placeholderColor?: string;
     errorMessageColor?: string;
+    labelColor?: string;
+    labelFontSize?: string;
+    dividerColor?: string;
+    dividerTextColor?: string;
+    safeCheckoutAccentColor?: string;
+    safeCheckoutTextColor?: string;
+    radioOptionBorderColor?: string;
+    radioOptionBorderRadius?: string;
+    radioOptionBackgroundColor?: string;
+    radioOptionActiveBackgroundColor?: string;
+    radioOptionTitleColor?: string;
+    radioButtonColor?: string;
+    radioButtonActiveColor?: string;
+    fastCheckoutText?: string;
+    cardPaymentText?: string;
     buttonColor?: string;
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
+    buttonHeight?: string;
+    buttonFontSize?: string;
     buttonText?: string;
     cardButtonColor?: string;
     cardButtonHoverColor?: string;
@@ -45,6 +79,7 @@ interface FlintNConfig {
     clientSessionId: string;
     formFields?: FormFields;
     styles?: FormStyles;
+    placeholders?: FormPlaceholders;
     successRedirectUrl?: string;
 }
 declare const PaymentMethod: {
@@ -230,4 +265,4 @@ declare const validateConfig: (config: {
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 
-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 };
+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

@@ -18,24 +18,58 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
+interface FormPlaceholders {
+    email?: string;
+    cardNumber?: string;
+    expiry?: string;
+    cvv?: string;
+    cardholderName?: string;
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    postalCode?: string;
+    country?: string;
+}
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
+    inputTextColor?: string;
+    inputFontSize?: string;
+    inputHeight?: string;
+    placeholderColor?: string;
     errorMessageColor?: string;
+    labelColor?: string;
+    labelFontSize?: string;
+    dividerColor?: string;
+    dividerTextColor?: string;
+    safeCheckoutAccentColor?: string;
+    safeCheckoutTextColor?: string;
+    radioOptionBorderColor?: string;
+    radioOptionBorderRadius?: string;
+    radioOptionBackgroundColor?: string;
+    radioOptionActiveBackgroundColor?: string;
+    radioOptionTitleColor?: string;
+    radioButtonColor?: string;
+    radioButtonActiveColor?: string;
+    fastCheckoutText?: string;
+    cardPaymentText?: string;
     buttonColor?: string;
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
+    buttonHeight?: string;
+    buttonFontSize?: string;
     buttonText?: string;
     cardButtonColor?: string;
     cardButtonHoverColor?: string;
@@ -45,6 +79,7 @@ interface FlintNConfig {
     clientSessionId: string;
     formFields?: FormFields;
     styles?: FormStyles;
+    placeholders?: FormPlaceholders;
     successRedirectUrl?: string;
 }
 declare const PaymentMethod: {
@@ -230,4 +265,4 @@ declare const validateConfig: (config: {
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 
-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 };
+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

@@ -17,24 +17,58 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
+interface FormPlaceholders {
+    email?: string;
+    cardNumber?: string;
+    expiry?: string;
+    cvv?: string;
+    cardholderName?: string;
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    postalCode?: string;
+    country?: string;
+}
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
+    inputTextColor?: string;
+    inputFontSize?: string;
+    inputHeight?: string;
+    placeholderColor?: string;
     errorMessageColor?: string;
+    labelColor?: string;
+    labelFontSize?: string;
+    dividerColor?: string;
+    dividerTextColor?: string;
+    safeCheckoutAccentColor?: string;
+    safeCheckoutTextColor?: string;
+    radioOptionBorderColor?: string;
+    radioOptionBorderRadius?: string;
+    radioOptionBackgroundColor?: string;
+    radioOptionActiveBackgroundColor?: string;
+    radioOptionTitleColor?: string;
+    radioButtonColor?: string;
+    radioButtonActiveColor?: string;
+    fastCheckoutText?: string;
+    cardPaymentText?: string;
     buttonColor?: string;
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
+    buttonHeight?: string;
+    buttonFontSize?: string;
     buttonText?: string;
     cardButtonColor?: string;
     cardButtonHoverColor?: string;
@@ -44,6 +78,7 @@ interface FlintNConfig {
     clientSessionId: string;
     formFields?: FormFields;
     styles?: FormStyles;
+    placeholders?: FormPlaceholders;
     successRedirectUrl?: string;
 }
 declare const PaymentMethod: {

package/dist/react.d.ts

@@ -17,24 +17,58 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
+interface FormPlaceholders {
+    email?: string;
+    cardNumber?: string;
+    expiry?: string;
+    cvv?: string;
+    cardholderName?: string;
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    postalCode?: string;
+    country?: string;
+}
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
     inputBorderHoverColor?: string;
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
+    inputTextColor?: string;
+    inputFontSize?: string;
+    inputHeight?: string;
+    placeholderColor?: string;
     errorMessageColor?: string;
+    labelColor?: string;
+    labelFontSize?: string;
+    dividerColor?: string;
+    dividerTextColor?: string;
+    safeCheckoutAccentColor?: string;
+    safeCheckoutTextColor?: string;
+    radioOptionBorderColor?: string;
+    radioOptionBorderRadius?: string;
+    radioOptionBackgroundColor?: string;
+    radioOptionActiveBackgroundColor?: string;
+    radioOptionTitleColor?: string;
+    radioButtonColor?: string;
+    radioButtonActiveColor?: string;
+    fastCheckoutText?: string;
+    cardPaymentText?: string;
     buttonColor?: string;
     buttonHoverColor?: string;
     buttonBorderRadius?: string;
+    buttonHeight?: string;
+    buttonFontSize?: string;
     buttonText?: string;
     cardButtonColor?: string;
     cardButtonHoverColor?: string;
@@ -44,6 +78,7 @@ interface FlintNConfig {
     clientSessionId: string;
     formFields?: FormFields;
     styles?: FormStyles;
+    placeholders?: FormPlaceholders;
     successRedirectUrl?: string;
 }
 declare const PaymentMethod: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flintn-checkout",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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",