flintn-checkout 0.0.12 → 0.0.14

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**
 
@@ -18,7 +18,7 @@ Full checkout UI rendered inside a single iframe. Includes card form, express pa
 import { useFlintNPayment } from 'flintn-checkout/react';
 
 function Checkout() {
-  const { containerRef, isReady, paymentResult, attempts, error } = useFlintNPayment({
+  const { containerRef, isReady, paymentResult, events, error } = useFlintNPayment({
     config: {
       clientSessionId: 'your_client_session_id',
     },
@@ -31,8 +31,9 @@ function Checkout() {
     },
     onEvent: (event) => {
       // Per-attempt analytics — fires for every payment attempt outcome
-      // (initiated, soft/hard decline, 3DS, cancel, network error, success).
-      console.log('Attempt:', event.result, event.method, event.code);
+      // (initiated, soft/hard decline, 3DS, cancel, network error, success)
+      // and for UI navigation in the LIST and RADIO variants (form entered/exited).
+      console.log('Event:', event.type, event.event);
     },
   });
 
@@ -61,7 +62,7 @@ const payment = createFlintNPayment({
     }
   },
   onEvent: (event) => {
-    console.log('Attempt:', event.result, event.method);
+    console.log('Event:', event.type, event.event);
   },
   onReady: () => {
     console.log('Widget ready');
@@ -97,7 +98,7 @@ payment.mount('#payment-container');
         console.log('Payment result:', result);
       },
       onEvent: (event) => {
-        console.log('Attempt:', event);
+        console.log('Event:', event);
       },
     });
 
@@ -130,12 +131,19 @@ Fires when:
 Fires for **every payment attempt outcome**, including ones where the session continues. Use for funnel analytics, retry tracking, A/B test instrumentation, fraud signals.
 
 ```ts
-onEvent(event: PaymentAttempt)
+onEvent(event: CheckoutEvent)
 ```
 
-The `result` discriminator describes what happened at this step:
+`CheckoutEvent` is a union of two event kinds, discriminated by `type` (the `isAttemptEvent` / `isUIEvent` guards are also exported):
 
-| `result` | When | Terminal `onPayment` follows? |
+- `PaymentAttempt` — `type: 'PAYMENT_ATTEMPT_EVENT'`, a payment attempt outcome
+- `PaymentUI` — `type: 'PAYMENT_UI_EVENT'`, card form entered/exited (LIST and RADIO variants)
+
+Every event carries a `timestamp` (epoch ms) and the `clientSessionId`.
+
+For attempt events, the `event` discriminator describes what happened at this step:
+
+| `event` | When | Terminal `onPayment` follows? |
 |---|---|---|
 | `'INITIATED'` | Buyer clicked Pay / Apple Pay / PayPal and validation passed | — |
 | `'THREE_DS_INITIATED'` | Authorize returned `THREE_DS_INITIATED`; 3DS challenge is opening | — |
@@ -147,46 +155,61 @@ The `result` discriminator describes what happened at this step:
 
 A terminal `onPayment` event always fires *after* the corresponding `onEvent` for `AUTHORIZED` / `NETWORK_ERROR` / non-retryable declines / 3DS failures.
 
+For UI events (LIST and RADIO variants), `view` is the view that became active:
+
+| `event` | When | `view` |
+|---|---|---|
+| `'FORM_ENTERED'` | Buyer opened the card form ("Credit or Debit Card" button / "Card payment" radio) | `'CARD'` |
+| `'FORM_EXITED'` | Buyer returned to express (back arrow / "Fast checkout" radio) | `'EXPRESS'` |
+
 **Example funnel — soft decline → retry success:**
 
 ```
-onEvent   → { result: 'INITIATED',    method: 'PAYMENT_CARD' }
-onEvent   → { result: 'SOFT_DECLINE', method: 'PAYMENT_CARD', code: 'do_not_honor', message: 'Payment declined.' }
+onEvent   → { event: 'INITIATED',    method: 'PAYMENT_CARD' }
+onEvent   → { event: 'SOFT_DECLINE', method: 'PAYMENT_CARD', code: 'do_not_honor', message: 'Payment declined.' }
 // buyer retries with another card
-onEvent   → { result: 'INITIATED',    method: 'PAYMENT_CARD' }
-onEvent   → { result: 'AUTHORIZED',   method: 'PAYMENT_CARD', paymentId: 'pay_...' }
+onEvent   → { event: 'INITIATED',    method: 'PAYMENT_CARD' }
+onEvent   → { event: 'AUTHORIZED',   method: 'PAYMENT_CARD', paymentId: 'pay_...' }
 onPayment → { status: 'PAYMENT_SUCCESS', data: 'pay_...' }
 ```
 
 **Example — Apple Pay buyer cancel (DEFAULT variant):**
 
 ```
-onEvent → { result: 'INITIATED', method: 'APPLE_PAY' }
-onEvent → { result: 'CANCELLED', method: 'APPLE_PAY', message: 'Buyer dismissed Apple Pay' }
+onEvent → { event: 'INITIATED', method: 'APPLE_PAY' }
+onEvent → { event: 'CANCELLED', method: 'APPLE_PAY', message: 'Buyer dismissed Apple Pay' }
 // no onPayment — session stays alive, buyer can pick another method
 ```
 
 **Example — PayPal popup → 3DS → success:**
 
 ```
-onEvent   → { result: 'INITIATED',          method: 'PAYPAL' }
-onEvent   → { result: 'THREE_DS_INITIATED', method: 'PAYPAL', paymentId: 'pay_...' }
-onEvent   → { result: 'AUTHORIZED',         method: 'PAYPAL', paymentId: 'pay_...' }
+onEvent   → { event: 'INITIATED',          method: 'PAYPAL' }
+onEvent   → { event: 'THREE_DS_INITIATED', method: 'PAYPAL', paymentId: 'pay_...' }
+onEvent   → { event: 'AUTHORIZED',         method: 'PAYPAL', paymentId: 'pay_...' }
 onPayment → { status: 'PAYMENT_SUCCESS', data: 'pay_...' }
 ```
 
-### `attempts` (React) — accumulated log
+(Every event also carries `type`, `timestamp`, and `clientSessionId` — omitted above for brevity.)
+
+### `events` (React) — accumulated log
 
-The `useFlintNPayment` hook also exposes `attempts: PaymentAttempt[]` — every event since mount, useful for rendering a per-attempt UI without wiring `onEvent` manually:
+The `useFlintNPayment` hook also exposes `events: CheckoutEvent[]` — every event since mount, useful for rendering a per-attempt UI without wiring `onEvent` manually:
 
 ```tsx
-const { attempts } = useFlintNPayment({ ... });
+import { isAttemptEvent } from 'flintn-checkout';
+
+const { events } = useFlintNPayment({ ... });
 
 return (
   <ul>
-    {attempts.map((a, i) => (
-      <li key={i}>[{a.method}] {a.result} {a.code && `— ${a.code}`}</li>
-    ))}
+    {events.map((e, i) =>
+      isAttemptEvent(e) ? (
+        <li key={i}>[{e.method}] {e.event} {e.code && `— ${e.code}`}</li>
+      ) : (
+        <li key={i}>[UI] {e.event} → {e.view}</li>
+      ),
+    )}
   </ul>
 );
 ```
@@ -209,7 +232,7 @@ Do **not** set a fixed `height` on the container — it will leave empty space b
 |--------|------|----------|---------|-------------|
 | `config` | `FlintNConfig` | Yes | — | Checkout configuration |
 | `onPayment` | `(result: PaymentResult) => void` | No | — | Terminal session result (success / error) |
-| `onEvent` | `(event: PaymentAttempt) => void` | No | — | Per-attempt analytics signal |
+| `onEvent` | `(event: CheckoutEvent) => void` | No | — | Per-attempt analytics signal |
 | `onReady` | `() => void` | No | — | Widget loaded and ready |
 | `onError` | `(error: PaymentError) => void` | No | — | SDK initialization error |
 | `debug` | `boolean` | No | `false` | Enable console debug logs |
@@ -219,7 +242,7 @@ 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 |
+| `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 for the checkout form |
 | `successRedirectUrl` | `string` | No | Redirect URL after successful payment |
 
@@ -230,7 +253,7 @@ Do **not** set a fixed `height` on the container — it will leave empty space b
 | `containerRef` | `RefObject<HTMLDivElement>` | Ref to attach to container element |
 | `isReady` | `boolean` | Widget is loaded and ready |
 | `paymentResult` | `PaymentResult \| null` | Result after terminal `onPayment` event |
-| `attempts` | `PaymentAttempt[]` | Per-attempt event log (accumulated since mount) |
+| `events` | `CheckoutEvent[]` | Per-attempt event log (accumulated since mount) |
 | `error` | `PaymentError \| null` | SDK error if any |
 
 ---
@@ -479,11 +502,18 @@ interface PaymentError {
 }
 ```
 
+### CheckoutEvent
+
+```typescript
+type CheckoutEvent = PaymentAttempt | PaymentUI;
+```
+
 ### PaymentAttempt
 
 ```typescript
 interface PaymentAttempt {
-  result:
+  type: 'PAYMENT_ATTEMPT_EVENT';
+  event:
     | 'INITIATED'
     | 'THREE_DS_INITIATED'
     | 'AUTHORIZED'
@@ -498,19 +528,37 @@ interface PaymentAttempt {
     | 'PAYPAL'
     | 'BANK_ACCOUNT'
     | 'OTHER';
-  paymentId?: string; // Set when the backend has minted a payment id (auth response, 3DS, approve)
-  code?: string;      // Processor decline code or internal error code (FNT-EC-*, FORBIDDEN, PAYPAL_ERROR, THREE_DS_FAILED, …)
-  message?: string;   // Translated merchant-facing message for the code
+  paymentId?: string;       // Set when the backend has minted a payment id (auth response, 3DS, approve)
+  code?: string;            // Processor decline code or internal error code (FNT-EC-*, FORBIDDEN, PAYPAL_ERROR, THREE_DS_FAILED, …)
+  message?: string;         // Translated merchant-facing message for the code
+  timestamp: number;        // Epoch ms, stamped at emit time
+  clientSessionId?: string; // Session the event belongs to
+}
+```
+
+### PaymentUI
+
+```typescript
+interface PaymentUI {
+  type: 'PAYMENT_UI_EVENT';
+  event: 'FORM_ENTERED' | 'FORM_EXITED';
+  view: 'EXPRESS' | 'CARD'; // The view that became active
+  timestamp: number;
+  clientSessionId?: string;
 }
 ```
 
 Const-object accessors are also exported if you prefer typed comparisons over string literals:
 
 ```ts
-import { AttemptResult, PaymentMethod } from 'flintn-checkout';
+import { PaymentAttemptResult, PaymentMethod, isAttemptEvent } from 'flintn-checkout';
 
 onEvent: (e) => {
-  if (e.result === AttemptResult.SOFT_DECLINE && e.method === PaymentMethod.PAYMENT_CARD) {
+  if (
+    isAttemptEvent(e) &&
+    e.event === PaymentAttemptResult.SOFT_DECLINE &&
+    e.method === PaymentMethod.PAYMENT_CARD
+  ) {
     analytics.track('soft_decline_card', { code: e.code });
   }
 }
@@ -549,18 +597,22 @@ 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;
@@ -568,6 +620,20 @@ interface FormStyles {
   inputBorderFocusColor?: string;
   inputBorderErrorColor?: string;
   errorMessageColor?: string;
+  labelColor?: 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;
@@ -584,7 +650,9 @@ interface FormStyles {
 |----------|:-:|:-:|-------------|
 | `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 |
@@ -592,6 +660,20 @@ interface FormStyles {
 | `inputBorderFocusColor` | ✅ | ✅ | Input border color on focus |
 | `inputBorderErrorColor` | ✅ | ✅ | Input border color in error state |
 | `errorMessageColor` | ✅ | — | Error message text color |
+| `labelColor` | ✅ | — | Field label text color |
+| `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 |
@@ -605,10 +687,10 @@ interface FormStyles {
 The iframe checkout supports three layout variants via `formFields.formVariant`:
 
 - **DEFAULT** — Express payment methods shown above the card form with dividers.
-- **LIST** — Express payment methods shown first; users tap a "Credit or Debit Card" button to navigate to the card form, with a back arrow to return to the express view.
-- **RADIO** — Express payments and the card form are presented as two radio options ("Fast checkout" and "Card payment"). Selecting a radio expands its section and collapses the other. The card payment radio shows accepted card brand logos inline with its label.
+- **LIST** — Express payment methods shown first; users tap a "Credit or Debit Card" button to navigate to the card form, with a back arrow to return to the express view. Toggling emits `FORM_ENTERED` / `FORM_EXITED` UI events.
+- **RADIO** — Express payments and the card form are presented as two radio options ("Fast checkout" and "Card payment"). Selecting a radio expands its section and collapses the other. The card payment radio shows accepted card brand logos inline with its label. Selecting a radio emits `FORM_ENTERED` / `FORM_EXITED` UI events.
 
-LIST and RADIO automatically fall back to the DEFAULT layout when no express payment methods are available, since there's nothing to toggle between. The `cardButtonColor`, `cardButtonHoverColor`, and `cardButtonText` style overrides apply only to the LIST variant's "Credit or Debit Card" button.
+LIST and RADIO automatically fall back to the DEFAULT layout when no express payment methods are available, since there's nothing to toggle between (and no UI events fire). The `cardButtonColor`, `cardButtonHoverColor`, and `cardButtonText` style overrides apply only to the LIST variant's "Credit or Debit Card" button.
 
 ### Cancel-message behavior across variants
 
@@ -629,7 +711,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

@@ -1,7 +1,8 @@
 declare const EventType: {
     readonly WIDGET_READY: "WIDGET_READY";
     readonly WIDGET_CONFIG: "WIDGET_CONFIG";
-    readonly PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT";
+    readonly PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT";
+    readonly PAYMENT_UI: "PAYMENT_UI_EVENT";
     readonly PAYMENT: "PAYMENT";
     readonly PAYMENT_SUCCESS: "PAYMENT_SUCCESS";
     readonly PAYMENT_ERROR: "PAYMENT_ERROR";
@@ -17,14 +18,14 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
@@ -32,6 +33,20 @@ interface FormStyles {
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
     errorMessageColor?: string;
+    labelColor?: 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;
@@ -55,7 +70,7 @@ declare const PaymentMethod: {
     readonly OTHER: "OTHER";
 };
 type TPaymentMethod = (typeof PaymentMethod)[keyof typeof PaymentMethod];
-declare const AttemptResult: {
+declare const PaymentAttemptResult: {
     readonly INITIATED: "INITIATED";
     readonly THREE_DS_INITIATED: "THREE_DS_INITIATED";
     readonly AUTHORIZED: "AUTHORIZED";
@@ -64,14 +79,37 @@ declare const AttemptResult: {
     readonly CANCELLED: "CANCELLED";
     readonly NETWORK_ERROR: "NETWORK_ERROR";
 };
-type TAttemptResult = (typeof AttemptResult)[keyof typeof AttemptResult];
+type TPaymentAttemptResult = (typeof PaymentAttemptResult)[keyof typeof PaymentAttemptResult];
+declare const PaymentUIEvent: {
+    readonly FORM_ENTERED: "FORM_ENTERED";
+    readonly FORM_EXITED: "FORM_EXITED";
+};
+type TPaymentUIEvent = (typeof PaymentUIEvent)[keyof typeof PaymentUIEvent];
+declare const CheckoutView: {
+    readonly EXPRESS: "EXPRESS";
+    readonly CARD: "CARD";
+};
+type TCheckoutView = (typeof CheckoutView)[keyof typeof CheckoutView];
 interface PaymentAttempt {
-    result: TAttemptResult;
+    type: typeof EventType.PAYMENT_ATTEMPT;
+    event: TPaymentAttemptResult;
     method: TPaymentMethod;
     paymentId?: string;
     code?: string;
     message?: string;
+    timestamp: number;
+    clientSessionId?: string;
+}
+interface PaymentUI {
+    type: typeof EventType.PAYMENT_UI;
+    event: TPaymentUIEvent;
+    view: TCheckoutView;
+    timestamp: number;
+    clientSessionId?: string;
 }
+type CheckoutEvent = PaymentAttempt | PaymentUI;
+declare const isAttemptEvent: (e: CheckoutEvent) => e is PaymentAttempt;
+declare const isUIEvent: (e: CheckoutEvent) => e is PaymentUI;
 interface PaymentResult {
     status: 'PAYMENT_SUCCESS' | 'PAYMENT_ERROR' | 'PAYMENT_CANCELLED';
     data?: string;
@@ -88,7 +126,7 @@ interface FlintNPaymentOptions {
     origin?: string;
     config: FlintNConfig;
     onPayment?: (result: PaymentResult) => void;
-    onEvent?: (event: PaymentAttempt) => void;
+    onEvent?: (event: CheckoutEvent) => void;
     onReady?: () => void;
     onError?: (error: PaymentError) => void;
     debug?: boolean;
@@ -206,4 +244,4 @@ declare const validateConfig: (config: {
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 
-export { AttemptResult, CheckoutFormVariant, 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, type PaymentError, PaymentMethod, type PaymentResult, type SubmitOptions, type TAttemptResult, type TCheckoutFormVariant, type TEventType, type TFieldEventType, type TFieldType, type TPaymentMethod, buildIframeSrc, createFlintNField, createFlintNFields, createFlintNPayment, createIframeElement, 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 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

@@ -1,7 +1,8 @@
 declare const EventType: {
     readonly WIDGET_READY: "WIDGET_READY";
     readonly WIDGET_CONFIG: "WIDGET_CONFIG";
-    readonly PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT";
+    readonly PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT";
+    readonly PAYMENT_UI: "PAYMENT_UI_EVENT";
     readonly PAYMENT: "PAYMENT";
     readonly PAYMENT_SUCCESS: "PAYMENT_SUCCESS";
     readonly PAYMENT_ERROR: "PAYMENT_ERROR";
@@ -17,14 +18,14 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
@@ -32,6 +33,20 @@ interface FormStyles {
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
     errorMessageColor?: string;
+    labelColor?: 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;
@@ -55,7 +70,7 @@ declare const PaymentMethod: {
     readonly OTHER: "OTHER";
 };
 type TPaymentMethod = (typeof PaymentMethod)[keyof typeof PaymentMethod];
-declare const AttemptResult: {
+declare const PaymentAttemptResult: {
     readonly INITIATED: "INITIATED";
     readonly THREE_DS_INITIATED: "THREE_DS_INITIATED";
     readonly AUTHORIZED: "AUTHORIZED";
@@ -64,14 +79,37 @@ declare const AttemptResult: {
     readonly CANCELLED: "CANCELLED";
     readonly NETWORK_ERROR: "NETWORK_ERROR";
 };
-type TAttemptResult = (typeof AttemptResult)[keyof typeof AttemptResult];
+type TPaymentAttemptResult = (typeof PaymentAttemptResult)[keyof typeof PaymentAttemptResult];
+declare const PaymentUIEvent: {
+    readonly FORM_ENTERED: "FORM_ENTERED";
+    readonly FORM_EXITED: "FORM_EXITED";
+};
+type TPaymentUIEvent = (typeof PaymentUIEvent)[keyof typeof PaymentUIEvent];
+declare const CheckoutView: {
+    readonly EXPRESS: "EXPRESS";
+    readonly CARD: "CARD";
+};
+type TCheckoutView = (typeof CheckoutView)[keyof typeof CheckoutView];
 interface PaymentAttempt {
-    result: TAttemptResult;
+    type: typeof EventType.PAYMENT_ATTEMPT;
+    event: TPaymentAttemptResult;
     method: TPaymentMethod;
     paymentId?: string;
     code?: string;
     message?: string;
+    timestamp: number;
+    clientSessionId?: string;
+}
+interface PaymentUI {
+    type: typeof EventType.PAYMENT_UI;
+    event: TPaymentUIEvent;
+    view: TCheckoutView;
+    timestamp: number;
+    clientSessionId?: string;
 }
+type CheckoutEvent = PaymentAttempt | PaymentUI;
+declare const isAttemptEvent: (e: CheckoutEvent) => e is PaymentAttempt;
+declare const isUIEvent: (e: CheckoutEvent) => e is PaymentUI;
 interface PaymentResult {
     status: 'PAYMENT_SUCCESS' | 'PAYMENT_ERROR' | 'PAYMENT_CANCELLED';
     data?: string;
@@ -88,7 +126,7 @@ interface FlintNPaymentOptions {
     origin?: string;
     config: FlintNConfig;
     onPayment?: (result: PaymentResult) => void;
-    onEvent?: (event: PaymentAttempt) => void;
+    onEvent?: (event: CheckoutEvent) => void;
     onReady?: () => void;
     onError?: (error: PaymentError) => void;
     debug?: boolean;
@@ -206,4 +244,4 @@ declare const validateConfig: (config: {
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 
-export { AttemptResult, CheckoutFormVariant, 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, type PaymentError, PaymentMethod, type PaymentResult, type SubmitOptions, type TAttemptResult, type TCheckoutFormVariant, type TEventType, type TFieldEventType, type TFieldType, type TPaymentMethod, buildIframeSrc, createFlintNField, createFlintNFields, createFlintNPayment, createIframeElement, 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 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.js

@@ -20,17 +20,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  AttemptResult: () => AttemptResult,
   CheckoutFormVariant: () => CheckoutFormVariant,
+  CheckoutView: () => CheckoutView,
   EventType: () => EventType,
   FieldEventType: () => FieldEventType,
   FieldType: () => FieldType,
+  PaymentAttemptResult: () => PaymentAttemptResult,
   PaymentMethod: () => PaymentMethod,
+  PaymentUIEvent: () => PaymentUIEvent,
   buildIframeSrc: () => buildIframeSrc,
   createFlintNField: () => createFlintNField,
   createFlintNFields: () => createFlintNFields,
   createFlintNPayment: () => createFlintNPayment,
   createIframeElement: () => createIframeElement,
+  isAttemptEvent: () => isAttemptEvent,
+  isUIEvent: () => isUIEvent,
   parseOrigin: () => parseOrigin,
   sanitizeToken: () => sanitizeToken,
   validateConfig: () => validateConfig
@@ -41,7 +45,8 @@ module.exports = __toCommonJS(index_exports);
 var EventType = {
   WIDGET_READY: "WIDGET_READY",
   WIDGET_CONFIG: "WIDGET_CONFIG",
-  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT",
+  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT",
+  PAYMENT_UI: "PAYMENT_UI_EVENT",
   PAYMENT: "PAYMENT",
   PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
   PAYMENT_ERROR: "PAYMENT_ERROR",
@@ -62,7 +67,7 @@ var PaymentMethod = {
   BANK_ACCOUNT: "BANK_ACCOUNT",
   OTHER: "OTHER"
 };
-var AttemptResult = {
+var PaymentAttemptResult = {
   INITIATED: "INITIATED",
   THREE_DS_INITIATED: "THREE_DS_INITIATED",
   AUTHORIZED: "AUTHORIZED",
@@ -71,6 +76,16 @@ var AttemptResult = {
   CANCELLED: "CANCELLED",
   NETWORK_ERROR: "NETWORK_ERROR"
 };
+var PaymentUIEvent = {
+  FORM_ENTERED: "FORM_ENTERED",
+  FORM_EXITED: "FORM_EXITED"
+};
+var CheckoutView = {
+  EXPRESS: "EXPRESS",
+  CARD: "CARD"
+};
+var isAttemptEvent = (e) => e.type === EventType.PAYMENT_ATTEMPT;
+var isUIEvent = (e) => e.type === EventType.PAYMENT_UI;
 var FieldType = {
   CARD_NUMBER: "card-number",
   EXPIRY: "expiry",
@@ -204,7 +219,16 @@ function createFlintNPayment(options) {
         options.onReady?.();
         break;
       case EventType.PAYMENT_ATTEMPT:
-        options.onEvent?.(payload);
+        options.onEvent?.({
+          type: EventType.PAYMENT_ATTEMPT,
+          ...payload
+        });
+        break;
+      case EventType.PAYMENT_UI:
+        options.onEvent?.({
+          type: EventType.PAYMENT_UI,
+          ...payload
+        });
         break;
       case EventType.PAYMENT:
         options.onPayment?.(payload);
@@ -651,17 +675,21 @@ function createFlintNFields(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AttemptResult,
   CheckoutFormVariant,
+  CheckoutView,
   EventType,
   FieldEventType,
   FieldType,
+  PaymentAttemptResult,
   PaymentMethod,
+  PaymentUIEvent,
   buildIframeSrc,
   createFlintNField,
   createFlintNFields,
   createFlintNPayment,
   createIframeElement,
+  isAttemptEvent,
+  isUIEvent,
   parseOrigin,
   sanitizeToken,
   validateConfig

package/dist/index.mjs

@@ -2,7 +2,8 @@
 var EventType = {
   WIDGET_READY: "WIDGET_READY",
   WIDGET_CONFIG: "WIDGET_CONFIG",
-  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT",
+  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT",
+  PAYMENT_UI: "PAYMENT_UI_EVENT",
   PAYMENT: "PAYMENT",
   PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
   PAYMENT_ERROR: "PAYMENT_ERROR",
@@ -23,7 +24,7 @@ var PaymentMethod = {
   BANK_ACCOUNT: "BANK_ACCOUNT",
   OTHER: "OTHER"
 };
-var AttemptResult = {
+var PaymentAttemptResult = {
   INITIATED: "INITIATED",
   THREE_DS_INITIATED: "THREE_DS_INITIATED",
   AUTHORIZED: "AUTHORIZED",
@@ -32,6 +33,16 @@ var AttemptResult = {
   CANCELLED: "CANCELLED",
   NETWORK_ERROR: "NETWORK_ERROR"
 };
+var PaymentUIEvent = {
+  FORM_ENTERED: "FORM_ENTERED",
+  FORM_EXITED: "FORM_EXITED"
+};
+var CheckoutView = {
+  EXPRESS: "EXPRESS",
+  CARD: "CARD"
+};
+var isAttemptEvent = (e) => e.type === EventType.PAYMENT_ATTEMPT;
+var isUIEvent = (e) => e.type === EventType.PAYMENT_UI;
 var FieldType = {
   CARD_NUMBER: "card-number",
   EXPIRY: "expiry",
@@ -165,7 +176,16 @@ function createFlintNPayment(options) {
         options.onReady?.();
         break;
       case EventType.PAYMENT_ATTEMPT:
-        options.onEvent?.(payload);
+        options.onEvent?.({
+          type: EventType.PAYMENT_ATTEMPT,
+          ...payload
+        });
+        break;
+      case EventType.PAYMENT_UI:
+        options.onEvent?.({
+          type: EventType.PAYMENT_UI,
+          ...payload
+        });
         break;
       case EventType.PAYMENT:
         options.onPayment?.(payload);
@@ -611,17 +631,21 @@ function createFlintNFields(options) {
   return { createField, getField, validate, submit, unmount, getIsReady };
 }
 export {
-  AttemptResult,
   CheckoutFormVariant,
+  CheckoutView,
   EventType,
   FieldEventType,
   FieldType,
+  PaymentAttemptResult,
   PaymentMethod,
+  PaymentUIEvent,
   buildIframeSrc,
   createFlintNField,
   createFlintNFields,
   createFlintNPayment,
   createIframeElement,
+  isAttemptEvent,
+  isUIEvent,
   parseOrigin,
   sanitizeToken,
   validateConfig

package/dist/react.d.mts

@@ -1,3 +1,15 @@
+declare const EventType: {
+    readonly WIDGET_READY: "WIDGET_READY";
+    readonly WIDGET_CONFIG: "WIDGET_CONFIG";
+    readonly PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT";
+    readonly PAYMENT_UI: "PAYMENT_UI_EVENT";
+    readonly PAYMENT: "PAYMENT";
+    readonly PAYMENT_SUCCESS: "PAYMENT_SUCCESS";
+    readonly PAYMENT_ERROR: "PAYMENT_ERROR";
+    readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
+    readonly REDIRECT: "REDIRECT";
+    readonly RESIZE: "RESIZE";
+};
 declare const CheckoutFormVariant: {
     readonly DEFAULT: "DEFAULT";
     readonly LIST: "LIST";
@@ -5,14 +17,14 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
@@ -20,6 +32,20 @@ interface FormStyles {
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
     errorMessageColor?: string;
+    labelColor?: 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;
@@ -43,7 +69,7 @@ declare const PaymentMethod: {
     readonly OTHER: "OTHER";
 };
 type TPaymentMethod = (typeof PaymentMethod)[keyof typeof PaymentMethod];
-declare const AttemptResult: {
+declare const PaymentAttemptResult: {
     readonly INITIATED: "INITIATED";
     readonly THREE_DS_INITIATED: "THREE_DS_INITIATED";
     readonly AUTHORIZED: "AUTHORIZED";
@@ -52,14 +78,35 @@ declare const AttemptResult: {
     readonly CANCELLED: "CANCELLED";
     readonly NETWORK_ERROR: "NETWORK_ERROR";
 };
-type TAttemptResult = (typeof AttemptResult)[keyof typeof AttemptResult];
+type TPaymentAttemptResult = (typeof PaymentAttemptResult)[keyof typeof PaymentAttemptResult];
+declare const PaymentUIEvent: {
+    readonly FORM_ENTERED: "FORM_ENTERED";
+    readonly FORM_EXITED: "FORM_EXITED";
+};
+type TPaymentUIEvent = (typeof PaymentUIEvent)[keyof typeof PaymentUIEvent];
+declare const CheckoutView: {
+    readonly EXPRESS: "EXPRESS";
+    readonly CARD: "CARD";
+};
+type TCheckoutView = (typeof CheckoutView)[keyof typeof CheckoutView];
 interface PaymentAttempt {
-    result: TAttemptResult;
+    type: typeof EventType.PAYMENT_ATTEMPT;
+    event: TPaymentAttemptResult;
     method: TPaymentMethod;
     paymentId?: string;
     code?: string;
     message?: string;
+    timestamp: number;
+    clientSessionId?: string;
+}
+interface PaymentUI {
+    type: typeof EventType.PAYMENT_UI;
+    event: TPaymentUIEvent;
+    view: TCheckoutView;
+    timestamp: number;
+    clientSessionId?: string;
 }
+type CheckoutEvent = PaymentAttempt | PaymentUI;
 interface PaymentResult {
     status: 'PAYMENT_SUCCESS' | 'PAYMENT_ERROR' | 'PAYMENT_CANCELLED';
     data?: string;
@@ -76,7 +123,7 @@ interface FlintNPaymentOptions {
     origin?: string;
     config: FlintNConfig;
     onPayment?: (result: PaymentResult) => void;
-    onEvent?: (event: PaymentAttempt) => void;
+    onEvent?: (event: CheckoutEvent) => void;
     onReady?: () => void;
     onError?: (error: PaymentError) => void;
     debug?: boolean;
@@ -134,7 +181,7 @@ interface UseFlintNPaymentReturn {
     containerRef: React.RefObject<HTMLDivElement | null>;
     isReady: boolean;
     paymentResult: PaymentResult | null;
-    attempts: Array<PaymentAttempt>;
+    events: Array<CheckoutEvent>;
     error: PaymentError | null;
 }
 declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;

package/dist/react.d.ts

@@ -1,3 +1,15 @@
+declare const EventType: {
+    readonly WIDGET_READY: "WIDGET_READY";
+    readonly WIDGET_CONFIG: "WIDGET_CONFIG";
+    readonly PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT";
+    readonly PAYMENT_UI: "PAYMENT_UI_EVENT";
+    readonly PAYMENT: "PAYMENT";
+    readonly PAYMENT_SUCCESS: "PAYMENT_SUCCESS";
+    readonly PAYMENT_ERROR: "PAYMENT_ERROR";
+    readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
+    readonly REDIRECT: "REDIRECT";
+    readonly RESIZE: "RESIZE";
+};
 declare const CheckoutFormVariant: {
     readonly DEFAULT: "DEFAULT";
     readonly LIST: "LIST";
@@ -5,14 +17,14 @@ declare const CheckoutFormVariant: {
 };
 type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
 interface FormFields {
-    isEmailVisible?: boolean;
-    isCardholderNameRequired?: boolean;
     formVariant?: TCheckoutFormVariant;
 }
 interface FormStyles {
     loaderColor?: string;
     backgroundColor?: string;
+    lightLogos?: boolean;
     expressButtonsSpacing?: string;
+    expressButtonsBorderRadius?: string;
     inputBackgroundColor?: string;
     inputBorderRadius?: string;
     inputBorderColor?: string;
@@ -20,6 +32,20 @@ interface FormStyles {
     inputBorderFocusColor?: string;
     inputBorderErrorColor?: string;
     errorMessageColor?: string;
+    labelColor?: 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;
@@ -43,7 +69,7 @@ declare const PaymentMethod: {
     readonly OTHER: "OTHER";
 };
 type TPaymentMethod = (typeof PaymentMethod)[keyof typeof PaymentMethod];
-declare const AttemptResult: {
+declare const PaymentAttemptResult: {
     readonly INITIATED: "INITIATED";
     readonly THREE_DS_INITIATED: "THREE_DS_INITIATED";
     readonly AUTHORIZED: "AUTHORIZED";
@@ -52,14 +78,35 @@ declare const AttemptResult: {
     readonly CANCELLED: "CANCELLED";
     readonly NETWORK_ERROR: "NETWORK_ERROR";
 };
-type TAttemptResult = (typeof AttemptResult)[keyof typeof AttemptResult];
+type TPaymentAttemptResult = (typeof PaymentAttemptResult)[keyof typeof PaymentAttemptResult];
+declare const PaymentUIEvent: {
+    readonly FORM_ENTERED: "FORM_ENTERED";
+    readonly FORM_EXITED: "FORM_EXITED";
+};
+type TPaymentUIEvent = (typeof PaymentUIEvent)[keyof typeof PaymentUIEvent];
+declare const CheckoutView: {
+    readonly EXPRESS: "EXPRESS";
+    readonly CARD: "CARD";
+};
+type TCheckoutView = (typeof CheckoutView)[keyof typeof CheckoutView];
 interface PaymentAttempt {
-    result: TAttemptResult;
+    type: typeof EventType.PAYMENT_ATTEMPT;
+    event: TPaymentAttemptResult;
     method: TPaymentMethod;
     paymentId?: string;
     code?: string;
     message?: string;
+    timestamp: number;
+    clientSessionId?: string;
+}
+interface PaymentUI {
+    type: typeof EventType.PAYMENT_UI;
+    event: TPaymentUIEvent;
+    view: TCheckoutView;
+    timestamp: number;
+    clientSessionId?: string;
 }
+type CheckoutEvent = PaymentAttempt | PaymentUI;
 interface PaymentResult {
     status: 'PAYMENT_SUCCESS' | 'PAYMENT_ERROR' | 'PAYMENT_CANCELLED';
     data?: string;
@@ -76,7 +123,7 @@ interface FlintNPaymentOptions {
     origin?: string;
     config: FlintNConfig;
     onPayment?: (result: PaymentResult) => void;
-    onEvent?: (event: PaymentAttempt) => void;
+    onEvent?: (event: CheckoutEvent) => void;
     onReady?: () => void;
     onError?: (error: PaymentError) => void;
     debug?: boolean;
@@ -134,7 +181,7 @@ interface UseFlintNPaymentReturn {
     containerRef: React.RefObject<HTMLDivElement | null>;
     isReady: boolean;
     paymentResult: PaymentResult | null;
-    attempts: Array<PaymentAttempt>;
+    events: Array<CheckoutEvent>;
     error: PaymentError | null;
 }
 declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;

package/dist/react.js

@@ -32,7 +32,8 @@ var import_react = require("react");
 var EventType = {
   WIDGET_READY: "WIDGET_READY",
   WIDGET_CONFIG: "WIDGET_CONFIG",
-  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT",
+  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT",
+  PAYMENT_UI: "PAYMENT_UI_EVENT",
   PAYMENT: "PAYMENT",
   PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
   PAYMENT_ERROR: "PAYMENT_ERROR",
@@ -173,7 +174,16 @@ function createFlintNPayment(options) {
         options.onReady?.();
         break;
       case EventType.PAYMENT_ATTEMPT:
-        options.onEvent?.(payload);
+        options.onEvent?.({
+          type: EventType.PAYMENT_ATTEMPT,
+          ...payload
+        });
+        break;
+      case EventType.PAYMENT_UI:
+        options.onEvent?.({
+          type: EventType.PAYMENT_UI,
+          ...payload
+        });
         break;
       case EventType.PAYMENT:
         options.onPayment?.(payload);
@@ -233,7 +243,7 @@ function useFlintNPayment(options) {
   const onEventRef = (0, import_react.useRef)(options.onEvent);
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   const [paymentResult, setPaymentResult] = (0, import_react.useState)(null);
-  const [attempts, setAttempts] = (0, import_react.useState)([]);
+  const [events, setEvents] = (0, import_react.useState)([]);
   const [error, setError] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
     onPaymentRef.current = options.onPayment;
@@ -243,7 +253,7 @@ function useFlintNPayment(options) {
     if (!containerRef.current) return;
     setIsReady(false);
     setPaymentResult(null);
-    setAttempts([]);
+    setEvents([]);
     setError(null);
     paymentRef.current = createFlintNPayment({
       ...options,
@@ -253,7 +263,7 @@ function useFlintNPayment(options) {
         onPaymentRef.current?.(result);
       },
       onEvent: (event) => {
-        setAttempts((prev) => [...prev, event]);
+        setEvents((prev) => [...prev, event]);
         onEventRef.current?.(event);
       },
       onError: (err) => setError(err)
@@ -275,7 +285,7 @@ function useFlintNPayment(options) {
     containerRef,
     isReady,
     paymentResult,
-    attempts,
+    events,
     error
   };
 }

package/dist/react.mjs

@@ -5,7 +5,8 @@ import { useEffect, useRef, useState } from "react";
 var EventType = {
   WIDGET_READY: "WIDGET_READY",
   WIDGET_CONFIG: "WIDGET_CONFIG",
-  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT",
+  PAYMENT_ATTEMPT: "PAYMENT_ATTEMPT_EVENT",
+  PAYMENT_UI: "PAYMENT_UI_EVENT",
   PAYMENT: "PAYMENT",
   PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
   PAYMENT_ERROR: "PAYMENT_ERROR",
@@ -146,7 +147,16 @@ function createFlintNPayment(options) {
         options.onReady?.();
         break;
       case EventType.PAYMENT_ATTEMPT:
-        options.onEvent?.(payload);
+        options.onEvent?.({
+          type: EventType.PAYMENT_ATTEMPT,
+          ...payload
+        });
+        break;
+      case EventType.PAYMENT_UI:
+        options.onEvent?.({
+          type: EventType.PAYMENT_UI,
+          ...payload
+        });
         break;
       case EventType.PAYMENT:
         options.onPayment?.(payload);
@@ -206,7 +216,7 @@ function useFlintNPayment(options) {
   const onEventRef = useRef(options.onEvent);
   const [isReady, setIsReady] = useState(false);
   const [paymentResult, setPaymentResult] = useState(null);
-  const [attempts, setAttempts] = useState([]);
+  const [events, setEvents] = useState([]);
   const [error, setError] = useState(null);
   useEffect(() => {
     onPaymentRef.current = options.onPayment;
@@ -216,7 +226,7 @@ function useFlintNPayment(options) {
     if (!containerRef.current) return;
     setIsReady(false);
     setPaymentResult(null);
-    setAttempts([]);
+    setEvents([]);
     setError(null);
     paymentRef.current = createFlintNPayment({
       ...options,
@@ -226,7 +236,7 @@ function useFlintNPayment(options) {
         onPaymentRef.current?.(result);
       },
       onEvent: (event) => {
-        setAttempts((prev) => [...prev, event]);
+        setEvents((prev) => [...prev, event]);
         onEventRef.current?.(event);
       },
       onError: (err) => setError(err)
@@ -248,7 +258,7 @@ function useFlintNPayment(options) {
     containerRef,
     isReady,
     paymentResult,
-    attempts,
+    events,
     error
   };
 }

package/package.json

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