@vtex/faststore 0.0.10 → 0.0.12

package/dist/matter/payment/payment-card-capture.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-card-capture.js","names":[],"sources":["../../../src/matter/payment/payment-card-capture.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport type { PaymentGatewayTransaction } from '../../sdk/payment/gateway.js';\nimport { PAYMENT_NETWORK_ERROR_CODE, type PaymentUserError } from '../../sdk/payment/operations.js';\nimport { type PaymentSubmission, usePaymentSubmission } from '../../sdk/payment/submission-registry.js';\nimport {\n  type CapturedCard,\n  type CardCapture,\n  CardCaptureContext,\n  type CardCaptureContextValue,\n  type CardCaptureMissingMethodExplainer,\n  type CardCapturePreflight,\n  type CardCaptureResult,\n} from '../card-entry/card-capture.js';\nimport { resolveCardholderDocument } from './cardholder-document-rule.js';\nimport { isCardMethod, type PaymentMethodSelection } from './use-payment-method-selection.js';\n\n/**\n * The checkout's `card-capture` provider (specs/sfs-3457-card-entry-card-capture-context.md),\n * rendered by both payment roots inside their `PaymentSubmissionProvider`. It hands `CardEntry` the\n * scoped methods and the selection facts, registers its capture as the `new-card` submission, folds\n * the draft's non-sensitive values into the card, and sends it through `sendPayments`. It also owns\n * `add_payment_info`, which needs the cart total `CardEntry` no longer reads.\n */\n\nexport type PaymentCartData = {\n  total?: { amount: number; currencyCode: string } | null;\n} | null;\n\n/** The `add_payment_info` payment type for a card group; `undefined` for any other group (T140). */\nfunction paymentTypeOf(groupName: string | undefined): 'Credit Card' | 'Debit Card' | undefined {\n  if (groupName === 'creditCardPaymentGroup') return 'Credit Card';\n  if (groupName === 'debitCardPaymentGroup') return 'Debit Card';\n  return undefined;\n}\n\n/** Mirrors `usePaymentActions`' own infrastructure-failure code for the same underlying meaning. */\nconst MISSING_GATEWAY_ACTION_ERROR: PaymentUserError = {\n  code: PAYMENT_NETWORK_ERROR_CODE,\n  message: 'Unable to complete the request. Please try again.',\n};\n\ntype LatestCaptureFacts = Readonly<{ selection: PaymentMethodSelection; $actions: ComponentActions | undefined }>;\n\n/**\n * Folds the draft's non-sensitive values into the captured card and sends it through `sendPayments`.\n * `facts` is `latest.current` read at submission time, never a value a closure captured earlier.\n */\nasync function sendNewCard(\n  { selection, $actions }: LatestCaptureFacts,\n  transaction: PaymentGatewayTransaction,\n  card: CapturedCard,\n): Promise<CardCaptureResult> {\n  const sendPayments = $actions?.payment?.sendPayments;\n  if (!sendPayments) {\n    console.error('[CardEntry] the payment action namespace is not injected');\n    // Nothing was sent: no action to send it with (T112).\n    return { reachedGateway: false, userErrors: [MISSING_GATEWAY_ACTION_ERROR] };\n  }\n  const { draft, allMethods, persistedMethodId, countryDocumentType } = selection;\n  // T42 (Decision 4): the draft document is posted only while the rule applies — the same unscoped\n  // persisted method the submit gate reads, under the store's country — never a stale value.\n  const documentRule = resolveCardholderDocument({\n    method: allMethods.find((method) => method.id === persistedMethodId) ?? null,\n    countryDocumentType,\n  });\n  return sendPayments({\n    transaction,\n    card: {\n      kind: 'new',\n      ...card,\n      document: documentRule ? (draft.document ?? undefined) : undefined,\n      cardLabel: draft.cardLabel ?? undefined,\n      saveCard: draft.saveCard ?? undefined,\n    },\n  });\n}\n\ntype PaymentCardCaptureProviderProps = Readonly<{\n  selection: PaymentMethodSelection;\n  cart: PaymentCartData | undefined;\n  $actions: ComponentActions | undefined;\n  children: ReactNode;\n}>;\n\nexport function PaymentCardCaptureProvider({ selection, cart, $actions, children }: PaymentCardCaptureProviderProps) {\n  const { register } = usePaymentSubmission();\n  // Read at submission and analytics time, never captured by a closure: the place-order sequence must\n  // fold the draft as it stands then, and a keystroke must not re-render the section.\n  const latest = useRef({ selection, $actions });\n  useLayoutEffect(() => {\n    latest.current = { selection, $actions };\n  });\n\n  const total = cart?.total ?? null;\n  const totalRef = useRef(total);\n  const activeCaptures = useRef(0);\n  const analyticsDispatched = useRef(false);\n\n  // `add_payment_info` (T2), once per root, when a card capture is mounted and the cart total has\n  // resolved. T140, Decision 5: `paymentType` comes from whatever is selected when it fires, and the key\n  // is absent otherwise; a later selection never re-fires it.\n  const dispatchAddPaymentInfo = useCallback(() => {\n    const currentTotal = totalRef.current;\n    if (analyticsDispatched.current || activeCaptures.current === 0 || !currentTotal) return;\n    const track = latest.current.$actions?.analytics?.track;\n    if (!track) return;\n    const { methods, selectedMethodId } = latest.current.selection;\n    const paymentType = paymentTypeOf(methods.find((method) => method.id === selectedMethodId)?.groupName);\n    track({\n      name: 'add_payment_info',\n      value: { amount: currentTotal.amount, currencyCode: currentTotal.currencyCode },\n      // The key itself must be absent when nothing resolves to a known card kind — never a present\n      // key holding `undefined` (toEcommercePayload's own doc comment carries the rest of this rule).\n      ...(paymentType ? { paymentType } : {}),\n    });\n    analyticsDispatched.current = true;\n  }, []);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `$actions` re-runs the dispatch when the analytics namespace arrives after the total; the dispatch reads it through `latest`.\n  useEffect(() => {\n    totalRef.current = total;\n    dispatchAddPaymentInfo();\n  }, [total, $actions, dispatchAddPaymentInfo]);\n\n  const registerCapture = useCallback(\n    (\n      capture: CardCapture,\n      preflight: CardCapturePreflight,\n      explainMissingMethod?: CardCaptureMissingMethodExplainer,\n    ) => {\n      const submit: PaymentSubmission = (transaction) =>\n        capture((card) => sendNewCard(latest.current, transaction, card));\n      const unregister = register('new-card', submit, preflight, explainMissingMethod);\n      activeCaptures.current += 1;\n      dispatchAddPaymentInfo();\n      return () => {\n        activeCaptures.current -= 1;\n        unregister();\n      };\n    },\n    [register, dispatchAddPaymentInfo],\n  );\n\n  const {\n    methods,\n    placing,\n    attempt,\n    selectMethod,\n    selectNewCard,\n    setDraftBin,\n    draft,\n    cardPaymentCollapsed,\n    cardModeActive,\n    selectedMethodId,\n    selectionOutOfScope,\n    selectedMethod,\n  } = selection;\n  // T202: `sent` and `unresolved` are the two phases in which `placeOrder` only resumes (the callback leg), so\n  // a card typed there would never be submitted and never cleared. The form takes no input until the attempt\n  // is freed. Read from the attempt on every render; nothing here writes it.\n  const locked = attempt?.phase === 'sent' || attempt?.phase === 'unresolved';\n  // T191 (FR-13, Decision 8): classified with the engine's own `isCardMethod`, so the card form's\n  // refusal and the collapse can never disagree about a method.\n  const selectionNonCard = selectedMethod !== null && !isCardMethod(selectedMethod);\n\n  const value = useMemo<CardCaptureContextValue>(\n    () => ({\n      networks: methods,\n      busy: placing || locked,\n      // T202: the card POST has settled by any route once `send` returns, so nothing the form holds is needed\n      // again (a refusal raised before `send` never reaches the clear).\n      clearOn: 'any-outcome',\n      registerCapture,\n      selection: {\n        selectMethod,\n        selectNewCard,\n        setDraftBin,\n        path: draft.path,\n        bin: draft.bin,\n        collapsed: cardPaymentCollapsed,\n        cardModeActive,\n        selectedMethodId,\n        selectionOutOfScope,\n        selectionNonCard,\n      },\n    }),\n    [\n      methods,\n      placing,\n      locked,\n      registerCapture,\n      selectMethod,\n      selectNewCard,\n      setDraftBin,\n      draft.path,\n      draft.bin,\n      cardPaymentCollapsed,\n      cardModeActive,\n      selectedMethodId,\n      selectionOutOfScope,\n      selectionNonCard,\n    ],\n  );\n\n  return <CardCaptureContext value={value}>{children}</CardCaptureContext>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"payment-card-capture.js","names":[],"sources":["../../../src/matter/payment/payment-card-capture.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport type { PaymentType } from '../../sdk/generated/graphql.js';\nimport { lastFourOf, rememberConfirmationLastFour } from '../../sdk/payment/confirmation-last-four.js';\nimport type { PaymentGatewayTransaction } from '../../sdk/payment/gateway.js';\nimport { PAYMENT_NETWORK_ERROR_CODE, type PaymentUserError } from '../../sdk/payment/operations.js';\nimport { type PaymentSubmission, usePaymentSubmission } from '../../sdk/payment/submission-registry.js';\nimport {\n  type CapturedCard,\n  type CardCapture,\n  CardCaptureContext,\n  type CardCaptureContextValue,\n  type CardCaptureMissingMethodExplainer,\n  type CardCapturePreflight,\n  type CardCaptureResult,\n} from '../card-entry/card-capture.js';\nimport { resolveCardholderDocument } from './cardholder-document-rule.js';\nimport { isCardMethod, type PaymentMethodSelection } from './use-payment-method-selection.js';\n\n/**\n * The checkout's `card-capture` provider (specs/sfs-3457-card-entry-card-capture-context.md),\n * rendered by both payment roots inside their `PaymentSubmissionProvider`. It hands `CardEntry` the\n * scoped methods and the selection facts, registers its capture as the `new-card` submission, folds\n * the draft's non-sensitive values into the card, and sends it through `sendPayments`. It also owns\n * `add_payment_info`, which needs the cart total `CardEntry` no longer reads.\n */\n\nexport type PaymentCartData = {\n  total?: { amount: number; currencyCode: string } | null;\n} | null;\n\n/** The `add_payment_info` payment type for a card kind; `undefined` for any other kind (T140; read off `type` since T230). */\nfunction paymentTypeOf(type: PaymentType | undefined): 'Credit Card' | 'Debit Card' | undefined {\n  if (type === 'CREDIT_CARD') return 'Credit Card';\n  if (type === 'DEBIT_CARD') return 'Debit Card';\n  return undefined;\n}\n\n/** Mirrors `usePaymentActions`' own infrastructure-failure code. Its `message` is diagnostic; `PlaceOrder` words the code. */\nconst MISSING_GATEWAY_ACTION_ERROR: PaymentUserError = {\n  code: PAYMENT_NETWORK_ERROR_CODE,\n  message: 'Unable to complete the request. Please try again.',\n};\n\ntype LatestCaptureFacts = Readonly<{ selection: PaymentMethodSelection; $actions: ComponentActions | undefined }>;\n\n/**\n * Folds the draft's non-sensitive values into the captured card and sends it through `sendPayments`.\n * `facts` is `latest.current` read at submission time, never a value a closure captured earlier.\n */\nasync function sendNewCard(\n  { selection, $actions }: LatestCaptureFacts,\n  transaction: PaymentGatewayTransaction,\n  card: CapturedCard,\n): Promise<CardCaptureResult> {\n  const sendPayments = $actions?.payment?.sendPayments;\n  if (!sendPayments) {\n    console.error('[CardEntry] the payment action namespace is not injected');\n    // Nothing was sent: no action to send it with (T112).\n    return { reachedGateway: false, userErrors: [MISSING_GATEWAY_ACTION_ERROR] };\n  }\n  const { draft, allMethods, persistedMethodId, countryDocumentType } = selection;\n  // T42 (Decision 4): the draft document is posted only while the rule applies — the same unscoped\n  // persisted method the submit gate reads, under the store's country — never a stale value.\n  const documentRule = resolveCardholderDocument({\n    method: allMethods.find((method) => method.id === persistedMethodId) ?? null,\n    countryDocumentType,\n  });\n  const lastFour = lastFourOf(card.number);\n  const result = await sendPayments({\n    transaction,\n    card: {\n      kind: 'new',\n      ...card,\n      document: documentRule ? (draft.document ?? undefined) : undefined,\n      cardLabel: draft.cardLabel ?? undefined,\n      saveCard: draft.saveCard ?? undefined,\n    },\n  });\n  if (lastFour && result.userErrors.length === 0) rememberConfirmationLastFour(transaction.orderGroup, lastFour);\n  return result;\n}\n\ntype PaymentCardCaptureProviderProps = Readonly<{\n  selection: PaymentMethodSelection;\n  cart: PaymentCartData | undefined;\n  $actions: ComponentActions | undefined;\n  children: ReactNode;\n}>;\n\nexport function PaymentCardCaptureProvider({ selection, cart, $actions, children }: PaymentCardCaptureProviderProps) {\n  const { register } = usePaymentSubmission();\n  // Read at submission and analytics time, never captured by a closure: the place-order sequence must\n  // fold the draft as it stands then, and a keystroke must not re-render the section.\n  const latest = useRef({ selection, $actions });\n  useLayoutEffect(() => {\n    latest.current = { selection, $actions };\n  });\n\n  const total = cart?.total ?? null;\n  const totalRef = useRef(total);\n  const activeCaptures = useRef(0);\n  const analyticsDispatched = useRef(false);\n\n  // `add_payment_info` (T2), once per root, when a card capture is mounted and the cart total has\n  // resolved. T140, Decision 5: `paymentType` comes from whatever is selected when it fires, and the key\n  // is absent otherwise; a later selection never re-fires it.\n  const dispatchAddPaymentInfo = useCallback(() => {\n    const currentTotal = totalRef.current;\n    if (analyticsDispatched.current || activeCaptures.current === 0 || !currentTotal) return;\n    const track = latest.current.$actions?.analytics?.track;\n    if (!track) return;\n    const { methods, selectedMethodId } = latest.current.selection;\n    const paymentType = paymentTypeOf(methods.find((method) => method.id === selectedMethodId)?.type);\n    track({\n      name: 'add_payment_info',\n      value: { amount: currentTotal.amount, currencyCode: currentTotal.currencyCode },\n      // The key itself must be absent when nothing resolves to a known card kind — never a present\n      // key holding `undefined` (toEcommercePayload's own doc comment carries the rest of this rule).\n      ...(paymentType ? { paymentType } : {}),\n    });\n    analyticsDispatched.current = true;\n  }, []);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `$actions` re-runs the dispatch when the analytics namespace arrives after the total; the dispatch reads it through `latest`.\n  useEffect(() => {\n    totalRef.current = total;\n    dispatchAddPaymentInfo();\n  }, [total, $actions, dispatchAddPaymentInfo]);\n\n  const registerCapture = useCallback(\n    (\n      capture: CardCapture,\n      preflight: CardCapturePreflight,\n      explainMissingMethod?: CardCaptureMissingMethodExplainer,\n    ) => {\n      const submit: PaymentSubmission = (transaction) =>\n        capture((card) => sendNewCard(latest.current, transaction, card));\n      const unregister = register('new-card', submit, preflight, explainMissingMethod);\n      activeCaptures.current += 1;\n      return () => {\n        activeCaptures.current -= 1;\n        unregister();\n      };\n    },\n    [register],\n  );\n\n  const {\n    methods,\n    placing,\n    attempt,\n    selectMethod,\n    selectNewCard,\n    setDraftBin,\n    setDraftEntryValid,\n    draft,\n    cardPaymentCollapsed,\n    cardModeActive,\n    selectedMethodId,\n    selectionOutOfScope,\n    selectedMethod,\n  } = selection;\n  // T202: `sent` and `unresolved` are the two phases in which `placeOrder` only resumes (the callback leg), so\n  // a card typed there would never be submitted and never cleared. The form takes no input until the attempt\n  // is freed. Read from the attempt on every render; nothing here writes it.\n  const locked = attempt?.phase === 'sent' || attempt?.phase === 'unresolved';\n  // T191 (FR-13, Decision 8): classified with the engine's own `isCardMethod`, so the card form's\n  // refusal and the collapse can never disagree about a method.\n  const selectionNonCard = selectedMethod !== null && !isCardMethod(selectedMethod);\n\n  const value = useMemo<CardCaptureContextValue>(\n    () => ({\n      networks: methods,\n      busy: placing || locked,\n      // T202: the card POST has settled by any route once `send` returns, so nothing the form holds is needed\n      // again (a refusal raised before `send` never reaches the clear).\n      clearOn: 'any-outcome',\n      registerCapture,\n      onCaptureMounted: dispatchAddPaymentInfo,\n      selection: {\n        selectMethod,\n        selectNewCard,\n        setDraftBin,\n        setDraftEntryValid,\n        path: draft.path,\n        bin: draft.bin,\n        collapsed: cardPaymentCollapsed,\n        cardModeActive,\n        selectedMethodId,\n        selectionOutOfScope,\n        selectionNonCard,\n      },\n    }),\n    [\n      methods,\n      placing,\n      locked,\n      registerCapture,\n      dispatchAddPaymentInfo,\n      selectMethod,\n      selectNewCard,\n      setDraftBin,\n      setDraftEntryValid,\n      draft.path,\n      draft.bin,\n      cardPaymentCollapsed,\n      cardModeActive,\n      selectedMethodId,\n      selectionOutOfScope,\n      selectionNonCard,\n    ],\n  );\n\n  return <CardCaptureContext value={value}>{children}</CardCaptureContext>;\n}\n"],"mappings":"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"}

package/dist/matter/payment/payment-controller.d.ts

@@ -11,7 +11,9 @@ export type PaymentSectionControllerProps = {
    * scopes to exactly that one group. An empty string scopes nothing.
    */
   group?: string | readonly string[];
-  /** Keyed `{ payment, cart }` forwarded by the reactive runtime (arity-2 fragment, ADR-0015). */
+  /** The order of the method list by `PaymentMethod.groupName`; only orders, never hides. See `PaymentSectionRootProps`. */
+  groupOrder?: string | readonly string[];
+  /** Keyed `{ payment, cart, clientProfile }` forwarded by the reactive runtime (arity-3 fragment, ADR-0015). */
   $data?: PaymentSectionRootData;
   /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */
   $actions?: ComponentActions;
@@ -19,6 +21,6 @@ export type PaymentSectionControllerProps = {
   children?: ReactNode;
 };
 export declare const PaymentSectionControllerDefinition: ComponentDefinition<PaymentSectionControllerProps>;
-export declare function PaymentSectionController({ group, $data: $dataProp, $actions: $actionsProp, children }: Readonly<PaymentSectionControllerProps>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export declare function PaymentSectionController({ group, groupOrder, $data: $dataProp, $actions: $actionsProp, children }: Readonly<PaymentSectionControllerProps>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 //#endregion
 //# sourceMappingURL=payment-controller.d.ts.map

package/dist/matter/payment/payment-controller.js

@@ -22,6 +22,7 @@ const PaymentSectionControllerDefinition = defineComponent({
         __typename
         id
         name
+        type
         groupName
         validator {
           __typename
@@ -61,6 +62,13 @@ const PaymentSectionControllerDefinition = defineComponent({
         currencyCode
       }
     }
+    clientProfile {
+      __typename
+      id
+      firstName
+      lastName
+      phone
+    }
   }
 `,
 	fetchStrategy: "reactive",
@@ -74,28 +82,41 @@ const PaymentSectionControllerDefinition = defineComponent({
 		label: "Payment Section Controller",
 		category: "commerce"
 	},
-	schema: { group: {
-		type: "array",
-		default: ["creditCardPaymentGroup", "debitCardPaymentGroup"],
-		label: "Payment method group"
-	} },
-	guideline: "State-only controller for a collapsed payment section: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled. Renders no markup and bakes no styling — compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, put a static label (Text) inside the trigger — no component echoes the current choice there, and put PaymentMethodList plus the payment leaves (CardEntry, Installments, SavedCards, PlaceOrder, …) inside the popup. Provides the same 'payment' and 'card-capture' contexts as PaymentSectionRoot, so every leaf composes under either with no change. Unlike the delivery-options controller it does NOT close on a successful selection — picking a method is mid-flow — so close it from a DrawerClose/DialogClose particle or from the leaf that finishes the flow. See payment.md.",
+	schema: {
+		group: {
+			type: "array",
+			default: ["creditCardPaymentGroup", "debitCardPaymentGroup"],
+			label: "Payment method group"
+		},
+		groupOrder: {
+			type: "array",
+			label: "Payment method group order"
+		}
+	},
+	guideline: "State-only controller for a collapsed payment section: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled. Renders no markup and bakes no styling — compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, put a static label (Text) inside the trigger — no component echoes the current choice there, and put PaymentMethodList plus the payment leaves (CardEntry, Installments, SavedCards, PlaceOrder, …) inside the popup. Provides the same 'payment' and 'card-capture' contexts as PaymentSectionRoot, so every leaf composes under either with no change. groupOrder only orders the popup's PaymentMethodList — a list of the store's payment group names, copied from its own data, that puts each option at its group's position; it never hides or adds an option, and a group it leaves out still shows after the named ones. Unlike the delivery-options controller it does NOT close on a successful selection — picking a method is mid-flow — so close it from a DrawerClose/DialogClose particle or from the leaf that finishes the flow. See payment.md.",
 	docPath: "./payment.md"
 });
-function PaymentSectionController({ group = DEFAULT_METHOD_GROUP, $data: $dataProp, $actions: $actionsProp, children }) {
+function PaymentSectionController({ group = DEFAULT_METHOD_GROUP, groupOrder, $data: $dataProp, $actions: $actionsProp, children }) {
 	const $data = useDataOverride($dataProp);
 	const $actions = useActionsOverride($actionsProp);
 	const selection = usePaymentMethodSelection({
 		group,
+		groupOrder,
 		$data: $data?.payment ?? null,
 		$actions
 	});
 	const [open, setOpen] = useState(false);
+	const clientProfile = $data?.clientProfile;
 	const payment = useMemo(() => ({
 		...selection,
 		open,
-		setOpen
-	}), [selection, open]);
+		setOpen,
+		clientProfile
+	}), [
+		selection,
+		open,
+		clientProfile
+	]);
 	if (!isValidElement(children)) return children;
 	return /* @__PURE__ */ jsx(PaymentContext, {
 		value: payment,

package/dist/matter/payment/payment-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-controller.js","names":[],"sources":["../../../src/matter/payment/payment-controller.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { cloneElement, isValidElement, type ReactNode, useMemo, useState } from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { PaymentSubmissionProvider } from '../../sdk/payment/submission-registry.js';\nimport {\n  DEFAULT_METHOD_GROUP,\n  PaymentContext,\n  type PaymentContextValue,\n  type PaymentSectionRootData,\n} from './payment.js';\nimport { PaymentCardCaptureProvider } from './payment-card-capture.js';\nimport { usePaymentMethodSelection } from './use-payment-method-selection.js';\n\n/**\n * The collapsed payment section (centered modal / slide-in panel) as a state-only controller\n * (specs/payment-section-root.md, T5; docs/features/credit-card/rfc.md § D1). The page composes a raw\n * `DialogRoot` or `DrawerRoot` and each of its particles (`DialogTrigger` / `DialogBackdrop` /\n * `DialogPopup` …) directly as `page.json` nodes, so every part — including the portaled backdrop and\n * popup a descendant selector could not reach — is a swatch-addressable node with zero Tailwind baked\n * into the package, exactly as `DeliveryOptionsController` established.\n *\n * `PaymentSectionController` renders no markup: it runs the shared `usePaymentMethodSelection` engine,\n * holds the open state, provides the same `payment` context `PaymentSectionRoot` does (ADR-0009 matches\n * by contract identifier, so every leaf composes under either with no edit), then injects\n * `open` / `onOpenChange` into its single overlay-`Root` child via `cloneElement` — the same mechanism\n * as `CartOpenOnAdd` and `ShippingAddressSavedAddressDrawerController`.\n *\n * It diverges from `DeliveryOptionsController` in one deliberate way: a successful method selection\n * does **not** close the surface. Picking a delivery option completes that interaction; picking a\n * payment method is the first step of several — the shopper still types a card, picks an installment,\n * and places the order. Closing is therefore the composition's call, through the context's `setOpen`\n * (T14 on a placed order) or a `DrawerClose` / `DialogClose` particle.\n *\n * The trigger holds a static label (`Text`): no component echoes the current choice there, and none is\n * shipped here — `payment.md` documents the same composition.\n */\n\n// Repeats `PaymentSectionData`'s selection set verbatim under its own name. Two definitions cannot\n// share one fragment name in a page query, and the native catalog builder resolves\n// `defineComponent({ fragment })` statically — a value imported from another module is silently\n// dropped from the built catalog. `delivery-options` duplicates for the same reason;\n// `payment.test.tsx` asserts the two sets stay field-for-field identical.\nconst fragment = /* GraphQL */ `\n  fragment PaymentSectionControllerData on Query {\n    payment {\n      __typename\n      id\n      methods {\n        __typename\n        id\n        name\n        groupName\n        validator {\n          __typename\n          numberMask\n          numberRegex\n          cvvMask\n          cvvRegex\n          cvvRequired\n          expirationRequired\n          holderNameRequired\n          billingAddressRequired\n          documentDisplayable\n          documentRequired\n        }\n      }\n      selectedMethodId\n      selectedAccountId\n      selectedBin\n      storeCountryCode\n      countries {\n        __typename\n        countryCode\n        documents {\n          __typename\n          type\n          displayable\n          required\n        }\n      }\n    }\n    cart {\n      __typename\n      id\n      total {\n        __typename\n        amount\n        currencyCode\n      }\n    }\n  }\n`;\n\n// The minimal open-state shape the controller injects into its overlay-Root child; both `DialogRoot`\n// and `DrawerRoot` accept it.\ntype OverlayOpenProps = {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type PaymentSectionControllerProps = {\n  /**\n   * Scopes the method list to a **set** of `PaymentMethod.groupName` values — a method is in scope\n   * when its `groupName` is a member (T140, FR-1, Decision 1). A single string is still accepted and\n   * scopes to exactly that one group. An empty string scopes nothing.\n   */\n  group?: string | readonly string[];\n  /** Keyed `{ payment, cart }` forwarded by the reactive runtime (arity-2 fragment, ADR-0015). */\n  $data?: PaymentSectionRootData;\n  /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */\n  $actions?: ComponentActions;\n  /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PaymentSectionControllerDefinition = defineComponent<PaymentSectionControllerProps>({\n  name: 'PaymentSectionController',\n  importPath: '@vtex/faststore/components',\n  component: PaymentSectionController,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { payment: ['setMethod', 'sendPayments'], analytics: ['track'] },\n  providesContext: ['payment', 'card-capture'],\n  hardened: true,\n  editor: { label: 'Payment Section Controller', category: 'commerce' },\n  schema: {\n    // Literal, not `DEFAULT_METHOD_GROUP` — see the same note on `PaymentSectionRootDefinition`.\n    // T140, Decision 2/OQ-6: same widened shape as `PaymentSectionRootDefinition` — see its own note.\n    group: {\n      type: 'array',\n      default: ['creditCardPaymentGroup', 'debitCardPaymentGroup'],\n      label: 'Payment method group',\n    },\n  },\n  guideline:\n    \"State-only controller for a collapsed payment section: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled. Renders no markup and bakes no styling — compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, put a static label (Text) inside the trigger — no component echoes the current choice there, and put PaymentMethodList plus the payment leaves (CardEntry, Installments, SavedCards, PlaceOrder, …) inside the popup. Provides the same 'payment' and 'card-capture' contexts as PaymentSectionRoot, so every leaf composes under either with no change. Unlike the delivery-options controller it does NOT close on a successful selection — picking a method is mid-flow — so close it from a DrawerClose/DialogClose particle or from the leaf that finishes the flow. See payment.md.\",\n  // The convention-based `<file-stem>.md` (`payment-controller.md`) does not exist — this component's\n  // doc is `payment.md`, shared with PaymentSectionRoot/PaymentMethodList (T25/FR-8).\n  docPath: './payment.md',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function PaymentSectionController({\n  group = DEFAULT_METHOD_GROUP,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  children,\n}: Readonly<PaymentSectionControllerProps>) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const selection = usePaymentMethodSelection({ group, $data: $data?.payment ?? null, $actions });\n  const [open, setOpen] = useState(false);\n  const payment = useMemo<PaymentContextValue>(() => ({ ...selection, open, setOpen }), [selection, open]);\n\n  if (!isValidElement<OverlayOpenProps>(children)) {\n    return children;\n  }\n\n  return (\n    <PaymentContext value={payment}>\n      <PaymentSubmissionProvider path={selection.draft.path}>\n        <PaymentCardCaptureProvider selection={selection} cart={$data?.cart} $actions={$actions}>\n          {cloneElement(children, { open, onOpenChange: setOpen })}\n        </PaymentCardCaptureProvider>\n      </PaymentSubmissionProvider>\n    </PaymentContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA+HA,MAAa,qCAAqC,gBAA+C;CAC/F,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACA,eAAe;CACf,SAAS;EAAE,SAAS,CAAC,aAAa,cAAc;EAAG,WAAW,CAAC,OAAO;CAAE;CACxE,iBAAiB,CAAC,WAAW,cAAc;CAC3C,UAAU;CACV,QAAQ;EAAE,OAAO;EAA8B,UAAU;CAAW;CACpE,QAAQ,EAGN,OAAO;EACL,MAAM;EACN,SAAS,CAAC,0BAA0B,uBAAuB;EAC3D,OAAO;CACT,EACF;CACA,WACE;CAGF,SAAS;AACX,CAAC;AAMD,SAAgB,yBAAyB,EACvC,QAAQ,sBACR,OAAO,WACP,UAAU,cACV,YAC0C;CAC1C,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,YAAY,0BAA0B;EAAE;EAAO,OAAO,OAAO,WAAW;EAAM;CAAS,CAAC;CAC9F,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,eAAoC;EAAE,GAAG;EAAW;EAAM;CAAQ,IAAI,CAAC,WAAW,IAAI,CAAC;CAEvG,IAAI,CAAC,eAAiC,QAAQ,GAC5C,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,OAAO;EACrB,UAAA,oBAAC,2BAAD;GAA2B,MAAM,UAAU,MAAM;GAC/C,UAAA,oBAAC,4BAAD;IAAuC;IAAW,MAAM,OAAO;IAAgB;IAC5E,UAAA,aAAa,UAAU;KAAE;KAAM,cAAc;IAAQ,CAAC;GAC7B,CAAA;EACH,CAAA;CACb,CAAA;AAEpB"}
+{"version":3,"file":"payment-controller.js","names":[],"sources":["../../../src/matter/payment/payment-controller.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { cloneElement, isValidElement, type ReactNode, useMemo, useState } from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { PaymentSubmissionProvider } from '../../sdk/payment/submission-registry.js';\nimport {\n  DEFAULT_METHOD_GROUP,\n  PaymentContext,\n  type PaymentContextValue,\n  type PaymentSectionRootData,\n} from './payment.js';\nimport { PaymentCardCaptureProvider } from './payment-card-capture.js';\nimport { usePaymentMethodSelection } from './use-payment-method-selection.js';\n\n/**\n * The collapsed payment section (centered modal / slide-in panel) as a state-only controller\n * (specs/payment-section-root.md, T5; docs/features/credit-card/rfc.md § D1). The page composes a raw\n * `DialogRoot` or `DrawerRoot` and each of its particles (`DialogTrigger` / `DialogBackdrop` /\n * `DialogPopup` …) directly as `page.json` nodes, so every part — including the portaled backdrop and\n * popup a descendant selector could not reach — is a swatch-addressable node with zero Tailwind baked\n * into the package, exactly as `DeliveryOptionsController` established.\n *\n * `PaymentSectionController` renders no markup: it runs the shared `usePaymentMethodSelection` engine,\n * holds the open state, provides the same `payment` context `PaymentSectionRoot` does (ADR-0009 matches\n * by contract identifier, so every leaf composes under either with no edit), then injects\n * `open` / `onOpenChange` into its single overlay-`Root` child via `cloneElement` — the same mechanism\n * as `CartOpenOnAdd` and `ShippingAddressSavedAddressDrawerController`.\n *\n * It diverges from `DeliveryOptionsController` in one deliberate way: a successful method selection\n * does **not** close the surface. Picking a delivery option completes that interaction; picking a\n * payment method is the first step of several — the shopper still types a card, picks an installment,\n * and places the order. Closing is therefore the composition's call, through the context's `setOpen`\n * (T14 on a placed order) or a `DrawerClose` / `DialogClose` particle.\n *\n * The trigger holds a static label (`Text`): no component echoes the current choice there, and none is\n * shipped here — `payment.md` documents the same composition.\n */\n\n// Repeats `PaymentSectionData`'s selection set verbatim under its own name. Two definitions cannot\n// share one fragment name in a page query, and the native catalog builder resolves\n// `defineComponent({ fragment })` statically — a value imported from another module is silently\n// dropped from the built catalog. `delivery-options` duplicates for the same reason;\n// `payment.test.tsx` asserts the two sets stay field-for-field identical.\nconst fragment = /* GraphQL */ `\n  fragment PaymentSectionControllerData on Query {\n    payment {\n      __typename\n      id\n      methods {\n        __typename\n        id\n        name\n        type\n        groupName\n        validator {\n          __typename\n          numberMask\n          numberRegex\n          cvvMask\n          cvvRegex\n          cvvRequired\n          expirationRequired\n          holderNameRequired\n          billingAddressRequired\n          documentDisplayable\n          documentRequired\n        }\n      }\n      selectedMethodId\n      selectedAccountId\n      selectedBin\n      storeCountryCode\n      countries {\n        __typename\n        countryCode\n        documents {\n          __typename\n          type\n          displayable\n          required\n        }\n      }\n    }\n    cart {\n      __typename\n      id\n      total {\n        __typename\n        amount\n        currencyCode\n      }\n    }\n    clientProfile {\n      __typename\n      id\n      firstName\n      lastName\n      phone\n    }\n  }\n`;\n\n// The minimal open-state shape the controller injects into its overlay-Root child; both `DialogRoot`\n// and `DrawerRoot` accept it.\ntype OverlayOpenProps = {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type PaymentSectionControllerProps = {\n  /**\n   * Scopes the method list to a **set** of `PaymentMethod.groupName` values — a method is in scope\n   * when its `groupName` is a member (T140, FR-1, Decision 1). A single string is still accepted and\n   * scopes to exactly that one group. An empty string scopes nothing.\n   */\n  group?: string | readonly string[];\n  /** The order of the method list by `PaymentMethod.groupName`; only orders, never hides. See `PaymentSectionRootProps`. */\n  groupOrder?: string | readonly string[];\n  /** Keyed `{ payment, cart, clientProfile }` forwarded by the reactive runtime (arity-3 fragment, ADR-0015). */\n  $data?: PaymentSectionRootData;\n  /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */\n  $actions?: ComponentActions;\n  /** The single overlay `Root` to control — a `DialogRoot` (modal) or `DrawerRoot` (slide-in). */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PaymentSectionControllerDefinition = defineComponent<PaymentSectionControllerProps>({\n  name: 'PaymentSectionController',\n  importPath: '@vtex/faststore/components',\n  component: PaymentSectionController,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { payment: ['setMethod', 'sendPayments'], analytics: ['track'] },\n  providesContext: ['payment', 'card-capture'],\n  hardened: true,\n  editor: { label: 'Payment Section Controller', category: 'commerce' },\n  schema: {\n    // Literal, not `DEFAULT_METHOD_GROUP` — see the same note on `PaymentSectionRootDefinition`.\n    // T140, Decision 2/OQ-6: same widened shape as `PaymentSectionRootDefinition` — see its own note.\n    group: {\n      type: 'array',\n      default: ['creditCardPaymentGroup', 'debitCardPaymentGroup'],\n      label: 'Payment method group',\n    },\n    // T199, Decision 2: no `default` — see the same note on `PaymentSectionRootDefinition`.\n    groupOrder: {\n      type: 'array',\n      label: 'Payment method group order',\n    },\n  },\n  guideline:\n    \"State-only controller for a collapsed payment section: wrap a single DialogRoot (centered modal) or DrawerRoot (slide-in) child and it becomes controlled. Renders no markup and bakes no styling — compose the overlay particles (DialogTrigger/DialogPortal/DialogBackdrop/DialogPopup or the Drawer equivalents) directly as page nodes, put a static label (Text) inside the trigger — no component echoes the current choice there, and put PaymentMethodList plus the payment leaves (CardEntry, Installments, SavedCards, PlaceOrder, …) inside the popup. Provides the same 'payment' and 'card-capture' contexts as PaymentSectionRoot, so every leaf composes under either with no change. groupOrder only orders the popup's PaymentMethodList — a list of the store's payment group names, copied from its own data, that puts each option at its group's position; it never hides or adds an option, and a group it leaves out still shows after the named ones. Unlike the delivery-options controller it does NOT close on a successful selection — picking a method is mid-flow — so close it from a DrawerClose/DialogClose particle or from the leaf that finishes the flow. See payment.md.\",\n  // The convention-based `<file-stem>.md` (`payment-controller.md`) does not exist — this component's\n  // doc is `payment.md`, shared with PaymentSectionRoot/PaymentMethodList (T25/FR-8).\n  docPath: './payment.md',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\nexport function PaymentSectionController({\n  group = DEFAULT_METHOD_GROUP,\n  groupOrder,\n  $data: $dataProp,\n  $actions: $actionsProp,\n  children,\n}: Readonly<PaymentSectionControllerProps>) {\n  const $data = useDataOverride($dataProp);\n  const $actions = useActionsOverride($actionsProp);\n  const selection = usePaymentMethodSelection({ group, groupOrder, $data: $data?.payment ?? null, $actions });\n  const [open, setOpen] = useState(false);\n  const clientProfile = $data?.clientProfile;\n  const payment = useMemo<PaymentContextValue>(\n    () => ({ ...selection, open, setOpen, clientProfile }),\n    [selection, open, clientProfile],\n  );\n\n  if (!isValidElement<OverlayOpenProps>(children)) {\n    return children;\n  }\n\n  return (\n    <PaymentContext value={payment}>\n      <PaymentSubmissionProvider path={selection.draft.path}>\n        <PaymentCardCaptureProvider selection={selection} cart={$data?.cart} $actions={$actions}>\n          {cloneElement(children, { open, onOpenChange: setOpen })}\n        </PaymentCardCaptureProvider>\n      </PaymentSubmissionProvider>\n    </PaymentContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyIA,MAAa,qCAAqC,gBAA+C;CAC/F,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACA,eAAe;CACf,SAAS;EAAE,SAAS,CAAC,aAAa,cAAc;EAAG,WAAW,CAAC,OAAO;CAAE;CACxE,iBAAiB,CAAC,WAAW,cAAc;CAC3C,UAAU;CACV,QAAQ;EAAE,OAAO;EAA8B,UAAU;CAAW;CACpE,QAAQ;EAGN,OAAO;GACL,MAAM;GACN,SAAS,CAAC,0BAA0B,uBAAuB;GAC3D,OAAO;EACT;EAEA,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,WACE;CAGF,SAAS;AACX,CAAC;AAMD,SAAgB,yBAAyB,EACvC,QAAQ,sBACR,YACA,OAAO,WACP,UAAU,cACV,YAC0C;CAC1C,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,YAAY,0BAA0B;EAAE;EAAO;EAAY,OAAO,OAAO,WAAW;EAAM;CAAS,CAAC;CAC1G,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,gBAAgB,OAAO;CAC7B,MAAM,UAAU,eACP;EAAE,GAAG;EAAW;EAAM;EAAS;CAAc,IACpD;EAAC;EAAW;EAAM;CAAa,CACjC;CAEA,IAAI,CAAC,eAAiC,QAAQ,GAC5C,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,OAAO;EACrB,UAAA,oBAAC,2BAAD;GAA2B,MAAM,UAAU,MAAM;GAC/C,UAAA,oBAAC,4BAAD;IAAuC;IAAW,MAAM,OAAO;IAAgB;IAC5E,UAAA,aAAa,UAAU;KAAE;KAAM,cAAc;IAAQ,CAAC;GAC7B,CAAA;EACH,CAAA;CACb,CAAA;AAEpB"}

package/dist/matter/payment/payment-method-badges.js

@@ -1,10 +1,10 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
+import { ownValue } from "../../utils/own-value.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { Icon } from "../../particles/icon/icon.js";
 import { usePayment } from "./payment.js";
-import { ownValue } from "../../utils/own-value.js";
 import { NETWORK_ICON_BY_KEY } from "../card-entry/card-entry.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/payment/payment-method-badges.tsx

package/dist/matter/payment/payment.d.ts

@@ -1,8 +1,9 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
-import { PaymentMethodSelection, PaymentSectionData } from "./use-payment-method-selection.js";
 import { PaymentCartData } from "./payment-card-capture.js";
+import { PaymentMethodSelection, PaymentSectionData } from "./use-payment-method-selection.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/matter/payment/payment.d.ts
 /**
@@ -12,12 +13,23 @@ import { ComponentPropsWithRef } from "react";
  * a set (Decision 1) — a public API break for any consumer importing it directly (Interfaces).
  */
 /**
- * The roots' keyed `$data` (ADR-0015, arity 2): the `Payment` slice the selection engine reads, and the
- * cart total `add_payment_info` needs (moved here from `CardEntry`, which reads no cart).
+ * The cart's contact profile as the submit gate reads it. Only the three fields VTEX refuses an order
+ * for; the profile's `document` is never selected, so no cardholder-document value reaches this contract.
+ */
+export type PaymentClientProfile = Readonly<{
+  firstName?: string | null;
+  lastName?: string | null;
+  phone?: string | null;
+}>;
+/**
+ * The roots' keyed `$data` (ADR-0015, arity 3): the `Payment` slice the selection engine reads, the
+ * cart total `add_payment_info` needs (moved here from `CardEntry`, which reads no cart), and the cart's
+ * profile, which the submit gate checks before a transaction opens.
  */
 export type PaymentSectionRootData = {
   payment?: PaymentSectionData;
   cart?: PaymentCartData;
+  clientProfile?: PaymentClientProfile | null;
 } | null;
 export declare const DEFAULT_METHOD_GROUP: readonly string[];
 /**
@@ -38,6 +50,12 @@ export type PaymentContextValue = Readonly<PaymentMethodSelection & {
    * shopper still has a card to type — so closing is the composition's call (Decision 5).
    */
   setOpen: (open: boolean) => void;
+  /**
+   * The cart's profile when the roots' `$data` carried one. `undefined` or `null` means it was not
+   * read (still resolving, or a `$data` that omits it), which the submit gate never refuses on; a
+   * present object counts as read even when every field is `null`.
+   */
+  clientProfile?: PaymentClientProfile | null;
 }>;
 /** The provider both section roots render. Exported for `PaymentSectionController`. */
 export declare const PaymentContext: React.Context<PaymentContextValue>;
@@ -59,31 +77,63 @@ export type PaymentSectionRootProps = ComponentPropsWithRef<'div'> & {
    * fragment data. An empty string scopes nothing.
    */
   group?: string | readonly string[];
-  /** Keyed `{ payment, cart }` forwarded by the reactive runtime (arity-2 fragment, ADR-0015). */
+  /**
+   * The order of the method list, as a list of `PaymentMethod.groupName` values (T199): a method row
+   * sits at its group's position, and the single card control at the first of its groups the list
+   * names. It only orders — a group the list leaves out still shows, after the named ones in the order
+   * form's order, and a name no method holds is ignored. Names match exactly. Unset or empty keeps the
+   * order form's order, the card control first.
+   */
+  groupOrder?: string | readonly string[];
+  /** Keyed `{ payment, cart, clientProfile }` forwarded by the reactive runtime (arity-3 fragment, ADR-0015). */
   $data?: PaymentSectionRootData;
   /** Compiler-injected action surface; carries `payment.setMethod`, `payment.sendPayments`, and `analytics.track`. */
   $actions?: ComponentActions;
 };
+export declare const PaymentMethodListContent: {
+  readonly id: "payment-method-list";
+  readonly title: "Payment Method List";
+  readonly description: "Copy for the payment method group legend, the single card option and a refused selection.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly legend: {
+        readonly type: "string";
+        readonly title: "Legend";
+        readonly description: "The radio group's visible accessible name.";
+        readonly format: "icu-message";
+        readonly messageSource: "Payment method";
+      };
+      readonly cardLabel: {
+        readonly type: "string";
+        readonly title: "Card option label";
+        readonly description: "Names the one option that stands for every in-scope credit and debit method.";
+        readonly format: "icu-message";
+        readonly messageSource: "Pay with Credit / Debit Card";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Selection failure message";
+        readonly description: "Shown when a method selection fails: a network failure or a fault the shopper cannot fix.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to select the payment method. Please try again.";
+      };
+    };
+  };
+};
 /** Renders its own controls from the context's method list — `children` would have nothing to template. */
-export type PaymentMethodListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
-  /**
-   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).
-   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to
-   * the default rather than rendering a nameless group.
-   */
-  legend?: string;
+export type PaymentMethodListProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & MessageLocaleProp & {
   /**
-   * The single card control's name (T171, Decision 8). The control stands for every in-scope
-   * credit/debit method at once, so it cannot take its name from one of their `method.name` values the
-   * way a per-network row did — it is authored copy instead, defaulting to the PRD's own string.
-   * Resolved through `resolveAuthoredCopy` exactly as `legend` is, so an authored empty or
-   * whitespace-only string falls back rather than rendering a nameless control.
+   * Merchant-authored copy: the group legend (T38) and the single card control's name (T171). The card
+   * control stands for every in-scope credit/debit method at once, so it cannot take its name from one
+   * of their `method.name` values.
    */
-  cardLabel?: string;
+  $content?: ContentValue<typeof PaymentMethodListContent>;
 };
 export declare const PaymentSectionRootDefinition: ComponentDefinition<PaymentSectionRootProps>;
 export declare const PaymentMethodListDefinition: ComponentDefinition<PaymentMethodListProps>;
-export declare function PaymentSectionRoot({ group, $data: $dataProp, $actions: $actionsProp, className, children, ...props }: PaymentSectionRootProps): import("react/jsx-runtime").JSX.Element;
-export declare function PaymentMethodList({ legend, cardLabel, className, ...props }: PaymentMethodListProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentSectionRoot({ group, groupOrder, $data: $dataProp, $actions: $actionsProp, className, children, ...props }: PaymentSectionRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentMethodList({ $content, $locale, className, ...props }: PaymentMethodListProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=payment.d.ts.map

package/dist/matter/payment/payment.js

@@ -1,13 +1,15 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
-import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
 import { Fieldset } from "../../particles/fieldset/fieldset.js";
 import { RadioGroup, RadioIndicator, RadioRoot } from "../../particles/radio/radio.js";
 import { PaymentSubmissionProvider } from "../../sdk/payment/submission-registry.js";
-import { resolveCanRevealCardPayment, resolvePreselectionCandidateId, splitCardMethods, usePaymentMethodSelection } from "./use-payment-method-selection.js";
+import { orderMethodListRows, resolveCanRevealCardPayment, resolvePreselectionCandidateId, splitCardMethods, usePaymentMethodSelection } from "./use-payment-method-selection.js";
 import { PaymentCardCaptureProvider } from "./payment-card-capture.js";
 import { createContext, useContext, useId, useLayoutEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -41,6 +43,7 @@ const fragment = `
         __typename
         id
         name
+        type
         groupName
         validator {
           __typename
@@ -80,6 +83,13 @@ const fragment = `
         currencyCode
       }
     }
+    clientProfile {
+      __typename
+      id
+      firstName
+      lastName
+      phone
+    }
   }
 `;
 const DEFAULT_METHOD_GROUP = ["creditCardPaymentGroup", "debitCardPaymentGroup"];
@@ -101,6 +111,53 @@ function usePayment() {
 	return ctx;
 }
 const NO_DISCLOSURE = () => {};
+const PaymentMethodListContent = defineContentType({
+	id: "payment-method-list",
+	title: "Payment Method List",
+	description: "Copy for the payment method group legend, the single card option and a refused selection.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			legend: {
+				type: "string",
+				title: "Legend",
+				description: "The radio group's visible accessible name.",
+				format: "icu-message",
+				messageSource: "Payment method"
+			},
+			cardLabel: {
+				type: "string",
+				title: "Card option label",
+				description: "Names the one option that stands for every in-scope credit and debit method.",
+				format: "icu-message",
+				messageSource: "Pay with Credit / Debit Card"
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Selection failure message",
+				description: "Shown when a method selection fails: a network failure or a fault the shopper cannot fix.",
+				format: "icu-message",
+				messageSource: "Unable to select the payment method. Please try again."
+			}
+		}
+	}
+});
+/**
+* The message for each code a method selection can return. The list is not where a saved card is picked,
+* so no code is one its shopper can act on here; every code, and one this map does not know, shows
+* genericErrorMessage.
+*/
+const PAYMENT_METHOD_LIST_ERROR_FIELDS = {
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	INVALID_METHOD_ID: "genericErrorMessage",
+	INVALID_SAVED_CARD_ACCOUNT_ID: "genericErrorMessage",
+	MISMATCHED_BIN_FOR_SAVED_CARD: "genericErrorMessage",
+	INVALID_BIN_FORMAT: "genericErrorMessage",
+	CONFLICTING_BIN_AND_ACCOUNT_ID: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
 const PaymentSectionRootDefinition = defineComponent({
 	name: "PaymentSectionRoot",
 	importPath: "@vtex/faststore/components",
@@ -117,49 +174,48 @@ const PaymentSectionRootDefinition = defineComponent({
 		label: "Payment Section",
 		category: "commerce"
 	},
-	schema: { group: {
-		type: "array",
-		default: ["creditCardPaymentGroup", "debitCardPaymentGroup"],
-		label: "Payment method group"
-	} },
-	guideline: "Root of the checkout payment section: reads the payment methods and the current selection from the order form and provides the 'payment' context every payment leaf needs and the 'card-capture' context CardEntry needs, so place CardEntry, CardholderDocument, Installments, SaveCard, BillingAddress, SavedCards, PlaceOrder, and PaymentMethodList as its children — none of them render without a payment root ancestor. Renders one container div and no chrome or copy of its own; headings and layout belong to the composition. Selecting a payment option dispatches $actions.payment.setMethod and every subscriber re-renders from the cache with no refetch — and for a card it is the number the shopper types that decides the network, not an option they pick, so PaymentMethodList shows every in-scope credit and debit method as ONE card option. Which methods exist is always real data — never author them as props; group only scopes the list by the store's payment group(s) — defaults to credit and debit together, accepts one group name or a set of them, and set it to \"\" to show every method, one option each, with no card option. Use PaymentSectionController instead when the section should live in a drawer or modal. See payment.md."
+	schema: {
+		group: {
+			type: "array",
+			default: ["creditCardPaymentGroup", "debitCardPaymentGroup"],
+			label: "Payment method group"
+		},
+		groupOrder: {
+			type: "array",
+			label: "Payment method group order"
+		}
+	},
+	guideline: "Root of the checkout payment section: reads the payment methods and the current selection from the order form and provides the 'payment' context every payment leaf needs and the 'card-capture' context CardEntry needs, so place CardEntry, CardholderDocument, Installments, SaveCard, BillingAddress, SavedCards, PlaceOrder, and PaymentMethodList as its children — none of them render without a payment root ancestor. Renders one container div and no chrome or copy of its own; headings and layout belong to the composition. Selecting a payment option dispatches $actions.payment.setMethod and every subscriber re-renders from the cache with no refetch — and for a card it is the number the shopper types that decides the network, not an option they pick, so PaymentMethodList shows every in-scope credit and debit method as ONE card option. Which methods exist is always real data — never author them as props; group only scopes the list by the store's payment group(s) — defaults to credit and debit together, accepts one group name or a set of them, and set it to \"\" to show every method, one option each, with no card option. groupOrder only orders the list — a list of the store's payment group names, copied from its own data, that puts each option at its group's position and the card option at the first of its groups the list names; it never hides, adds or renames an option, a group it leaves out still shows after the named ones, and a name no method holds is ignored. Use PaymentSectionController instead when the section should live in a drawer or modal. See payment.md."
 });
 const PaymentMethodListDefinition = defineComponent({
 	name: "PaymentMethodList",
 	importPath: "@vtex/faststore/components",
 	component: PaymentMethodList,
 	requiresContext: "payment",
+	content: PaymentMethodListContent,
 	editor: {
 		label: "Payment Method List",
 		category: "commerce"
 	},
-	schema: {
-		legend: {
-			type: "string",
-			default: "Payment method",
-			label: "Legend"
-		},
-		cardLabel: {
-			type: "string",
-			default: "Pay with Credit / Debit Card",
-			label: "Card option label"
-		}
-	},
-	guideline: "The payment-method picker: a radio group of the payment options the order form offers, plus the inline selection error (role=\"alert\"). Every in-scope credit and debit method is ONE option — the network comes from the card number the shopper types, never from a row they pick — and any other in-scope method (e.g. Pix) keeps a row of its own; set group to \"\" on the root to switch that off and get one row per method. Selecting an option dispatches the method selection. Selecting a non-card option hides the card form, and the card option brings it back. Place it inside a PaymentSectionRoot, or inside the DialogPopup/DrawerPopup of a PaymentSectionController. It renders its own options from real data, so it takes no children and no method props; author the card option's wording with cardLabel. Keep it composed: it is the only element that surfaces a rejected selection, and the only control that can recover a selection this section does not serve — omit it and a shopper whose persisted method sits outside group has no reachable way back. Must be inside a payment root."
+	schema: {},
+	guideline: "The payment-method picker: a radio group of the payment options the order form offers, plus the inline selection error (role=\"alert\"). Every in-scope credit and debit method is ONE option — the network comes from the card number the shopper types, never from a row they pick — and any other in-scope method (e.g. Pix) keeps a row of its own; set group to \"\" on the root to switch that off and get one row per method. Selecting an option dispatches the method selection. Selecting a non-card option hides the card form, and the card option brings it back. Place it inside a PaymentSectionRoot, or inside the DialogPopup/DrawerPopup of a PaymentSectionController. It renders its own options from real data, so it takes no children and no method props; its legend and the card option's wording come from the $content fields legend and cardLabel, and a refused selection shows genericErrorMessage. Keep it composed: it is the only element that surfaces a rejected selection, and the only control that can recover a selection this section does not serve — omit it and a shopper whose persisted method sits outside group has no reachable way back. Must be inside a payment root."
 });
-function PaymentSectionRoot({ group = DEFAULT_METHOD_GROUP, $data: $dataProp, $actions: $actionsProp, className, children, ...props }) {
+function PaymentSectionRoot({ group = DEFAULT_METHOD_GROUP, groupOrder, $data: $dataProp, $actions: $actionsProp, className, children, ...props }) {
 	const $data = useDataOverride($dataProp);
 	const $actions = useActionsOverride($actionsProp);
 	const selection = usePaymentMethodSelection({
 		group,
+		groupOrder,
 		$data: $data?.payment ?? null,
 		$actions
 	});
+	const clientProfile = $data?.clientProfile;
 	const payment = useMemo(() => ({
 		...selection,
 		open: true,
-		setOpen: NO_DISCLOSURE
-	}), [selection]);
+		setOpen: NO_DISCLOSURE,
+		clientProfile
+	}), [selection, clientProfile]);
 	return /* @__PURE__ */ jsx(PaymentContextInternal, {
 		value: payment,
 		children: /* @__PURE__ */ jsx(PaymentSubmissionProvider, {
@@ -203,12 +259,22 @@ function methodListState({ loading, count }) {
 * `PaymentMethod.id` a standalone row is bound to.
 */
 const CARD_CONTROL_VALUE = "__fs-card-control";
-function PaymentMethodList({ legend, cardLabel, className, ...props }) {
-	const { methods, allMethods, persistedMethodId, selectedMethodId, selectionError, selectMethod, selectNewCard, cardModeActive, loading, placing, setMethodListMounted } = usePayment();
+function PaymentMethodList({ $content, $locale, className, ...props }) {
+	const { format } = useMessageFormatter(PaymentMethodListContent, $content);
+	const { methods, allMethods, groupOrder, persistedMethodId, selectedMethodId, selectionError, selectMethod, selectNewCard, cardModeActive, loading, placing, setMethodListMounted } = usePayment();
 	const { collapsedCardMethods, standaloneMethods } = useMemo(() => splitCardMethods({
 		methods,
 		allMethods
 	}), [methods, allMethods]);
+	const rows = useMemo(() => orderMethodListRows({
+		collapsedCardMethods,
+		standaloneMethods,
+		groupOrder
+	}), [
+		collapsedCardMethods,
+		standaloneMethods,
+		groupOrder
+	]);
 	const cardCandidateId = useMemo(() => resolvePreselectionCandidateId(methods), [methods]);
 	const canRevealCardPayment = resolveCanRevealCardPayment({
 		collapsedCardMethods,
@@ -246,30 +312,30 @@ function PaymentMethodList({ legend, cardLabel, className, ...props }) {
 		children: [selectionError ? /* @__PURE__ */ jsx("div", {
 			role: "alert",
 			"data-fs-payment-method-list-error": "",
-			children: selectionError
+			children: formatErrorCode(PaymentMethodListContent, PAYMENT_METHOD_LIST_ERROR_FIELDS, selectionError, format, "genericErrorMessage")
 		}) : null, methods.length > 0 ? /* @__PURE__ */ jsxs(Fieldset.Root, {
 			"data-fs-payment-method-list-fieldset": "",
-			children: [/* @__PURE__ */ jsx(Fieldset.Legend, { children: resolveAuthoredCopy(legend, "Payment method") }), /* @__PURE__ */ jsxs(RadioGroup, {
+			children: [/* @__PURE__ */ jsx(Fieldset.Legend, { children: format("legend") }), /* @__PURE__ */ jsx(RadioGroup, {
 				value: cardControlChecked ? CARD_CONTROL_VALUE : selectedMethodId ?? "",
 				onValueChange: handleValueChange,
-				children: [collapsedCardMethods.length > 0 ? /* @__PURE__ */ jsxs(RadioRoot, {
+				children: rows.map((row) => row.kind === "card" ? /* @__PURE__ */ jsxs(RadioRoot, {
 					value: CARD_CONTROL_VALUE,
 					children: [/* @__PURE__ */ jsx(RadioIndicator, { "data-fs-payment-method-indicator": "" }), /* @__PURE__ */ jsx("span", {
 						"data-fs-payment-method-name": "",
-						children: resolveAuthoredCopy(cardLabel, "Pay with Credit / Debit Card")
+						children: format("cardLabel")
 					})]
-				}) : null, standaloneMethods.map((method) => /* @__PURE__ */ jsxs(RadioRoot, {
-					value: method.id,
+				}, CARD_CONTROL_VALUE) : /* @__PURE__ */ jsxs(RadioRoot, {
+					value: row.method.id,
 					children: [/* @__PURE__ */ jsx(RadioIndicator, { "data-fs-payment-method-indicator": "" }), /* @__PURE__ */ jsx("span", {
 						"data-fs-payment-method-name": "",
-						children: method.name
+						children: row.method.name
 					})]
-				}, method.id))]
+				}, row.method.id))
 			})]
 		}) : null]
 	});
 }
 //#endregion
-export { DEFAULT_METHOD_GROUP, PaymentContext, PaymentMethodList, PaymentMethodListDefinition, PaymentSectionRoot, PaymentSectionRootDefinition, usePayment };
+export { DEFAULT_METHOD_GROUP, PAYMENT_METHOD_LIST_ERROR_FIELDS, PaymentContext, PaymentMethodList, PaymentMethodListContent, PaymentMethodListDefinition, PaymentSectionRoot, PaymentSectionRootDefinition, usePayment };
 
 //# sourceMappingURL=payment.js.map