@usethrottle/payment-methods 0.1.5 → 0.1.7

package/dist/{Gr4vyAddCard-SIRA5YPK.js → Gr4vyAddCard-IUUGN3ZS.js}

@@ -42,14 +42,14 @@ function Gr4vyAddCard({ payload, theme, onAdded, onCancel, onError }) {
         currency: payload.currency,
         country: payload.country ?? "US",
         merchantAccountId: payload.merchantAccountId,
-        intent: "capture",
+        intent: "authorize",
         paymentSource: "recurring",
         store: true,
         display: "addOnly",
         ...payload.buyerExternalIdentifier ? { buyerExternalIdentifier: payload.buyerExternalIdentifier } : {},
         ...gr4vyTheme !== void 0 ? { theme: gr4vyTheme } : {},
         onComplete: (txn) => {
-          onAdded(txn.paymentMethod?.id);
+          onAdded({ transactionId: txn.id, paymentMethodId: txn.paymentMethod?.id });
         },
         onEvent: (eventName, data) => {
           if (eventName === "optionsLoaded" || eventName === "formUpdate") {
@@ -112,4 +112,4 @@ export {
   Gr4vyAddCard_default as default,
   resolveComponent
 };
-//# sourceMappingURL=Gr4vyAddCard-SIRA5YPK.js.map
+//# sourceMappingURL=Gr4vyAddCard-IUUGN3ZS.js.map

package/dist/Gr4vyAddCard-IUUGN3ZS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Gr4vyAddCard.tsx"],"sourcesContent":["/**\n * Gr4vyAddCard — lazy-loaded vault-only embed wrapper.\n *\n * THIS FILE MUST ONLY BE LOADED VIA React.lazy(() => import('./Gr4vyAddCard'))\n * from PaymentMethods.tsx. Never import it at the module top-level of any file\n * that is part of the server bundle — @gr4vy/embed-react touches `window` at\n * module evaluation time and will throw `ReferenceError: window is not defined`\n * in SSR contexts.\n */\nimport React, { useRef, useState, useEffect } from 'react';\nimport Gr4vyEmbedImport, { type EmbedInstance } from '@gr4vy/embed-react';\nimport type { EmbedPayload, PaymentMethodsTheme } from './types';\n\n/**\n * `@gr4vy/embed-react` is a CommonJS package (no `module`/`exports`/`type`\n * fields), so a consumer's bundler resolves `import Gr4vy from '@gr4vy/embed-react'`\n * differently depending on its CJS↔ESM interop: some hand back the component\n * directly, others hand back the module namespace `{ default: <component> }`.\n * Rendering the namespace object throws \"Element type is invalid … got: object\".\n * Unwrap `.default` until we reach an actual React element type (a function\n * component, or a forwardRef/memo object carrying `$$typeof`).\n */\nexport function resolveComponent(mod: unknown): React.ComponentType<Record<string, unknown>> {\n  let x: any = mod;\n  while (x && typeof x === 'object' && !x.$$typeof && x.default) x = x.default;\n  return x as React.ComponentType<Record<string, unknown>>;\n}\nconst Gr4vyEmbed = resolveComponent(Gr4vyEmbedImport);\n\ninterface Gr4vyTransaction {\n  id: string;\n  status: string;\n  paymentMethod?: { id?: string };\n}\n\nexport interface Gr4vyAddCardProps {\n  payload: EmbedPayload;\n  theme?: PaymentMethodsTheme;\n  /** Fired when the embed completes the authorization + vault. Carries the\n   * Gr4vy transaction id (used to record the card server-side) + the vaulted\n   * payment-method id. */\n  onAdded: (result: { transactionId?: string; paymentMethodId?: string }) => void;\n  onCancel: () => void;\n  onError: (err: unknown) => void;\n}\n\nexport function Gr4vyAddCard({ payload, theme, onAdded, onCancel, onError }: Gr4vyAddCardProps) {\n  const embedRef = useRef<EmbedInstance>(null);\n  // The Gr4vy embed loads its secure fields asynchronously (and is sometimes\n  // slow). Don't let the buyer click \"Save card\" until the form is ready, or\n  // the submit goes out with no card data and Gr4vy returns \"Request failed\n  // validation\". `optionsLoaded` is the embed's \"form is ready\" signal.\n  const [formReady, setFormReady] = useState(false);\n\n  useEffect(() => {\n    if (formReady) return;\n    const t = setTimeout(() => {\n      if (!formReady) {\n        onError(\n          new Error(\n            \"The card form is taking longer than usual to load. Please close this and tap “Add card” again.\",\n          ),\n        );\n      }\n    }, 20000);\n    return () => clearTimeout(t);\n  }, [formReady, onError]);\n\n  const colors = theme\n    ? {\n        ...(theme.colorPrimary !== undefined ? { primary: theme.colorPrimary } : {}),\n        ...(theme.colorText !== undefined ? { text: theme.colorText } : {}),\n        ...(theme.colorBorder !== undefined ? { inputBorder: theme.colorBorder } : {}),\n      }\n    : {};\n  const gr4vyTheme = Object.keys(colors).length ? { colors } : undefined;\n\n  return (\n    <div>\n      <Gr4vyEmbed\n        ref={embedRef}\n        gr4vyId={payload.gr4vyId}\n        environment={payload.environment}\n        token={payload.embedToken}\n        amount={payload.amount}\n        currency={payload.currency}\n        country={payload.country ?? 'US'}\n        merchantAccountId={payload.merchantAccountId}\n        intent=\"authorize\"\n        paymentSource=\"recurring\"\n        store={true}\n        display=\"addOnly\"\n        {...(payload.buyerExternalIdentifier\n          ? { buyerExternalIdentifier: payload.buyerExternalIdentifier }\n          : {})}\n        {...(gr4vyTheme !== undefined ? { theme: gr4vyTheme } : {})}\n        onComplete={(txn: Gr4vyTransaction) => {\n          onAdded({ transactionId: txn.id, paymentMethodId: txn.paymentMethod?.id });\n        }}\n        onEvent={(eventName: string, data: unknown) => {\n          // The form's fields are loaded and interactive.\n          if (eventName === 'optionsLoaded' || eventName === 'formUpdate') {\n            setFormReady(true);\n          }\n          if (eventName === 'transactionFailed') {\n            onError(data);\n          }\n        }}\n      />\n\n      <button\n        type=\"button\"\n        disabled={!formReady}\n        onClick={() => {\n          if (!formReady) return;\n          embedRef.current?.submit();\n        }}\n        style={{\n          marginTop: '12px',\n          padding: '8px 16px',\n          backgroundColor: formReady ? theme?.colorPrimary ?? '#1D56E8' : '#9CA3AF',\n          color: '#fff',\n          border: 'none',\n          borderRadius: '8px',\n          fontSize: '14px',\n          fontWeight: 600,\n          cursor: formReady ? 'pointer' : 'not-allowed',\n          width: '100%',\n        }}\n      >\n        {formReady ? 'Save card' : 'Loading card form…'}\n      </button>\n\n      <button\n        type=\"button\"\n        onClick={onCancel}\n        style={{\n          marginTop: '8px',\n          padding: '8px 16px',\n          backgroundColor: 'transparent',\n          color: theme?.colorText ?? '#111827',\n          border: `1px solid ${theme?.colorBorder ?? '#E5E7EB'}`,\n          borderRadius: '8px',\n          fontSize: '14px',\n          cursor: 'pointer',\n          width: '100%',\n        }}\n      >\n        Cancel\n      </button>\n    </div>\n  );\n}\n\nexport default Gr4vyAddCard;\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -76,14 +76,14 @@ function Gr4vyAddCard({ payload, theme, onAdded, onCancel, onError }) {
         currency: payload.currency,
         country: payload.country ?? "US",
         merchantAccountId: payload.merchantAccountId,
-        intent: "capture",
+        intent: "authorize",
         paymentSource: "recurring",
         store: true,
         display: "addOnly",
         ...payload.buyerExternalIdentifier ? { buyerExternalIdentifier: payload.buyerExternalIdentifier } : {},
         ...gr4vyTheme !== void 0 ? { theme: gr4vyTheme } : {},
         onComplete: (txn) => {
-          onAdded(txn.paymentMethod?.id);
+          onAdded({ transactionId: txn.id, paymentMethodId: txn.paymentMethod?.id });
         },
         onEvent: (eventName, data) => {
           if (eventName === "optionsLoaded" || eventName === "formUpdate") {
@@ -242,6 +242,16 @@ function createPaymentMethods(opts) {
         headers
       });
       return parsed.data;
+    },
+    async confirmAddCard(transactionId) {
+      const parsed = await request({
+        method: "POST",
+        path: "/api/v1/me/payment-methods/confirm",
+        baseUrl,
+        headers,
+        body: { transactionId }
+      });
+      return parsed.data;
     }
   };
 }
@@ -321,7 +331,17 @@ function usePaymentMethods(opts) {
   const addCard = async () => {
     return client.startAddCard();
   };
-  return { cards, isLoading, error, setDefault, remove, addCard, refetch };
+  const confirmAddCard = async (transactionId) => {
+    try {
+      await client.confirmAddCard(transactionId);
+      await refetch();
+    } catch (err) {
+      const pmErr = toPaymentMethodsError(err);
+      setError(pmErr);
+      throw pmErr;
+    }
+  };
+  return { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch };
 }
 
 // src/PaymentMethods.tsx
@@ -354,7 +374,7 @@ function toReadableMessage(err) {
   return "Your card couldn't be saved. Please double-check the details and try again.";
 }
 function PaymentMethods({ clientToken, baseUrl, theme, onChange }) {
-  const { cards, isLoading, error, setDefault, remove, addCard, refetch } = usePaymentMethods({
+  const { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch } = usePaymentMethods({
     clientToken,
     baseUrl
   });
@@ -501,11 +521,16 @@ function PaymentMethods({ clientToken, baseUrl, theme, onChange }) {
           {
             payload: addCardPayload,
             theme,
-            onAdded: async (paymentMethodId) => {
-              void paymentMethodId;
-              await refetch();
-              setExternalError(null);
-              setAddCardPayload(null);
+            onAdded: async ({ transactionId }) => {
+              try {
+                if (transactionId) await confirmAddCard(transactionId);
+                else await refetch();
+                setExternalError(null);
+              } catch (e) {
+                setExternalError(new Error(toReadableMessage(e)));
+              } finally {
+                setAddCardPayload(null);
+              }
             },
             onCancel: () => setAddCardPayload(null),
             onError: (err) => {

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Gr4vyAddCard.tsx","../src/index.tsx","../src/errors.ts","../src/types.ts","../src/request.ts","../src/client.ts","../src/usePaymentMethods.ts","../src/PaymentMethods.tsx"],"sourcesContent":["/**\n * Gr4vyAddCard — lazy-loaded vault-only embed wrapper.\n *\n * THIS FILE MUST ONLY BE LOADED VIA React.lazy(() => import('./Gr4vyAddCard'))\n * from PaymentMethods.tsx. Never import it at the module top-level of any file\n * that is part of the server bundle — @gr4vy/embed-react touches `window` at\n * module evaluation time and will throw `ReferenceError: window is not defined`\n * in SSR contexts.\n */\nimport React, { useRef, useState, useEffect } from 'react';\nimport Gr4vyEmbedImport, { type EmbedInstance } from '@gr4vy/embed-react';\nimport type { EmbedPayload, PaymentMethodsTheme } from './types';\n\n/**\n * `@gr4vy/embed-react` is a CommonJS package (no `module`/`exports`/`type`\n * fields), so a consumer's bundler resolves `import Gr4vy from '@gr4vy/embed-react'`\n * differently depending on its CJS↔ESM interop: some hand back the component\n * directly, others hand back the module namespace `{ default: <component> }`.\n * Rendering the namespace object throws \"Element type is invalid … got: object\".\n * Unwrap `.default` until we reach an actual React element type (a function\n * component, or a forwardRef/memo object carrying `$$typeof`).\n */\nexport function resolveComponent(mod: unknown): React.ComponentType<Record<string, unknown>> {\n  let x: any = mod;\n  while (x && typeof x === 'object' && !x.$$typeof && x.default) x = x.default;\n  return x as React.ComponentType<Record<string, unknown>>;\n}\nconst Gr4vyEmbed = resolveComponent(Gr4vyEmbedImport);\n\ninterface Gr4vyTransaction {\n  id: string;\n  status: string;\n  paymentMethod?: { id?: string };\n}\n\nexport interface Gr4vyAddCardProps {\n  payload: EmbedPayload;\n  theme?: PaymentMethodsTheme;\n  onAdded: (paymentMethodId?: string) => void;\n  onCancel: () => void;\n  onError: (err: unknown) => void;\n}\n\nexport function Gr4vyAddCard({ payload, theme, onAdded, onCancel, onError }: Gr4vyAddCardProps) {\n  const embedRef = useRef<EmbedInstance>(null);\n  // The Gr4vy embed loads its secure fields asynchronously (and is sometimes\n  // slow). Don't let the buyer click \"Save card\" until the form is ready, or\n  // the submit goes out with no card data and Gr4vy returns \"Request failed\n  // validation\". `optionsLoaded` is the embed's \"form is ready\" signal.\n  const [formReady, setFormReady] = useState(false);\n\n  useEffect(() => {\n    if (formReady) return;\n    const t = setTimeout(() => {\n      if (!formReady) {\n        onError(\n          new Error(\n            \"The card form is taking longer than usual to load. Please close this and tap “Add card” again.\",\n          ),\n        );\n      }\n    }, 20000);\n    return () => clearTimeout(t);\n  }, [formReady, onError]);\n\n  const colors = theme\n    ? {\n        ...(theme.colorPrimary !== undefined ? { primary: theme.colorPrimary } : {}),\n        ...(theme.colorText !== undefined ? { text: theme.colorText } : {}),\n        ...(theme.colorBorder !== undefined ? { inputBorder: theme.colorBorder } : {}),\n      }\n    : {};\n  const gr4vyTheme = Object.keys(colors).length ? { colors } : undefined;\n\n  return (\n    <div>\n      <Gr4vyEmbed\n        ref={embedRef}\n        gr4vyId={payload.gr4vyId}\n        environment={payload.environment}\n        token={payload.embedToken}\n        amount={payload.amount}\n        currency={payload.currency}\n        country={payload.country ?? 'US'}\n        merchantAccountId={payload.merchantAccountId}\n        intent=\"capture\"\n        paymentSource=\"recurring\"\n        store={true}\n        display=\"addOnly\"\n        {...(payload.buyerExternalIdentifier\n          ? { buyerExternalIdentifier: payload.buyerExternalIdentifier }\n          : {})}\n        {...(gr4vyTheme !== undefined ? { theme: gr4vyTheme } : {})}\n        onComplete={(txn: Gr4vyTransaction) => {\n          onAdded(txn.paymentMethod?.id);\n        }}\n        onEvent={(eventName: string, data: unknown) => {\n          // The form's fields are loaded and interactive.\n          if (eventName === 'optionsLoaded' || eventName === 'formUpdate') {\n            setFormReady(true);\n          }\n          if (eventName === 'transactionFailed') {\n            onError(data);\n          }\n        }}\n      />\n\n      <button\n        type=\"button\"\n        disabled={!formReady}\n        onClick={() => {\n          if (!formReady) return;\n          embedRef.current?.submit();\n        }}\n        style={{\n          marginTop: '12px',\n          padding: '8px 16px',\n          backgroundColor: formReady ? theme?.colorPrimary ?? '#1D56E8' : '#9CA3AF',\n          color: '#fff',\n          border: 'none',\n          borderRadius: '8px',\n          fontSize: '14px',\n          fontWeight: 600,\n          cursor: formReady ? 'pointer' : 'not-allowed',\n          width: '100%',\n        }}\n      >\n        {formReady ? 'Save card' : 'Loading card form…'}\n      </button>\n\n      <button\n        type=\"button\"\n        onClick={onCancel}\n        style={{\n          marginTop: '8px',\n          padding: '8px 16px',\n          backgroundColor: 'transparent',\n          color: theme?.colorText ?? '#111827',\n          border: `1px solid ${theme?.colorBorder ?? '#E5E7EB'}`,\n          borderRadius: '8px',\n          fontSize: '14px',\n          cursor: 'pointer',\n          width: '100%',\n        }}\n      >\n        Cancel\n      </button>\n    </div>\n  );\n}\n\nexport default Gr4vyAddCard;\n","export { ThrottlePaymentMethodsError, ThrottleError, isThrottleError } from './errors';\nexport type { SavedCard, EmbedPayload, MintedClientToken, PaymentMethodsTheme } from './types';\nexport { DEFAULT_BASE_URL } from './types';\nexport { createPaymentMethods } from './client';\nexport type { PaymentMethodsClient } from './client';\nexport { usePaymentMethods } from './usePaymentMethods';\nexport type { UsePaymentMethodsOpts, UsePaymentMethodsResult } from './usePaymentMethods';\nexport { PaymentMethods } from './PaymentMethods';\nexport type { PaymentMethodsProps } from './PaymentMethods';\n","import { ThrottleError } from '@usethrottle/errors';\n\nexport class ThrottlePaymentMethodsError extends ThrottleError {\n  constructor(args: { code: string; message: string; statusCode: number; details?: unknown }) {\n    super(args);\n    this.name = 'ThrottlePaymentMethodsError';\n  }\n}\n\nexport { ThrottleError, isThrottleError } from '@usethrottle/errors';\n","export interface SavedCard {\n  id: string;\n  methodType: string;\n  cardBrand: string | null;\n  cardLastFour: string | null;\n  cardExpMonth: number | null;\n  cardExpYear: number | null;\n  isDefault: boolean;\n}\n\nexport interface EmbedPayload {\n  embedToken: string;\n  checkoutSessionId: string;\n  amount: number;\n  currency: string;\n  gr4vyId: string;\n  merchantAccountId?: string;\n  environment: 'sandbox' | 'production';\n  /**\n   * The buyer the embed JWT is pinned to. The add-only vault embed is a\n   * recurring/store flow, so Gr4vy asserts the `<Gr4vyEmbed buyerExternalIdentifier>`\n   * prop equals the JWT's value — the component MUST forward this or the embed\n   * renders no card fields. Always present on the add-only embed payload.\n   */\n  buyerExternalIdentifier?: string;\n  /** ISO country code the embed session was minted for. The Gr4vy embed requires\n   * a `country` string at init (\"undefined must be a string ISO country code\").\n   * Defaults to 'US' in the component when absent. */\n  country?: string;\n  hostedUrl?: string;\n  embedUrl?: string;\n}\n\nexport interface MintedClientToken {\n  token: string;\n  expiresAt: string;\n}\n\nexport interface PaymentMethodsTheme {\n  colorPrimary?: string;\n  colorText?: string;\n  colorBorder?: string;\n  borderRadius?: string;\n}\n\nexport const DEFAULT_BASE_URL = 'https://api.usethrottle.dev';\n","import { ThrottlePaymentMethodsError } from './errors';\n\nexport async function request(input: {\n  method: string;\n  path: string;\n  baseUrl: string;\n  headers?: Record<string, string>;\n  body?: unknown;\n}): Promise<any> {\n  const res = await fetch(`${input.baseUrl}${input.path}`, {\n    method: input.method,\n    headers: {\n      ...(input.body !== undefined ? { 'Content-Type': 'application/json' } : {}),\n      ...(input.headers ?? {}),\n    },\n    ...(input.body !== undefined ? { body: JSON.stringify(input.body) } : {}),\n  });\n  const text = await res.text();\n  let parsed: any = {};\n  try {\n    parsed = text ? JSON.parse(text) : {};\n  } catch {\n    // Non-JSON body (e.g. an HTML 502/503 gateway page). Leave parsed as {} so\n    // the non-2xx branch below still throws a typed ThrottlePaymentMethodsError\n    // (code 'request_failed') rather than leaking a raw SyntaxError.\n  }\n  if (!res.ok) {\n    const e = parsed?.error ?? {};\n    throw new ThrottlePaymentMethodsError({\n      code: e.code ?? 'request_failed',\n      message: e.message ?? `Request failed with ${res.status}`,\n      statusCode: res.status,\n      details: e.details,\n    });\n  }\n  return parsed;\n}\n","import { request } from './request';\nimport { DEFAULT_BASE_URL } from './types';\nimport type { SavedCard, EmbedPayload } from './types';\n\nexport interface PaymentMethodsClient {\n  list(): Promise<SavedCard[]>;\n  setDefault(id: string): Promise<SavedCard>;\n  remove(id: string): Promise<{ id: string }>;\n  startAddCard(): Promise<EmbedPayload>;\n}\n\nexport function createPaymentMethods(opts: {\n  clientToken: string;\n  baseUrl?: string;\n}): PaymentMethodsClient {\n  const baseUrl = opts.baseUrl ?? DEFAULT_BASE_URL;\n  const headers = { 'X-Throttle-PM-Token': opts.clientToken };\n\n  return {\n    async list() {\n      const parsed = await request({ method: 'GET', path: '/api/v1/me/payment-methods', baseUrl, headers });\n      return parsed.data as SavedCard[];\n    },\n\n    async setDefault(id: string) {\n      const parsed = await request({\n        method: 'PATCH',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n        body: { isDefault: true },\n      });\n      return parsed.data as SavedCard;\n    },\n\n    async remove(id: string) {\n      const parsed = await request({\n        method: 'DELETE',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n      });\n      return parsed.data as { id: string };\n    },\n\n    async startAddCard() {\n      const parsed = await request({\n        method: 'POST',\n        path: '/api/v1/me/payment-methods/embed-token',\n        baseUrl,\n        headers,\n      });\n      return parsed.data as EmbedPayload;\n    },\n  };\n}\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPaymentMethods } from './client';\nimport { ThrottlePaymentMethodsError } from './errors';\nimport type { EmbedPayload, SavedCard } from './types';\n\nexport interface UsePaymentMethodsOpts {\n  clientToken: string;\n  baseUrl?: string;\n}\n\nexport interface UsePaymentMethodsResult {\n  cards: SavedCard[];\n  isLoading: boolean;\n  error: ThrottlePaymentMethodsError | null;\n  setDefault(id: string): Promise<void>;\n  remove(id: string): Promise<void>;\n  addCard(): Promise<EmbedPayload>;\n  refetch(): Promise<void>;\n}\n\nfunction toPaymentMethodsError(err: unknown): ThrottlePaymentMethodsError {\n  if (err instanceof ThrottlePaymentMethodsError) return err;\n  const message = err instanceof Error ? err.message : String(err);\n  return new ThrottlePaymentMethodsError({ code: 'unknown_error', message, statusCode: 0 });\n}\n\nexport function usePaymentMethods(opts: UsePaymentMethodsOpts): UsePaymentMethodsResult {\n  const { clientToken, baseUrl } = opts;\n\n  const client = useMemo(\n    () => createPaymentMethods({ clientToken, baseUrl }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [clientToken, baseUrl],\n  );\n\n  const [cards, setCards] = useState<SavedCard[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<ThrottlePaymentMethodsError | null>(null);\n  const genRef = useRef(0);\n\n  const refetch = useMemo(\n    () => async () => {\n      const myGen = genRef.current;\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      }\n    },\n    [client],\n  );\n\n  useEffect(() => {\n    const myGen = ++genRef.current;\n\n    (async () => {\n      setIsLoading(true);\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      } finally {\n        if (genRef.current === myGen) {\n          setIsLoading(false);\n        }\n      }\n    })();\n  }, [client]);\n\n  const setDefault = async (id: string): Promise<void> => {\n    try {\n      await client.setDefault(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const remove = async (id: string): Promise<void> => {\n    try {\n      await client.remove(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const addCard = async (): Promise<EmbedPayload> => {\n    return client.startAddCard();\n  };\n\n  return { cards, isLoading, error, setDefault, remove, addCard, refetch };\n}\n","import React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { usePaymentMethods } from './usePaymentMethods';\nimport type { EmbedPayload, SavedCard, PaymentMethodsTheme } from './types';\n\n// Lazy import — keeps @gr4vy/embed-react out of the eager bundle (SSR-safe).\n// Do NOT hoist this to a top-level import; React.lazy is the only safe path.\nconst LazyGr4vyAddCard = React.lazy(() =>\n  import('./Gr4vyAddCard').then((m) => ({ default: m.Gr4vyAddCard })),\n);\n\nexport interface PaymentMethodsProps {\n  clientToken: string;\n  baseUrl?: string;\n  theme?: PaymentMethodsTheme;\n  onChange?: (cards: SavedCard[]) => void;\n}\n\nfunction formatCard(card: SavedCard): string {\n  const brand = card.cardBrand ? card.cardBrand.toUpperCase() : 'Card';\n  const last4 = card.cardLastFour ? `•••• ${card.cardLastFour}` : '••••';\n  const brandPart = `${brand} ${last4}`;\n\n  if (card.cardExpMonth != null && card.cardExpYear != null) {\n    const mm = String(card.cardExpMonth).padStart(2, '0');\n    const yy = String(card.cardExpYear).slice(-2);\n    return `${brandPart} · ${mm}/${yy}`;\n  }\n  return brandPart;\n}\n\n/**\n * Extract a human-readable message from anything thrown/emitted. The Gr4vy embed\n * emits a plain object on `transactionFailed` (e.g. { code, message }), not an\n * Error — `String(obj)` would render \"[object Object]\", so pull `.message`/`.code`.\n */\nexport function toReadableMessage(err: unknown): string {\n  if (err instanceof Error && err.message) return err.message;\n  if (err && typeof err === 'object') {\n    const o = err as Record<string, unknown>;\n    if (typeof o.message === 'string' && o.message) return o.message;\n    if (o.code != null) {\n      return `Your card couldn't be saved (${String(o.code)}). Please double-check the details and try again.`;\n    }\n  }\n  if (typeof err === 'string' && err) return err;\n  return \"Your card couldn't be saved. Please double-check the details and try again.\";\n}\n\nexport function PaymentMethods({ clientToken, baseUrl, theme, onChange }: PaymentMethodsProps) {\n  const { cards, isLoading, error, setDefault, remove, addCard, refetch } = usePaymentMethods({\n    clientToken,\n    baseUrl,\n  });\n\n  const [busyId, setBusyId] = useState<string | null>(null);\n  const [addCardPayload, setAddCardPayload] = useState<EmbedPayload | null>(null);\n  const [externalError, setExternalError] = useState<Error | null>(null);\n\n  const onChangeRef = useRef(onChange);\n  useEffect(() => { onChangeRef.current = onChange; });\n  useEffect(() => { if (!isLoading) onChangeRef.current?.(cards); }, [cards, isLoading]);\n\n  const primary = theme?.colorPrimary ?? '#1D56E8';\n  const colorText = theme?.colorText ?? '#111827';\n  const colorBorder = theme?.colorBorder ?? '#E5E7EB';\n  const borderRadius = theme?.borderRadius ?? '8px';\n\n  const handleSetDefault = async (id: string) => {\n    setBusyId(id);\n    try {\n      await setDefault(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleRemove = async (id: string) => {\n    setBusyId(id);\n    try {\n      await remove(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleAddCard = async () => {\n    try {\n      const payload = await addCard();\n      setExternalError(null);\n      setAddCardPayload(payload);\n    } catch (err) {\n      setExternalError(new Error(toReadableMessage(err)));\n    }\n  };\n\n  if (isLoading) {\n    return (\n      <div role=\"status\" aria-label=\"Loading payment methods\" style={{ color: colorText }}>\n        Loading…\n      </div>\n    );\n  }\n\n  const displayError = externalError ?? error;\n\n  return (\n    <div style={{ color: colorText, fontFamily: 'inherit' }}>\n      {displayError && (\n        <div\n          role=\"alert\"\n          style={{\n            color: '#DC2626',\n            marginBottom: '12px',\n            padding: '8px 12px',\n            border: `1px solid #FCA5A5`,\n            borderRadius,\n            fontSize: '14px',\n          }}\n        >\n          {displayError.message}\n        </div>\n      )}\n\n      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n        {cards.map((card) => {\n          const isBusy = busyId === card.id;\n          return (\n            <li\n              key={card.id}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: '12px',\n                padding: '12px',\n                border: `1px solid ${colorBorder}`,\n                borderRadius,\n                marginBottom: '8px',\n              }}\n            >\n              <span style={{ flex: 1, fontSize: '14px' }}>{formatCard(card)}</span>\n\n              {card.isDefault ? (\n                <span\n                  style={{\n                    backgroundColor: primary,\n                    color: '#fff',\n                    fontSize: '12px',\n                    fontWeight: 600,\n                    padding: '2px 8px',\n                    borderRadius: '999px',\n                  }}\n                >\n                  Default\n                </span>\n              ) : (\n                <>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleSetDefault(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid ${colorBorder}`,\n                      borderRadius,\n                      background: 'transparent',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Make default\n                  </button>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleRemove(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid #FCA5A5`,\n                      borderRadius,\n                      background: 'transparent',\n                      color: '#DC2626',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Remove\n                  </button>\n                </>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n\n      {addCardPayload ? (\n        <Suspense\n          fallback={\n            <div role=\"status\" style={{ color: colorText, marginTop: '12px' }}>\n              Loading…\n            </div>\n          }\n        >\n          <LazyGr4vyAddCard\n            payload={addCardPayload}\n            theme={theme}\n            onAdded={async (paymentMethodId) => {\n              void paymentMethodId;\n              await refetch();\n              setExternalError(null);\n              setAddCardPayload(null);\n            }}\n            onCancel={() => setAddCardPayload(null)}\n            onError={(err) => {\n              // Show the real reason and KEEP the embed open so the buyer can\n              // fix the card and retry without re-opening the form.\n              setExternalError(new Error(toReadableMessage(err)));\n            }}\n          />\n        </Suspense>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={handleAddCard}\n          style={{\n            marginTop: '12px',\n            padding: '8px 16px',\n            backgroundColor: primary,\n            color: '#fff',\n            border: 'none',\n            borderRadius,\n            fontSize: '14px',\n            fontWeight: 600,\n            cursor: 'pointer',\n          }}\n        >\n          + Add card\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_react","Gr4vyEmbedImport","import_errors","import_react","import_jsx_runtime","React"]}
+{"version":3,"sources":["../src/Gr4vyAddCard.tsx","../src/index.tsx","../src/errors.ts","../src/types.ts","../src/request.ts","../src/client.ts","../src/usePaymentMethods.ts","../src/PaymentMethods.tsx"],"sourcesContent":["/**\n * Gr4vyAddCard — lazy-loaded vault-only embed wrapper.\n *\n * THIS FILE MUST ONLY BE LOADED VIA React.lazy(() => import('./Gr4vyAddCard'))\n * from PaymentMethods.tsx. Never import it at the module top-level of any file\n * that is part of the server bundle — @gr4vy/embed-react touches `window` at\n * module evaluation time and will throw `ReferenceError: window is not defined`\n * in SSR contexts.\n */\nimport React, { useRef, useState, useEffect } from 'react';\nimport Gr4vyEmbedImport, { type EmbedInstance } from '@gr4vy/embed-react';\nimport type { EmbedPayload, PaymentMethodsTheme } from './types';\n\n/**\n * `@gr4vy/embed-react` is a CommonJS package (no `module`/`exports`/`type`\n * fields), so a consumer's bundler resolves `import Gr4vy from '@gr4vy/embed-react'`\n * differently depending on its CJS↔ESM interop: some hand back the component\n * directly, others hand back the module namespace `{ default: <component> }`.\n * Rendering the namespace object throws \"Element type is invalid … got: object\".\n * Unwrap `.default` until we reach an actual React element type (a function\n * component, or a forwardRef/memo object carrying `$$typeof`).\n */\nexport function resolveComponent(mod: unknown): React.ComponentType<Record<string, unknown>> {\n  let x: any = mod;\n  while (x && typeof x === 'object' && !x.$$typeof && x.default) x = x.default;\n  return x as React.ComponentType<Record<string, unknown>>;\n}\nconst Gr4vyEmbed = resolveComponent(Gr4vyEmbedImport);\n\ninterface Gr4vyTransaction {\n  id: string;\n  status: string;\n  paymentMethod?: { id?: string };\n}\n\nexport interface Gr4vyAddCardProps {\n  payload: EmbedPayload;\n  theme?: PaymentMethodsTheme;\n  /** Fired when the embed completes the authorization + vault. Carries the\n   * Gr4vy transaction id (used to record the card server-side) + the vaulted\n   * payment-method id. */\n  onAdded: (result: { transactionId?: string; paymentMethodId?: string }) => void;\n  onCancel: () => void;\n  onError: (err: unknown) => void;\n}\n\nexport function Gr4vyAddCard({ payload, theme, onAdded, onCancel, onError }: Gr4vyAddCardProps) {\n  const embedRef = useRef<EmbedInstance>(null);\n  // The Gr4vy embed loads its secure fields asynchronously (and is sometimes\n  // slow). Don't let the buyer click \"Save card\" until the form is ready, or\n  // the submit goes out with no card data and Gr4vy returns \"Request failed\n  // validation\". `optionsLoaded` is the embed's \"form is ready\" signal.\n  const [formReady, setFormReady] = useState(false);\n\n  useEffect(() => {\n    if (formReady) return;\n    const t = setTimeout(() => {\n      if (!formReady) {\n        onError(\n          new Error(\n            \"The card form is taking longer than usual to load. Please close this and tap “Add card” again.\",\n          ),\n        );\n      }\n    }, 20000);\n    return () => clearTimeout(t);\n  }, [formReady, onError]);\n\n  const colors = theme\n    ? {\n        ...(theme.colorPrimary !== undefined ? { primary: theme.colorPrimary } : {}),\n        ...(theme.colorText !== undefined ? { text: theme.colorText } : {}),\n        ...(theme.colorBorder !== undefined ? { inputBorder: theme.colorBorder } : {}),\n      }\n    : {};\n  const gr4vyTheme = Object.keys(colors).length ? { colors } : undefined;\n\n  return (\n    <div>\n      <Gr4vyEmbed\n        ref={embedRef}\n        gr4vyId={payload.gr4vyId}\n        environment={payload.environment}\n        token={payload.embedToken}\n        amount={payload.amount}\n        currency={payload.currency}\n        country={payload.country ?? 'US'}\n        merchantAccountId={payload.merchantAccountId}\n        intent=\"authorize\"\n        paymentSource=\"recurring\"\n        store={true}\n        display=\"addOnly\"\n        {...(payload.buyerExternalIdentifier\n          ? { buyerExternalIdentifier: payload.buyerExternalIdentifier }\n          : {})}\n        {...(gr4vyTheme !== undefined ? { theme: gr4vyTheme } : {})}\n        onComplete={(txn: Gr4vyTransaction) => {\n          onAdded({ transactionId: txn.id, paymentMethodId: txn.paymentMethod?.id });\n        }}\n        onEvent={(eventName: string, data: unknown) => {\n          // The form's fields are loaded and interactive.\n          if (eventName === 'optionsLoaded' || eventName === 'formUpdate') {\n            setFormReady(true);\n          }\n          if (eventName === 'transactionFailed') {\n            onError(data);\n          }\n        }}\n      />\n\n      <button\n        type=\"button\"\n        disabled={!formReady}\n        onClick={() => {\n          if (!formReady) return;\n          embedRef.current?.submit();\n        }}\n        style={{\n          marginTop: '12px',\n          padding: '8px 16px',\n          backgroundColor: formReady ? theme?.colorPrimary ?? '#1D56E8' : '#9CA3AF',\n          color: '#fff',\n          border: 'none',\n          borderRadius: '8px',\n          fontSize: '14px',\n          fontWeight: 600,\n          cursor: formReady ? 'pointer' : 'not-allowed',\n          width: '100%',\n        }}\n      >\n        {formReady ? 'Save card' : 'Loading card form…'}\n      </button>\n\n      <button\n        type=\"button\"\n        onClick={onCancel}\n        style={{\n          marginTop: '8px',\n          padding: '8px 16px',\n          backgroundColor: 'transparent',\n          color: theme?.colorText ?? '#111827',\n          border: `1px solid ${theme?.colorBorder ?? '#E5E7EB'}`,\n          borderRadius: '8px',\n          fontSize: '14px',\n          cursor: 'pointer',\n          width: '100%',\n        }}\n      >\n        Cancel\n      </button>\n    </div>\n  );\n}\n\nexport default Gr4vyAddCard;\n","export { ThrottlePaymentMethodsError, ThrottleError, isThrottleError } from './errors';\nexport type { SavedCard, EmbedPayload, MintedClientToken, PaymentMethodsTheme } from './types';\nexport { DEFAULT_BASE_URL } from './types';\nexport { createPaymentMethods } from './client';\nexport type { PaymentMethodsClient } from './client';\nexport { usePaymentMethods } from './usePaymentMethods';\nexport type { UsePaymentMethodsOpts, UsePaymentMethodsResult } from './usePaymentMethods';\nexport { PaymentMethods } from './PaymentMethods';\nexport type { PaymentMethodsProps } from './PaymentMethods';\n","import { ThrottleError } from '@usethrottle/errors';\n\nexport class ThrottlePaymentMethodsError extends ThrottleError {\n  constructor(args: { code: string; message: string; statusCode: number; details?: unknown }) {\n    super(args);\n    this.name = 'ThrottlePaymentMethodsError';\n  }\n}\n\nexport { ThrottleError, isThrottleError } from '@usethrottle/errors';\n","export interface SavedCard {\n  id: string;\n  methodType: string;\n  cardBrand: string | null;\n  cardLastFour: string | null;\n  cardExpMonth: number | null;\n  cardExpYear: number | null;\n  isDefault: boolean;\n}\n\nexport interface EmbedPayload {\n  embedToken: string;\n  checkoutSessionId: string;\n  amount: number;\n  currency: string;\n  gr4vyId: string;\n  merchantAccountId?: string;\n  environment: 'sandbox' | 'production';\n  /**\n   * The buyer the embed JWT is pinned to. The add-only vault embed is a\n   * recurring/store flow, so Gr4vy asserts the `<Gr4vyEmbed buyerExternalIdentifier>`\n   * prop equals the JWT's value — the component MUST forward this or the embed\n   * renders no card fields. Always present on the add-only embed payload.\n   */\n  buyerExternalIdentifier?: string;\n  /** ISO country code the embed session was minted for. The Gr4vy embed requires\n   * a `country` string at init (\"undefined must be a string ISO country code\").\n   * Defaults to 'US' in the component when absent. */\n  country?: string;\n  hostedUrl?: string;\n  embedUrl?: string;\n}\n\nexport interface MintedClientToken {\n  token: string;\n  expiresAt: string;\n}\n\nexport interface PaymentMethodsTheme {\n  colorPrimary?: string;\n  colorText?: string;\n  colorBorder?: string;\n  borderRadius?: string;\n}\n\nexport const DEFAULT_BASE_URL = 'https://api.usethrottle.dev';\n","import { ThrottlePaymentMethodsError } from './errors';\n\nexport async function request(input: {\n  method: string;\n  path: string;\n  baseUrl: string;\n  headers?: Record<string, string>;\n  body?: unknown;\n}): Promise<any> {\n  const res = await fetch(`${input.baseUrl}${input.path}`, {\n    method: input.method,\n    headers: {\n      ...(input.body !== undefined ? { 'Content-Type': 'application/json' } : {}),\n      ...(input.headers ?? {}),\n    },\n    ...(input.body !== undefined ? { body: JSON.stringify(input.body) } : {}),\n  });\n  const text = await res.text();\n  let parsed: any = {};\n  try {\n    parsed = text ? JSON.parse(text) : {};\n  } catch {\n    // Non-JSON body (e.g. an HTML 502/503 gateway page). Leave parsed as {} so\n    // the non-2xx branch below still throws a typed ThrottlePaymentMethodsError\n    // (code 'request_failed') rather than leaking a raw SyntaxError.\n  }\n  if (!res.ok) {\n    const e = parsed?.error ?? {};\n    throw new ThrottlePaymentMethodsError({\n      code: e.code ?? 'request_failed',\n      message: e.message ?? `Request failed with ${res.status}`,\n      statusCode: res.status,\n      details: e.details,\n    });\n  }\n  return parsed;\n}\n","import { request } from './request';\nimport { DEFAULT_BASE_URL } from './types';\nimport type { SavedCard, EmbedPayload } from './types';\n\nexport interface PaymentMethodsClient {\n  list(): Promise<SavedCard[]>;\n  setDefault(id: string): Promise<SavedCard>;\n  remove(id: string): Promise<{ id: string }>;\n  startAddCard(): Promise<EmbedPayload>;\n  /** Record a card vaulted via the add-card embed, given the embed's transaction id. */\n  confirmAddCard(transactionId: string): Promise<SavedCard>;\n}\n\nexport function createPaymentMethods(opts: {\n  clientToken: string;\n  baseUrl?: string;\n}): PaymentMethodsClient {\n  const baseUrl = opts.baseUrl ?? DEFAULT_BASE_URL;\n  const headers = { 'X-Throttle-PM-Token': opts.clientToken };\n\n  return {\n    async list() {\n      const parsed = await request({ method: 'GET', path: '/api/v1/me/payment-methods', baseUrl, headers });\n      return parsed.data as SavedCard[];\n    },\n\n    async setDefault(id: string) {\n      const parsed = await request({\n        method: 'PATCH',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n        body: { isDefault: true },\n      });\n      return parsed.data as SavedCard;\n    },\n\n    async remove(id: string) {\n      const parsed = await request({\n        method: 'DELETE',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n      });\n      return parsed.data as { id: string };\n    },\n\n    async startAddCard() {\n      const parsed = await request({\n        method: 'POST',\n        path: '/api/v1/me/payment-methods/embed-token',\n        baseUrl,\n        headers,\n      });\n      return parsed.data as EmbedPayload;\n    },\n\n    async confirmAddCard(transactionId: string) {\n      const parsed = await request({\n        method: 'POST',\n        path: '/api/v1/me/payment-methods/confirm',\n        baseUrl,\n        headers,\n        body: { transactionId },\n      });\n      return parsed.data as SavedCard;\n    },\n  };\n}\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPaymentMethods } from './client';\nimport { ThrottlePaymentMethodsError } from './errors';\nimport type { EmbedPayload, SavedCard } from './types';\n\nexport interface UsePaymentMethodsOpts {\n  clientToken: string;\n  baseUrl?: string;\n}\n\nexport interface UsePaymentMethodsResult {\n  cards: SavedCard[];\n  isLoading: boolean;\n  error: ThrottlePaymentMethodsError | null;\n  setDefault(id: string): Promise<void>;\n  remove(id: string): Promise<void>;\n  addCard(): Promise<EmbedPayload>;\n  /** Record a card vaulted by the add-card embed (given its transaction id), then refresh the list. */\n  confirmAddCard(transactionId: string): Promise<void>;\n  refetch(): Promise<void>;\n}\n\nfunction toPaymentMethodsError(err: unknown): ThrottlePaymentMethodsError {\n  if (err instanceof ThrottlePaymentMethodsError) return err;\n  const message = err instanceof Error ? err.message : String(err);\n  return new ThrottlePaymentMethodsError({ code: 'unknown_error', message, statusCode: 0 });\n}\n\nexport function usePaymentMethods(opts: UsePaymentMethodsOpts): UsePaymentMethodsResult {\n  const { clientToken, baseUrl } = opts;\n\n  const client = useMemo(\n    () => createPaymentMethods({ clientToken, baseUrl }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [clientToken, baseUrl],\n  );\n\n  const [cards, setCards] = useState<SavedCard[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<ThrottlePaymentMethodsError | null>(null);\n  const genRef = useRef(0);\n\n  const refetch = useMemo(\n    () => async () => {\n      const myGen = genRef.current;\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      }\n    },\n    [client],\n  );\n\n  useEffect(() => {\n    const myGen = ++genRef.current;\n\n    (async () => {\n      setIsLoading(true);\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      } finally {\n        if (genRef.current === myGen) {\n          setIsLoading(false);\n        }\n      }\n    })();\n  }, [client]);\n\n  const setDefault = async (id: string): Promise<void> => {\n    try {\n      await client.setDefault(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const remove = async (id: string): Promise<void> => {\n    try {\n      await client.remove(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const addCard = async (): Promise<EmbedPayload> => {\n    return client.startAddCard();\n  };\n\n  const confirmAddCard = async (transactionId: string): Promise<void> => {\n    try {\n      await client.confirmAddCard(transactionId);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  return { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch };\n}\n","import React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { usePaymentMethods } from './usePaymentMethods';\nimport type { EmbedPayload, SavedCard, PaymentMethodsTheme } from './types';\n\n// Lazy import — keeps @gr4vy/embed-react out of the eager bundle (SSR-safe).\n// Do NOT hoist this to a top-level import; React.lazy is the only safe path.\nconst LazyGr4vyAddCard = React.lazy(() =>\n  import('./Gr4vyAddCard').then((m) => ({ default: m.Gr4vyAddCard })),\n);\n\nexport interface PaymentMethodsProps {\n  clientToken: string;\n  baseUrl?: string;\n  theme?: PaymentMethodsTheme;\n  onChange?: (cards: SavedCard[]) => void;\n}\n\nfunction formatCard(card: SavedCard): string {\n  const brand = card.cardBrand ? card.cardBrand.toUpperCase() : 'Card';\n  const last4 = card.cardLastFour ? `•••• ${card.cardLastFour}` : '••••';\n  const brandPart = `${brand} ${last4}`;\n\n  if (card.cardExpMonth != null && card.cardExpYear != null) {\n    const mm = String(card.cardExpMonth).padStart(2, '0');\n    const yy = String(card.cardExpYear).slice(-2);\n    return `${brandPart} · ${mm}/${yy}`;\n  }\n  return brandPart;\n}\n\n/**\n * Extract a human-readable message from anything thrown/emitted. The Gr4vy embed\n * emits a plain object on `transactionFailed` (e.g. { code, message }), not an\n * Error — `String(obj)` would render \"[object Object]\", so pull `.message`/`.code`.\n */\nexport function toReadableMessage(err: unknown): string {\n  if (err instanceof Error && err.message) return err.message;\n  if (err && typeof err === 'object') {\n    const o = err as Record<string, unknown>;\n    if (typeof o.message === 'string' && o.message) return o.message;\n    if (o.code != null) {\n      return `Your card couldn't be saved (${String(o.code)}). Please double-check the details and try again.`;\n    }\n  }\n  if (typeof err === 'string' && err) return err;\n  return \"Your card couldn't be saved. Please double-check the details and try again.\";\n}\n\nexport function PaymentMethods({ clientToken, baseUrl, theme, onChange }: PaymentMethodsProps) {\n  const { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch } = usePaymentMethods({\n    clientToken,\n    baseUrl,\n  });\n\n  const [busyId, setBusyId] = useState<string | null>(null);\n  const [addCardPayload, setAddCardPayload] = useState<EmbedPayload | null>(null);\n  const [externalError, setExternalError] = useState<Error | null>(null);\n\n  const onChangeRef = useRef(onChange);\n  useEffect(() => { onChangeRef.current = onChange; });\n  useEffect(() => { if (!isLoading) onChangeRef.current?.(cards); }, [cards, isLoading]);\n\n  const primary = theme?.colorPrimary ?? '#1D56E8';\n  const colorText = theme?.colorText ?? '#111827';\n  const colorBorder = theme?.colorBorder ?? '#E5E7EB';\n  const borderRadius = theme?.borderRadius ?? '8px';\n\n  const handleSetDefault = async (id: string) => {\n    setBusyId(id);\n    try {\n      await setDefault(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleRemove = async (id: string) => {\n    setBusyId(id);\n    try {\n      await remove(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleAddCard = async () => {\n    try {\n      const payload = await addCard();\n      setExternalError(null);\n      setAddCardPayload(payload);\n    } catch (err) {\n      setExternalError(new Error(toReadableMessage(err)));\n    }\n  };\n\n  if (isLoading) {\n    return (\n      <div role=\"status\" aria-label=\"Loading payment methods\" style={{ color: colorText }}>\n        Loading…\n      </div>\n    );\n  }\n\n  const displayError = externalError ?? error;\n\n  return (\n    <div style={{ color: colorText, fontFamily: 'inherit' }}>\n      {displayError && (\n        <div\n          role=\"alert\"\n          style={{\n            color: '#DC2626',\n            marginBottom: '12px',\n            padding: '8px 12px',\n            border: `1px solid #FCA5A5`,\n            borderRadius,\n            fontSize: '14px',\n          }}\n        >\n          {displayError.message}\n        </div>\n      )}\n\n      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n        {cards.map((card) => {\n          const isBusy = busyId === card.id;\n          return (\n            <li\n              key={card.id}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: '12px',\n                padding: '12px',\n                border: `1px solid ${colorBorder}`,\n                borderRadius,\n                marginBottom: '8px',\n              }}\n            >\n              <span style={{ flex: 1, fontSize: '14px' }}>{formatCard(card)}</span>\n\n              {card.isDefault ? (\n                <span\n                  style={{\n                    backgroundColor: primary,\n                    color: '#fff',\n                    fontSize: '12px',\n                    fontWeight: 600,\n                    padding: '2px 8px',\n                    borderRadius: '999px',\n                  }}\n                >\n                  Default\n                </span>\n              ) : (\n                <>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleSetDefault(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid ${colorBorder}`,\n                      borderRadius,\n                      background: 'transparent',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Make default\n                  </button>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleRemove(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid #FCA5A5`,\n                      borderRadius,\n                      background: 'transparent',\n                      color: '#DC2626',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Remove\n                  </button>\n                </>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n\n      {addCardPayload ? (\n        <Suspense\n          fallback={\n            <div role=\"status\" style={{ color: colorText, marginTop: '12px' }}>\n              Loading…\n            </div>\n          }\n        >\n          <LazyGr4vyAddCard\n            payload={addCardPayload}\n            theme={theme}\n            onAdded={async ({ transactionId }) => {\n              // Record the vaulted card in Throttle (so it shows in the wallet),\n              // then refresh. confirmAddCard refetches on success.\n              try {\n                if (transactionId) await confirmAddCard(transactionId);\n                else await refetch();\n                setExternalError(null);\n              } catch (e) {\n                setExternalError(new Error(toReadableMessage(e)));\n              } finally {\n                setAddCardPayload(null);\n              }\n            }}\n            onCancel={() => setAddCardPayload(null)}\n            onError={(err) => {\n              // Show the real reason and KEEP the embed open so the buyer can\n              // fix the card and retry without re-opening the form.\n              setExternalError(new Error(toReadableMessage(err)));\n            }}\n          />\n        </Suspense>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={handleAddCard}\n          style={{\n            marginTop: '12px',\n            padding: '8px 16px',\n            backgroundColor: primary,\n            color: '#fff',\n            border: 'none',\n            borderRadius,\n            fontSize: '14px',\n            fontWeight: 600,\n            cursor: 'pointer',\n          }}\n        >\n          + Add card\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_react","Gr4vyEmbedImport","import_errors","import_react","import_jsx_runtime","React"]}

package/dist/index.d.cts

@@ -20,6 +20,8 @@ interface PaymentMethodsClient {
         id: string;
     }>;
     startAddCard(): Promise<EmbedPayload>;
+    /** Record a card vaulted via the add-card embed, given the embed's transaction id. */
+    confirmAddCard(transactionId: string): Promise<SavedCard>;
 }
 declare function createPaymentMethods(opts: {
     clientToken: string;
@@ -37,6 +39,8 @@ interface UsePaymentMethodsResult {
     setDefault(id: string): Promise<void>;
     remove(id: string): Promise<void>;
     addCard(): Promise<EmbedPayload>;
+    /** Record a card vaulted by the add-card embed (given its transaction id), then refresh the list. */
+    confirmAddCard(transactionId: string): Promise<void>;
     refetch(): Promise<void>;
 }
 declare function usePaymentMethods(opts: UsePaymentMethodsOpts): UsePaymentMethodsResult;

package/dist/index.d.ts

@@ -20,6 +20,8 @@ interface PaymentMethodsClient {
         id: string;
     }>;
     startAddCard(): Promise<EmbedPayload>;
+    /** Record a card vaulted via the add-card embed, given the embed's transaction id. */
+    confirmAddCard(transactionId: string): Promise<SavedCard>;
 }
 declare function createPaymentMethods(opts: {
     clientToken: string;
@@ -37,6 +39,8 @@ interface UsePaymentMethodsResult {
     setDefault(id: string): Promise<void>;
     remove(id: string): Promise<void>;
     addCard(): Promise<EmbedPayload>;
+    /** Record a card vaulted by the add-card embed (given its transaction id), then refresh the list. */
+    confirmAddCard(transactionId: string): Promise<void>;
     refetch(): Promise<void>;
 }
 declare function usePaymentMethods(opts: UsePaymentMethodsOpts): UsePaymentMethodsResult;

package/dist/index.js

@@ -42,6 +42,16 @@ function createPaymentMethods(opts) {
         headers
       });
       return parsed.data;
+    },
+    async confirmAddCard(transactionId) {
+      const parsed = await request({
+        method: "POST",
+        path: "/api/v1/me/payment-methods/confirm",
+        baseUrl,
+        headers,
+        body: { transactionId }
+      });
+      return parsed.data;
     }
   };
 }
@@ -121,14 +131,24 @@ function usePaymentMethods(opts) {
   const addCard = async () => {
     return client.startAddCard();
   };
-  return { cards, isLoading, error, setDefault, remove, addCard, refetch };
+  const confirmAddCard = async (transactionId) => {
+    try {
+      await client.confirmAddCard(transactionId);
+      await refetch();
+    } catch (err) {
+      const pmErr = toPaymentMethodsError(err);
+      setError(pmErr);
+      throw pmErr;
+    }
+  };
+  return { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch };
 }
 
 // src/PaymentMethods.tsx
 import React, { Suspense, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LazyGr4vyAddCard = React.lazy(
-  () => import("./Gr4vyAddCard-SIRA5YPK.js").then((m) => ({ default: m.Gr4vyAddCard }))
+  () => import("./Gr4vyAddCard-IUUGN3ZS.js").then((m) => ({ default: m.Gr4vyAddCard }))
 );
 function formatCard(card) {
   const brand = card.cardBrand ? card.cardBrand.toUpperCase() : "Card";
@@ -154,7 +174,7 @@ function toReadableMessage(err) {
   return "Your card couldn't be saved. Please double-check the details and try again.";
 }
 function PaymentMethods({ clientToken, baseUrl, theme, onChange }) {
-  const { cards, isLoading, error, setDefault, remove, addCard, refetch } = usePaymentMethods({
+  const { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch } = usePaymentMethods({
     clientToken,
     baseUrl
   });
@@ -301,11 +321,16 @@ function PaymentMethods({ clientToken, baseUrl, theme, onChange }) {
           {
             payload: addCardPayload,
             theme,
-            onAdded: async (paymentMethodId) => {
-              void paymentMethodId;
-              await refetch();
-              setExternalError(null);
-              setAddCardPayload(null);
+            onAdded: async ({ transactionId }) => {
+              try {
+                if (transactionId) await confirmAddCard(transactionId);
+                else await refetch();
+                setExternalError(null);
+              } catch (e) {
+                setExternalError(new Error(toReadableMessage(e)));
+              } finally {
+                setAddCardPayload(null);
+              }
             },
             onCancel: () => setAddCardPayload(null),
             onError: (err) => {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client.ts","../src/usePaymentMethods.ts","../src/PaymentMethods.tsx"],"sourcesContent":["import { request } from './request';\nimport { DEFAULT_BASE_URL } from './types';\nimport type { SavedCard, EmbedPayload } from './types';\n\nexport interface PaymentMethodsClient {\n  list(): Promise<SavedCard[]>;\n  setDefault(id: string): Promise<SavedCard>;\n  remove(id: string): Promise<{ id: string }>;\n  startAddCard(): Promise<EmbedPayload>;\n}\n\nexport function createPaymentMethods(opts: {\n  clientToken: string;\n  baseUrl?: string;\n}): PaymentMethodsClient {\n  const baseUrl = opts.baseUrl ?? DEFAULT_BASE_URL;\n  const headers = { 'X-Throttle-PM-Token': opts.clientToken };\n\n  return {\n    async list() {\n      const parsed = await request({ method: 'GET', path: '/api/v1/me/payment-methods', baseUrl, headers });\n      return parsed.data as SavedCard[];\n    },\n\n    async setDefault(id: string) {\n      const parsed = await request({\n        method: 'PATCH',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n        body: { isDefault: true },\n      });\n      return parsed.data as SavedCard;\n    },\n\n    async remove(id: string) {\n      const parsed = await request({\n        method: 'DELETE',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n      });\n      return parsed.data as { id: string };\n    },\n\n    async startAddCard() {\n      const parsed = await request({\n        method: 'POST',\n        path: '/api/v1/me/payment-methods/embed-token',\n        baseUrl,\n        headers,\n      });\n      return parsed.data as EmbedPayload;\n    },\n  };\n}\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPaymentMethods } from './client';\nimport { ThrottlePaymentMethodsError } from './errors';\nimport type { EmbedPayload, SavedCard } from './types';\n\nexport interface UsePaymentMethodsOpts {\n  clientToken: string;\n  baseUrl?: string;\n}\n\nexport interface UsePaymentMethodsResult {\n  cards: SavedCard[];\n  isLoading: boolean;\n  error: ThrottlePaymentMethodsError | null;\n  setDefault(id: string): Promise<void>;\n  remove(id: string): Promise<void>;\n  addCard(): Promise<EmbedPayload>;\n  refetch(): Promise<void>;\n}\n\nfunction toPaymentMethodsError(err: unknown): ThrottlePaymentMethodsError {\n  if (err instanceof ThrottlePaymentMethodsError) return err;\n  const message = err instanceof Error ? err.message : String(err);\n  return new ThrottlePaymentMethodsError({ code: 'unknown_error', message, statusCode: 0 });\n}\n\nexport function usePaymentMethods(opts: UsePaymentMethodsOpts): UsePaymentMethodsResult {\n  const { clientToken, baseUrl } = opts;\n\n  const client = useMemo(\n    () => createPaymentMethods({ clientToken, baseUrl }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [clientToken, baseUrl],\n  );\n\n  const [cards, setCards] = useState<SavedCard[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<ThrottlePaymentMethodsError | null>(null);\n  const genRef = useRef(0);\n\n  const refetch = useMemo(\n    () => async () => {\n      const myGen = genRef.current;\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      }\n    },\n    [client],\n  );\n\n  useEffect(() => {\n    const myGen = ++genRef.current;\n\n    (async () => {\n      setIsLoading(true);\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      } finally {\n        if (genRef.current === myGen) {\n          setIsLoading(false);\n        }\n      }\n    })();\n  }, [client]);\n\n  const setDefault = async (id: string): Promise<void> => {\n    try {\n      await client.setDefault(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const remove = async (id: string): Promise<void> => {\n    try {\n      await client.remove(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const addCard = async (): Promise<EmbedPayload> => {\n    return client.startAddCard();\n  };\n\n  return { cards, isLoading, error, setDefault, remove, addCard, refetch };\n}\n","import React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { usePaymentMethods } from './usePaymentMethods';\nimport type { EmbedPayload, SavedCard, PaymentMethodsTheme } from './types';\n\n// Lazy import — keeps @gr4vy/embed-react out of the eager bundle (SSR-safe).\n// Do NOT hoist this to a top-level import; React.lazy is the only safe path.\nconst LazyGr4vyAddCard = React.lazy(() =>\n  import('./Gr4vyAddCard').then((m) => ({ default: m.Gr4vyAddCard })),\n);\n\nexport interface PaymentMethodsProps {\n  clientToken: string;\n  baseUrl?: string;\n  theme?: PaymentMethodsTheme;\n  onChange?: (cards: SavedCard[]) => void;\n}\n\nfunction formatCard(card: SavedCard): string {\n  const brand = card.cardBrand ? card.cardBrand.toUpperCase() : 'Card';\n  const last4 = card.cardLastFour ? `•••• ${card.cardLastFour}` : '••••';\n  const brandPart = `${brand} ${last4}`;\n\n  if (card.cardExpMonth != null && card.cardExpYear != null) {\n    const mm = String(card.cardExpMonth).padStart(2, '0');\n    const yy = String(card.cardExpYear).slice(-2);\n    return `${brandPart} · ${mm}/${yy}`;\n  }\n  return brandPart;\n}\n\n/**\n * Extract a human-readable message from anything thrown/emitted. The Gr4vy embed\n * emits a plain object on `transactionFailed` (e.g. { code, message }), not an\n * Error — `String(obj)` would render \"[object Object]\", so pull `.message`/`.code`.\n */\nexport function toReadableMessage(err: unknown): string {\n  if (err instanceof Error && err.message) return err.message;\n  if (err && typeof err === 'object') {\n    const o = err as Record<string, unknown>;\n    if (typeof o.message === 'string' && o.message) return o.message;\n    if (o.code != null) {\n      return `Your card couldn't be saved (${String(o.code)}). Please double-check the details and try again.`;\n    }\n  }\n  if (typeof err === 'string' && err) return err;\n  return \"Your card couldn't be saved. Please double-check the details and try again.\";\n}\n\nexport function PaymentMethods({ clientToken, baseUrl, theme, onChange }: PaymentMethodsProps) {\n  const { cards, isLoading, error, setDefault, remove, addCard, refetch } = usePaymentMethods({\n    clientToken,\n    baseUrl,\n  });\n\n  const [busyId, setBusyId] = useState<string | null>(null);\n  const [addCardPayload, setAddCardPayload] = useState<EmbedPayload | null>(null);\n  const [externalError, setExternalError] = useState<Error | null>(null);\n\n  const onChangeRef = useRef(onChange);\n  useEffect(() => { onChangeRef.current = onChange; });\n  useEffect(() => { if (!isLoading) onChangeRef.current?.(cards); }, [cards, isLoading]);\n\n  const primary = theme?.colorPrimary ?? '#1D56E8';\n  const colorText = theme?.colorText ?? '#111827';\n  const colorBorder = theme?.colorBorder ?? '#E5E7EB';\n  const borderRadius = theme?.borderRadius ?? '8px';\n\n  const handleSetDefault = async (id: string) => {\n    setBusyId(id);\n    try {\n      await setDefault(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleRemove = async (id: string) => {\n    setBusyId(id);\n    try {\n      await remove(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleAddCard = async () => {\n    try {\n      const payload = await addCard();\n      setExternalError(null);\n      setAddCardPayload(payload);\n    } catch (err) {\n      setExternalError(new Error(toReadableMessage(err)));\n    }\n  };\n\n  if (isLoading) {\n    return (\n      <div role=\"status\" aria-label=\"Loading payment methods\" style={{ color: colorText }}>\n        Loading…\n      </div>\n    );\n  }\n\n  const displayError = externalError ?? error;\n\n  return (\n    <div style={{ color: colorText, fontFamily: 'inherit' }}>\n      {displayError && (\n        <div\n          role=\"alert\"\n          style={{\n            color: '#DC2626',\n            marginBottom: '12px',\n            padding: '8px 12px',\n            border: `1px solid #FCA5A5`,\n            borderRadius,\n            fontSize: '14px',\n          }}\n        >\n          {displayError.message}\n        </div>\n      )}\n\n      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n        {cards.map((card) => {\n          const isBusy = busyId === card.id;\n          return (\n            <li\n              key={card.id}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: '12px',\n                padding: '12px',\n                border: `1px solid ${colorBorder}`,\n                borderRadius,\n                marginBottom: '8px',\n              }}\n            >\n              <span style={{ flex: 1, fontSize: '14px' }}>{formatCard(card)}</span>\n\n              {card.isDefault ? (\n                <span\n                  style={{\n                    backgroundColor: primary,\n                    color: '#fff',\n                    fontSize: '12px',\n                    fontWeight: 600,\n                    padding: '2px 8px',\n                    borderRadius: '999px',\n                  }}\n                >\n                  Default\n                </span>\n              ) : (\n                <>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleSetDefault(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid ${colorBorder}`,\n                      borderRadius,\n                      background: 'transparent',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Make default\n                  </button>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleRemove(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid #FCA5A5`,\n                      borderRadius,\n                      background: 'transparent',\n                      color: '#DC2626',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Remove\n                  </button>\n                </>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n\n      {addCardPayload ? (\n        <Suspense\n          fallback={\n            <div role=\"status\" style={{ color: colorText, marginTop: '12px' }}>\n              Loading…\n            </div>\n          }\n        >\n          <LazyGr4vyAddCard\n            payload={addCardPayload}\n            theme={theme}\n            onAdded={async (paymentMethodId) => {\n              void paymentMethodId;\n              await refetch();\n              setExternalError(null);\n              setAddCardPayload(null);\n            }}\n            onCancel={() => setAddCardPayload(null)}\n            onError={(err) => {\n              // Show the real reason and KEEP the embed open so the buyer can\n              // fix the card and retry without re-opening the form.\n              setExternalError(new Error(toReadableMessage(err)));\n            }}\n          />\n        </Suspense>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={handleAddCard}\n          style={{\n            marginTop: '12px',\n            padding: '8px 16px',\n            backgroundColor: primary,\n            color: '#fff',\n            border: 'none',\n            borderRadius,\n            fontSize: '14px',\n            fontWeight: 600,\n            cursor: 'pointer',\n          }}\n        >\n          + Add card\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["useEffect","useRef","useState","useState","useRef","useEffect"]}
+{"version":3,"sources":["../src/client.ts","../src/usePaymentMethods.ts","../src/PaymentMethods.tsx"],"sourcesContent":["import { request } from './request';\nimport { DEFAULT_BASE_URL } from './types';\nimport type { SavedCard, EmbedPayload } from './types';\n\nexport interface PaymentMethodsClient {\n  list(): Promise<SavedCard[]>;\n  setDefault(id: string): Promise<SavedCard>;\n  remove(id: string): Promise<{ id: string }>;\n  startAddCard(): Promise<EmbedPayload>;\n  /** Record a card vaulted via the add-card embed, given the embed's transaction id. */\n  confirmAddCard(transactionId: string): Promise<SavedCard>;\n}\n\nexport function createPaymentMethods(opts: {\n  clientToken: string;\n  baseUrl?: string;\n}): PaymentMethodsClient {\n  const baseUrl = opts.baseUrl ?? DEFAULT_BASE_URL;\n  const headers = { 'X-Throttle-PM-Token': opts.clientToken };\n\n  return {\n    async list() {\n      const parsed = await request({ method: 'GET', path: '/api/v1/me/payment-methods', baseUrl, headers });\n      return parsed.data as SavedCard[];\n    },\n\n    async setDefault(id: string) {\n      const parsed = await request({\n        method: 'PATCH',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n        body: { isDefault: true },\n      });\n      return parsed.data as SavedCard;\n    },\n\n    async remove(id: string) {\n      const parsed = await request({\n        method: 'DELETE',\n        path: `/api/v1/me/payment-methods/${encodeURIComponent(id)}`,\n        baseUrl,\n        headers,\n      });\n      return parsed.data as { id: string };\n    },\n\n    async startAddCard() {\n      const parsed = await request({\n        method: 'POST',\n        path: '/api/v1/me/payment-methods/embed-token',\n        baseUrl,\n        headers,\n      });\n      return parsed.data as EmbedPayload;\n    },\n\n    async confirmAddCard(transactionId: string) {\n      const parsed = await request({\n        method: 'POST',\n        path: '/api/v1/me/payment-methods/confirm',\n        baseUrl,\n        headers,\n        body: { transactionId },\n      });\n      return parsed.data as SavedCard;\n    },\n  };\n}\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPaymentMethods } from './client';\nimport { ThrottlePaymentMethodsError } from './errors';\nimport type { EmbedPayload, SavedCard } from './types';\n\nexport interface UsePaymentMethodsOpts {\n  clientToken: string;\n  baseUrl?: string;\n}\n\nexport interface UsePaymentMethodsResult {\n  cards: SavedCard[];\n  isLoading: boolean;\n  error: ThrottlePaymentMethodsError | null;\n  setDefault(id: string): Promise<void>;\n  remove(id: string): Promise<void>;\n  addCard(): Promise<EmbedPayload>;\n  /** Record a card vaulted by the add-card embed (given its transaction id), then refresh the list. */\n  confirmAddCard(transactionId: string): Promise<void>;\n  refetch(): Promise<void>;\n}\n\nfunction toPaymentMethodsError(err: unknown): ThrottlePaymentMethodsError {\n  if (err instanceof ThrottlePaymentMethodsError) return err;\n  const message = err instanceof Error ? err.message : String(err);\n  return new ThrottlePaymentMethodsError({ code: 'unknown_error', message, statusCode: 0 });\n}\n\nexport function usePaymentMethods(opts: UsePaymentMethodsOpts): UsePaymentMethodsResult {\n  const { clientToken, baseUrl } = opts;\n\n  const client = useMemo(\n    () => createPaymentMethods({ clientToken, baseUrl }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [clientToken, baseUrl],\n  );\n\n  const [cards, setCards] = useState<SavedCard[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<ThrottlePaymentMethodsError | null>(null);\n  const genRef = useRef(0);\n\n  const refetch = useMemo(\n    () => async () => {\n      const myGen = genRef.current;\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      }\n    },\n    [client],\n  );\n\n  useEffect(() => {\n    const myGen = ++genRef.current;\n\n    (async () => {\n      setIsLoading(true);\n      try {\n        const data = await client.list();\n        if (genRef.current !== myGen) return;\n        setCards(data);\n        setError(null);\n      } catch (err) {\n        if (genRef.current !== myGen) return;\n        setError(toPaymentMethodsError(err));\n      } finally {\n        if (genRef.current === myGen) {\n          setIsLoading(false);\n        }\n      }\n    })();\n  }, [client]);\n\n  const setDefault = async (id: string): Promise<void> => {\n    try {\n      await client.setDefault(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const remove = async (id: string): Promise<void> => {\n    try {\n      await client.remove(id);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  const addCard = async (): Promise<EmbedPayload> => {\n    return client.startAddCard();\n  };\n\n  const confirmAddCard = async (transactionId: string): Promise<void> => {\n    try {\n      await client.confirmAddCard(transactionId);\n      await refetch();\n    } catch (err) {\n      const pmErr = toPaymentMethodsError(err);\n      setError(pmErr);\n      throw pmErr;\n    }\n  };\n\n  return { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch };\n}\n","import React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { usePaymentMethods } from './usePaymentMethods';\nimport type { EmbedPayload, SavedCard, PaymentMethodsTheme } from './types';\n\n// Lazy import — keeps @gr4vy/embed-react out of the eager bundle (SSR-safe).\n// Do NOT hoist this to a top-level import; React.lazy is the only safe path.\nconst LazyGr4vyAddCard = React.lazy(() =>\n  import('./Gr4vyAddCard').then((m) => ({ default: m.Gr4vyAddCard })),\n);\n\nexport interface PaymentMethodsProps {\n  clientToken: string;\n  baseUrl?: string;\n  theme?: PaymentMethodsTheme;\n  onChange?: (cards: SavedCard[]) => void;\n}\n\nfunction formatCard(card: SavedCard): string {\n  const brand = card.cardBrand ? card.cardBrand.toUpperCase() : 'Card';\n  const last4 = card.cardLastFour ? `•••• ${card.cardLastFour}` : '••••';\n  const brandPart = `${brand} ${last4}`;\n\n  if (card.cardExpMonth != null && card.cardExpYear != null) {\n    const mm = String(card.cardExpMonth).padStart(2, '0');\n    const yy = String(card.cardExpYear).slice(-2);\n    return `${brandPart} · ${mm}/${yy}`;\n  }\n  return brandPart;\n}\n\n/**\n * Extract a human-readable message from anything thrown/emitted. The Gr4vy embed\n * emits a plain object on `transactionFailed` (e.g. { code, message }), not an\n * Error — `String(obj)` would render \"[object Object]\", so pull `.message`/`.code`.\n */\nexport function toReadableMessage(err: unknown): string {\n  if (err instanceof Error && err.message) return err.message;\n  if (err && typeof err === 'object') {\n    const o = err as Record<string, unknown>;\n    if (typeof o.message === 'string' && o.message) return o.message;\n    if (o.code != null) {\n      return `Your card couldn't be saved (${String(o.code)}). Please double-check the details and try again.`;\n    }\n  }\n  if (typeof err === 'string' && err) return err;\n  return \"Your card couldn't be saved. Please double-check the details and try again.\";\n}\n\nexport function PaymentMethods({ clientToken, baseUrl, theme, onChange }: PaymentMethodsProps) {\n  const { cards, isLoading, error, setDefault, remove, addCard, confirmAddCard, refetch } = usePaymentMethods({\n    clientToken,\n    baseUrl,\n  });\n\n  const [busyId, setBusyId] = useState<string | null>(null);\n  const [addCardPayload, setAddCardPayload] = useState<EmbedPayload | null>(null);\n  const [externalError, setExternalError] = useState<Error | null>(null);\n\n  const onChangeRef = useRef(onChange);\n  useEffect(() => { onChangeRef.current = onChange; });\n  useEffect(() => { if (!isLoading) onChangeRef.current?.(cards); }, [cards, isLoading]);\n\n  const primary = theme?.colorPrimary ?? '#1D56E8';\n  const colorText = theme?.colorText ?? '#111827';\n  const colorBorder = theme?.colorBorder ?? '#E5E7EB';\n  const borderRadius = theme?.borderRadius ?? '8px';\n\n  const handleSetDefault = async (id: string) => {\n    setBusyId(id);\n    try {\n      await setDefault(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleRemove = async (id: string) => {\n    setBusyId(id);\n    try {\n      await remove(id);\n    } catch {\n      // error is already set in the hook\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  const handleAddCard = async () => {\n    try {\n      const payload = await addCard();\n      setExternalError(null);\n      setAddCardPayload(payload);\n    } catch (err) {\n      setExternalError(new Error(toReadableMessage(err)));\n    }\n  };\n\n  if (isLoading) {\n    return (\n      <div role=\"status\" aria-label=\"Loading payment methods\" style={{ color: colorText }}>\n        Loading…\n      </div>\n    );\n  }\n\n  const displayError = externalError ?? error;\n\n  return (\n    <div style={{ color: colorText, fontFamily: 'inherit' }}>\n      {displayError && (\n        <div\n          role=\"alert\"\n          style={{\n            color: '#DC2626',\n            marginBottom: '12px',\n            padding: '8px 12px',\n            border: `1px solid #FCA5A5`,\n            borderRadius,\n            fontSize: '14px',\n          }}\n        >\n          {displayError.message}\n        </div>\n      )}\n\n      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n        {cards.map((card) => {\n          const isBusy = busyId === card.id;\n          return (\n            <li\n              key={card.id}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: '12px',\n                padding: '12px',\n                border: `1px solid ${colorBorder}`,\n                borderRadius,\n                marginBottom: '8px',\n              }}\n            >\n              <span style={{ flex: 1, fontSize: '14px' }}>{formatCard(card)}</span>\n\n              {card.isDefault ? (\n                <span\n                  style={{\n                    backgroundColor: primary,\n                    color: '#fff',\n                    fontSize: '12px',\n                    fontWeight: 600,\n                    padding: '2px 8px',\n                    borderRadius: '999px',\n                  }}\n                >\n                  Default\n                </span>\n              ) : (\n                <>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleSetDefault(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid ${colorBorder}`,\n                      borderRadius,\n                      background: 'transparent',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Make default\n                  </button>\n                  <button\n                    type=\"button\"\n                    disabled={isBusy}\n                    onClick={() => handleRemove(card.id)}\n                    style={{\n                      fontSize: '13px',\n                      padding: '4px 10px',\n                      border: `1px solid #FCA5A5`,\n                      borderRadius,\n                      background: 'transparent',\n                      color: '#DC2626',\n                      cursor: isBusy ? 'not-allowed' : 'pointer',\n                      opacity: isBusy ? 0.5 : 1,\n                    }}\n                  >\n                    Remove\n                  </button>\n                </>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n\n      {addCardPayload ? (\n        <Suspense\n          fallback={\n            <div role=\"status\" style={{ color: colorText, marginTop: '12px' }}>\n              Loading…\n            </div>\n          }\n        >\n          <LazyGr4vyAddCard\n            payload={addCardPayload}\n            theme={theme}\n            onAdded={async ({ transactionId }) => {\n              // Record the vaulted card in Throttle (so it shows in the wallet),\n              // then refresh. confirmAddCard refetches on success.\n              try {\n                if (transactionId) await confirmAddCard(transactionId);\n                else await refetch();\n                setExternalError(null);\n              } catch (e) {\n                setExternalError(new Error(toReadableMessage(e)));\n              } finally {\n                setAddCardPayload(null);\n              }\n            }}\n            onCancel={() => setAddCardPayload(null)}\n            onError={(err) => {\n              // Show the real reason and KEEP the embed open so the buyer can\n              // fix the card and retry without re-opening the form.\n              setExternalError(new Error(toReadableMessage(err)));\n            }}\n          />\n        </Suspense>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={handleAddCard}\n          style={{\n            marginTop: '12px',\n            padding: '8px 16px',\n            backgroundColor: primary,\n            color: '#fff',\n            border: 'none',\n            borderRadius,\n            fontSize: '14px',\n            fontWeight: 600,\n            cursor: 'pointer',\n          }}\n        >\n          + Add card\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["useEffect","useRef","useState","useState","useRef","useEffect"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usethrottle/payment-methods",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Drop-in saved-card wallet (list, add, set default, remove) for Throttle storefronts — headless core + React component.",
   "type": "module",
   "main": "./dist/index.js",

package/dist/Gr4vyAddCard-SIRA5YPK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Gr4vyAddCard.tsx"],"sourcesContent":["/**\n * Gr4vyAddCard — lazy-loaded vault-only embed wrapper.\n *\n * THIS FILE MUST ONLY BE LOADED VIA React.lazy(() => import('./Gr4vyAddCard'))\n * from PaymentMethods.tsx. Never import it at the module top-level of any file\n * that is part of the server bundle — @gr4vy/embed-react touches `window` at\n * module evaluation time and will throw `ReferenceError: window is not defined`\n * in SSR contexts.\n */\nimport React, { useRef, useState, useEffect } from 'react';\nimport Gr4vyEmbedImport, { type EmbedInstance } from '@gr4vy/embed-react';\nimport type { EmbedPayload, PaymentMethodsTheme } from './types';\n\n/**\n * `@gr4vy/embed-react` is a CommonJS package (no `module`/`exports`/`type`\n * fields), so a consumer's bundler resolves `import Gr4vy from '@gr4vy/embed-react'`\n * differently depending on its CJS↔ESM interop: some hand back the component\n * directly, others hand back the module namespace `{ default: <component> }`.\n * Rendering the namespace object throws \"Element type is invalid … got: object\".\n * Unwrap `.default` until we reach an actual React element type (a function\n * component, or a forwardRef/memo object carrying `$$typeof`).\n */\nexport function resolveComponent(mod: unknown): React.ComponentType<Record<string, unknown>> {\n  let x: any = mod;\n  while (x && typeof x === 'object' && !x.$$typeof && x.default) x = x.default;\n  return x as React.ComponentType<Record<string, unknown>>;\n}\nconst Gr4vyEmbed = resolveComponent(Gr4vyEmbedImport);\n\ninterface Gr4vyTransaction {\n  id: string;\n  status: string;\n  paymentMethod?: { id?: string };\n}\n\nexport interface Gr4vyAddCardProps {\n  payload: EmbedPayload;\n  theme?: PaymentMethodsTheme;\n  onAdded: (paymentMethodId?: string) => void;\n  onCancel: () => void;\n  onError: (err: unknown) => void;\n}\n\nexport function Gr4vyAddCard({ payload, theme, onAdded, onCancel, onError }: Gr4vyAddCardProps) {\n  const embedRef = useRef<EmbedInstance>(null);\n  // The Gr4vy embed loads its secure fields asynchronously (and is sometimes\n  // slow). Don't let the buyer click \"Save card\" until the form is ready, or\n  // the submit goes out with no card data and Gr4vy returns \"Request failed\n  // validation\". `optionsLoaded` is the embed's \"form is ready\" signal.\n  const [formReady, setFormReady] = useState(false);\n\n  useEffect(() => {\n    if (formReady) return;\n    const t = setTimeout(() => {\n      if (!formReady) {\n        onError(\n          new Error(\n            \"The card form is taking longer than usual to load. Please close this and tap “Add card” again.\",\n          ),\n        );\n      }\n    }, 20000);\n    return () => clearTimeout(t);\n  }, [formReady, onError]);\n\n  const colors = theme\n    ? {\n        ...(theme.colorPrimary !== undefined ? { primary: theme.colorPrimary } : {}),\n        ...(theme.colorText !== undefined ? { text: theme.colorText } : {}),\n        ...(theme.colorBorder !== undefined ? { inputBorder: theme.colorBorder } : {}),\n      }\n    : {};\n  const gr4vyTheme = Object.keys(colors).length ? { colors } : undefined;\n\n  return (\n    <div>\n      <Gr4vyEmbed\n        ref={embedRef}\n        gr4vyId={payload.gr4vyId}\n        environment={payload.environment}\n        token={payload.embedToken}\n        amount={payload.amount}\n        currency={payload.currency}\n        country={payload.country ?? 'US'}\n        merchantAccountId={payload.merchantAccountId}\n        intent=\"capture\"\n        paymentSource=\"recurring\"\n        store={true}\n        display=\"addOnly\"\n        {...(payload.buyerExternalIdentifier\n          ? { buyerExternalIdentifier: payload.buyerExternalIdentifier }\n          : {})}\n        {...(gr4vyTheme !== undefined ? { theme: gr4vyTheme } : {})}\n        onComplete={(txn: Gr4vyTransaction) => {\n          onAdded(txn.paymentMethod?.id);\n        }}\n        onEvent={(eventName: string, data: unknown) => {\n          // The form's fields are loaded and interactive.\n          if (eventName === 'optionsLoaded' || eventName === 'formUpdate') {\n            setFormReady(true);\n          }\n          if (eventName === 'transactionFailed') {\n            onError(data);\n          }\n        }}\n      />\n\n      <button\n        type=\"button\"\n        disabled={!formReady}\n        onClick={() => {\n          if (!formReady) return;\n          embedRef.current?.submit();\n        }}\n        style={{\n          marginTop: '12px',\n          padding: '8px 16px',\n          backgroundColor: formReady ? theme?.colorPrimary ?? '#1D56E8' : '#9CA3AF',\n          color: '#fff',\n          border: 'none',\n          borderRadius: '8px',\n          fontSize: '14px',\n          fontWeight: 600,\n          cursor: formReady ? 'pointer' : 'not-allowed',\n          width: '100%',\n        }}\n      >\n        {formReady ? 'Save card' : 'Loading card form…'}\n      </button>\n\n      <button\n        type=\"button\"\n        onClick={onCancel}\n        style={{\n          marginTop: '8px',\n          padding: '8px 16px',\n          backgroundColor: 'transparent',\n          color: theme?.colorText ?? '#111827',\n          border: `1px solid ${theme?.colorBorder ?? '#E5E7EB'}`,\n          borderRadius: '8px',\n          fontSize: '14px',\n          cursor: 'pointer',\n          width: '100%',\n        }}\n      >\n        Cancel\n      </button>\n    </div>\n  );\n}\n\nexport default Gr4vyAddCard;\n"],"mappings":"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","names":[]}