@superlogic/spree-pay 0.4.14 → 0.5.2

package/build/index.css

@@ -243,6 +243,9 @@
 .sl-spreepay .pointer-events-none {
   pointer-events: none;
 }
+.sl-spreepay .invisible {
+  visibility: hidden;
+}
 .sl-spreepay .sr-only {
   position: absolute;
   width: 1px;
@@ -555,6 +558,11 @@
 .sl-spreepay .gap-6 {
   gap: calc(var(--spacing) * 6);
 }
+.sl-spreepay .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .sl-spreepay .overflow-hidden {
   overflow: hidden;
 }
@@ -662,6 +670,9 @@
 .sl-spreepay .bg-\(--crypto-pay-bg\) {
   background-color: var(--crypto-pay-bg);
 }
+.sl-spreepay .bg-\(--negative\) {
+  background-color: var(--negative);
+}
 .sl-spreepay .bg-\(--overlay\) {
   background-color: var(--overlay);
 }
@@ -1000,6 +1011,15 @@
 .sl-spreepay .ring-\(--b-brand\) {
   --tw-ring-color: var(--b-brand);
 }
+.sl-spreepay .ring-\(--b-tertiary\)\/50 {
+  --tw-ring-color: var(--b-tertiary);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--b-tertiary) 50%, transparent);
+  }
+}
+.sl-spreepay .ring-offset-\(--s-default\) {
+  --tw-ring-offset-color: var(--s-default);
+}
 .sl-spreepay .outline {
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
@@ -1117,6 +1137,11 @@
     font-weight: var(--font-weight-medium);
   }
 }
+.sl-spreepay .file\:text-\(--primary\) {
+  &::file-selector-button {
+    color: var(--primary);
+  }
+}
 .sl-spreepay .placeholder\:text-\(--tertiary\) {
   &::placeholder {
     color: var(--tertiary);
@@ -1136,6 +1161,16 @@
     }
   }
 }
+.sl-spreepay .hover\:bg-\(--negative\)\/90 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--negative);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--negative) 90%, transparent);
+      }
+    }
+  }
+}
 .sl-spreepay .hover\:bg-\(--primary\)\/90 {
   &:hover {
     @media (hover: hover) {
@@ -1229,6 +1264,11 @@
       var(--tw-shadow);
   }
 }
+.sl-spreepay .focus\:ring-\(--b-tertiary\) {
+  &:focus {
+    --tw-ring-color: var(--b-tertiary);
+  }
+}
 .sl-spreepay .focus\:ring-offset-2 {
   &:focus {
     --tw-ring-offset-width: 2px;
@@ -1245,6 +1285,11 @@
     }
   }
 }
+.sl-spreepay .focus-visible\:border-\(--b-tertiary\) {
+  &:focus-visible {
+    border-color: var(--b-tertiary);
+  }
+}
 .sl-spreepay .focus-visible\:ring-1 {
   &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1278,6 +1323,32 @@
       var(--tw-shadow);
   }
 }
+.sl-spreepay .focus-visible\:ring-\(--b-tertiary\) {
+  &:focus-visible {
+    --tw-ring-color: var(--b-tertiary);
+  }
+}
+.sl-spreepay .focus-visible\:ring-\(--b-tertiary\)\/50 {
+  &:focus-visible {
+    --tw-ring-color: var(--b-tertiary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--b-tertiary) 50%, transparent);
+    }
+  }
+}
+.sl-spreepay .focus-visible\:ring-\(--negative\) {
+  &:focus-visible {
+    --tw-ring-color: var(--negative);
+  }
+}
+.sl-spreepay .focus-visible\:ring-\(--negative\)\/20 {
+  &:focus-visible {
+    --tw-ring-color: var(--negative);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--negative) 20%, transparent);
+    }
+  }
+}
 .sl-spreepay .focus-visible\:ring-offset-1 {
   &:focus-visible {
     --tw-ring-offset-width: 1px;
@@ -1355,6 +1426,19 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 }
+.sl-spreepay .aria-invalid\:border-\(--negative\) {
+  &[aria-invalid=true] {
+    border-color: var(--negative);
+  }
+}
+.sl-spreepay .aria-invalid\:ring-\(--negative\)\/20 {
+  &[aria-invalid=true] {
+    --tw-ring-color: var(--negative);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--negative) 20%, transparent);
+    }
+  }
+}
 .sl-spreepay .data-disabled\:opacity-50 {
   &[data-disabled] {
     opacity: 50%;
@@ -1578,6 +1662,27 @@
     font-size: 22px;
   }
 }
+.sl-spreepay .dark\:border-\(--b-tertiary\) {
+  &:is(.dark *) {
+    border-color: var(--b-tertiary);
+  }
+}
+.sl-spreepay .dark\:bg-\(--negative\)\/60 {
+  &:is(.dark *) {
+    background-color: var(--negative);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--negative) 60%, transparent);
+    }
+  }
+}
+.sl-spreepay .dark\:bg-\(--s-primary\)\/30 {
+  &:is(.dark *) {
+    background-color: var(--s-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--s-primary) 30%, transparent);
+    }
+  }
+}
 .sl-spreepay .dark\:hover\:bg-\(--accent\)\/50 {
   &:is(.dark *) {
     &:hover {
@@ -1590,6 +1695,38 @@
     }
   }
 }
+.sl-spreepay .dark\:hover\:bg-\(--s-primary\)\/50 {
+  &:is(.dark *) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--s-primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--s-primary) 50%, transparent);
+        }
+      }
+    }
+  }
+}
+.sl-spreepay .dark\:focus-visible\:ring-\(--negative\)\/40 {
+  &:is(.dark *) {
+    &:focus-visible {
+      --tw-ring-color: var(--negative);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--negative) 40%, transparent);
+      }
+    }
+  }
+}
+.sl-spreepay .dark\:aria-invalid\:ring-\(--negative\)\/40 {
+  &:is(.dark *) {
+    &[aria-invalid=true] {
+      --tw-ring-color: var(--negative);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--negative) 40%, transparent);
+      }
+    }
+  }
+}
 .sl-spreepay .\[\&_a\]\:underline {
   & a {
     text-decoration-line: underline;

package/build/index.d.cts

@@ -20,7 +20,9 @@ type SpreePayProps = Partial<{
 
 declare const SpreePay: (props: SpreePayProps) => react_jsx_runtime.JSX.Element;
 
-declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
+declare const useCapture3DS: ({ paymentIntent }: {
+    paymentIntent?: string | null;
+}) => void;
 
 type Environment = 'dev' | 'stg' | 'prod';
 type ENV = {
@@ -114,7 +116,7 @@ declare enum PaymentType {
     CREDIT_CARD_SPLIT = "SPLIT",
     POINTS = "POINTS"
 }
-declare enum SlapiPaymentStatus {
+declare enum PaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
     PENDING = "PENDING",// back-end only
     AUTHORIZED = "AUTHORIZED",// success
@@ -124,7 +126,7 @@ declare enum SlapiPaymentStatus {
     CAPTURE_FAILED = "CAPTURE_FAILED"
 }
 type PaymentMethodResult = {
-    status: SlapiPaymentStatus;
+    status: PaymentStatus;
     paymentId: string;
     txHash: string | null;
     txId: string | null;
@@ -133,7 +135,6 @@ type PaymentMethodResult = {
 type ProcessFnParams = {
     hash: string;
     capture?: boolean;
-    metadata?: Record<string, unknown>;
 };
 type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;
 
@@ -160,6 +161,50 @@ declare global {
   }
 }
 
+/**
+ * Thrown on a non-ok HTTP response. Keeps the status code and raw body on
+ * dedicated fields so callers can branch on 401/422/5xx without parsing the
+ * message string.
+ */
+declare class SpreePayHttpError extends Error {
+    status: number;
+    body: string;
+    url: string;
+    constructor(status: number, body: string, url: string);
+}
+/**
+ * Discriminates *why* a payment failed so consumers can show tailored UI
+ * (e.g. "your card was declined, try another" vs. a generic "try again").
+ */
+declare enum PaymentErrorCode {
+    /** The backend rejected the card (a 4xx decline, or a terminal FAILED status on a card payment). */
+    CARD_ERROR = "CARD_ERROR",
+    /** Anything else: network/server error, timeout, cancelled flow, crypto failure, … */
+    PAYMENT_ERROR = "PAYMENT_ERROR"
+}
+/**
+ * Wraps a payment failure with a category `code` and payment `status`; the original
+ * error is kept on `cause` (logs only). The widget throws this — detect it with
+ * `isPaymentError`. Not meant to be constructed by consumers.
+ */
+declare class PaymentError extends Error {
+    status: PaymentStatus;
+    code: PaymentErrorCode;
+    /**
+     * Optional stable code from the backend (e.g. `INSUFFICIENT_FUNDS`) for branching
+     * on specific cases without changing the `code` enum. Safe to expose (an
+     * identifier, not free-text); absent until the backend supplies one.
+     */
+    backendCode?: string;
+    constructor(message: string, status: PaymentStatus, options?: {
+        code?: PaymentErrorCode;
+        backendCode?: string;
+        cause?: unknown;
+    });
+}
+/** Type guard so consumers can branch on PaymentError without duck-typing `.status`. */
+declare const isPaymentError: (e: unknown) => e is PaymentError;
+
 declare enum LogLevel {
     DEBUG = 0,
     INFO = 1,
@@ -234,4 +279,4 @@ declare const configureLogger: (config: Partial<LoggerConfig> & {
     environment?: Environment;
 }) => void;
 
-export { type ENV, LogLevel, type PaymentMethodResult, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SlapiPaymentStatus, SpreePay, type SpreePayProps, SpreePayProvider, configureLogger, logger, useCapture3DS, useSpreePay };
+export { type ENV, type Environment, type LogContext, LogLevel, type LoggerConfig, PaymentError, PaymentErrorCode, type PaymentMethodResult, PaymentStatus, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SpreePay, SpreePayHttpError, type SpreePayProps, SpreePayProvider, configureLogger, isPaymentError, logger, useCapture3DS, useSpreePay };

package/build/index.d.ts

@@ -20,7 +20,9 @@ type SpreePayProps = Partial<{
 
 declare const SpreePay: (props: SpreePayProps) => react_jsx_runtime.JSX.Element;
 
-declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
+declare const useCapture3DS: ({ paymentIntent }: {
+    paymentIntent?: string | null;
+}) => void;
 
 type Environment = 'dev' | 'stg' | 'prod';
 type ENV = {
@@ -114,7 +116,7 @@ declare enum PaymentType {
     CREDIT_CARD_SPLIT = "SPLIT",
     POINTS = "POINTS"
 }
-declare enum SlapiPaymentStatus {
+declare enum PaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
     PENDING = "PENDING",// back-end only
     AUTHORIZED = "AUTHORIZED",// success
@@ -124,7 +126,7 @@ declare enum SlapiPaymentStatus {
     CAPTURE_FAILED = "CAPTURE_FAILED"
 }
 type PaymentMethodResult = {
-    status: SlapiPaymentStatus;
+    status: PaymentStatus;
     paymentId: string;
     txHash: string | null;
     txId: string | null;
@@ -133,7 +135,6 @@ type PaymentMethodResult = {
 type ProcessFnParams = {
     hash: string;
     capture?: boolean;
-    metadata?: Record<string, unknown>;
 };
 type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;
 
@@ -160,6 +161,50 @@ declare global {
   }
 }
 
+/**
+ * Thrown on a non-ok HTTP response. Keeps the status code and raw body on
+ * dedicated fields so callers can branch on 401/422/5xx without parsing the
+ * message string.
+ */
+declare class SpreePayHttpError extends Error {
+    status: number;
+    body: string;
+    url: string;
+    constructor(status: number, body: string, url: string);
+}
+/**
+ * Discriminates *why* a payment failed so consumers can show tailored UI
+ * (e.g. "your card was declined, try another" vs. a generic "try again").
+ */
+declare enum PaymentErrorCode {
+    /** The backend rejected the card (a 4xx decline, or a terminal FAILED status on a card payment). */
+    CARD_ERROR = "CARD_ERROR",
+    /** Anything else: network/server error, timeout, cancelled flow, crypto failure, … */
+    PAYMENT_ERROR = "PAYMENT_ERROR"
+}
+/**
+ * Wraps a payment failure with a category `code` and payment `status`; the original
+ * error is kept on `cause` (logs only). The widget throws this — detect it with
+ * `isPaymentError`. Not meant to be constructed by consumers.
+ */
+declare class PaymentError extends Error {
+    status: PaymentStatus;
+    code: PaymentErrorCode;
+    /**
+     * Optional stable code from the backend (e.g. `INSUFFICIENT_FUNDS`) for branching
+     * on specific cases without changing the `code` enum. Safe to expose (an
+     * identifier, not free-text); absent until the backend supplies one.
+     */
+    backendCode?: string;
+    constructor(message: string, status: PaymentStatus, options?: {
+        code?: PaymentErrorCode;
+        backendCode?: string;
+        cause?: unknown;
+    });
+}
+/** Type guard so consumers can branch on PaymentError without duck-typing `.status`. */
+declare const isPaymentError: (e: unknown) => e is PaymentError;
+
 declare enum LogLevel {
     DEBUG = 0,
     INFO = 1,
@@ -234,4 +279,4 @@ declare const configureLogger: (config: Partial<LoggerConfig> & {
     environment?: Environment;
 }) => void;
 
-export { type ENV, LogLevel, type PaymentMethodResult, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SlapiPaymentStatus, SpreePay, type SpreePayProps, SpreePayProvider, configureLogger, logger, useCapture3DS, useSpreePay };
+export { type ENV, type Environment, type LogContext, LogLevel, type LoggerConfig, PaymentError, PaymentErrorCode, type PaymentMethodResult, PaymentStatus, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SpreePay, SpreePayHttpError, type SpreePayProps, SpreePayProvider, configureLogger, isPaymentError, logger, useCapture3DS, useSpreePay };