@asteby/storefront-react 0.8.0 → 0.10.0

package/dist/payments.css

@@ -0,0 +1,57 @@
+/*
+ * Default sheet for <PaymentMethodSection> (`@asteby/storefront-react/payments.css`). Optional: it only does what the
+ * section cannot do without JavaScript (show the panel of the checked row) plus neutral spacing. Colors, borders and
+ * radius stay with the shop (pass `classNames`).
+ */
+[data-sf-pay-method] [data-sf-pay-choice]:not(:has(input[name='payment_choice']:checked)) [data-sf-pay-panel] {
+  display: none;
+}
+[data-sf-pay-method] [data-sf-pay-panel][hidden] {
+  display: none;
+}
+[data-sf-pay-method] [data-sf-pay-points] {
+  display: grid;
+  gap: 0.5rem;
+}
+@media (min-width: 40rem) {
+  [data-sf-pay-method] [data-sf-pay-points] {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+[data-sf-pay-method] [data-sf-pay-point] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 44px;
+  cursor: pointer;
+}
+[data-sf-pay-method] [data-sf-pay-method-submit] {
+  min-height: 44px;
+}
+/* Brand marks (`brandMarks`): trailing marks of a row (card networks, first cash points) and the mark of each point. */
+[data-sf-pay-method] [data-sf-pay-brands] {
+  display: inline-flex;
+  flex: none;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.25rem;
+  margin-inline-start: auto;
+}
+[data-sf-pay-method] [data-sf-pay-glyph] {
+  display: block;
+  opacity: 0.8;
+}
+[data-sf-pay-method] [data-sf-brand-mark] {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* The open cash row already lists every point with its mark: the preview would repeat them. */
+[data-sf-pay-method] [data-sf-pay-choice]:has(input[name='payment_choice']:checked) [data-sf-pay-brands='cash'] {
+  display: none;
+}
+@media (max-width: 24rem) {
+  /* Narrow phones: the row text wins over the preview marks. */
+  [data-sf-pay-method] [data-sf-pay-choice] [data-sf-pay-brands] [data-sf-brand-mark]:nth-child(n + 3) {
+    display: none;
+  }
+}

package/dist/payments.d.cts

@@ -1,6 +1,8 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
-import { Money, PaymentAttemptResult, PaymentClient, PaymentOutcomeKind, PaymentOutcome, PaymentErrorView, PaymentMessages, PaymentErrorKind } from '@asteby/storefront';
+import { ReactNode, CSSProperties, RefObject } from 'react';
+import { Money, PaymentAttemptResult, PaymentClient, PaymentOutcomeKind, PaymentOutcome, PaymentErrorView, PaymentMessages, PaymentErrorKind, PaymentOptionKey } from '@asteby/storefront';
+import { a as PayChoices } from './choices-DEPE9KRq.cjs';
+export { B as BuildPayChoicesOptions, P as PayChoice, b as PayErrorBody, c as PaymentCspMode, d as PaymentCspOptions, V as VoucherRowLabels, e as buildPayChoices, f as cashProviderData, g as checkoutToAttempt, h as choiceValue, p as parseChoice, i as payErrorResponse, j as paymentCsp, k as paymentCspHeaderName, l as paymentCspHeaders, m as paymentCspMode, n as paymentNonce, o as paymentNonceFromHeaders, v as voucherRows } from './choices-DEPE9KRq.cjs';
 
 /**
  * Replaceable ports of the embedded payment. The shop (or another provider)
@@ -317,30 +319,144 @@ declare function loadPaymentSdk(url: string, options: LoadScriptOptions): Promis
 /** Test helper: forgets the loaded-script cache. */
 declare function resetPaymentSdkCache(): void;
 
-type PaymentCspOptions = {
-    /** Per-request nonce; also set it on the inserted `<script>` and on `<Scripts nonce>`. */
+/** Texts of the "Payment method" section. Override any of them with the `messages` prop. */
+type PaymentMethodMessages = {
+    legend: string;
+    /** Button label before the total: "Pagar $1,200.00". */
+    pay: string;
+    /** Button label for card and cash, before the total. */
+    placeOrder: string;
+    /** Button label when the buyer leaves for the provider's page. */
+    payRedirect: string;
+    /** Button label for the first step (address) of a two-step checkout. */
+    continue: string;
+    /** Button label when the address must be saved again. */
+    retryAddress: string;
+    processing: string;
+    redirectNote: string;
+    cashPoints: string;
+    cashMore: string;
+    cashNote: string;
+    secureCard: string;
+    pickDeliveryFirst: string;
+    updatingTotal: string;
+    syncFailed: string;
+    /** The shipping quote expired or changed: fresh rates are loading. */
+    quoteChanged: string;
+    rebuildCart: string;
+    noPaymentTitle: string;
+    noPayment: string;
+    paymentNote: string;
+    /** Fallback names for the provider options when the server sends no `label`. */
+    options: Record<PaymentOptionKey, string>;
+};
+/** Messages for a locale (`es*` default, `en*`), with optional overrides. */
+declare function paymentMethodMessages(locale?: string | null, overrides?: Partial<Omit<PaymentMethodMessages, 'options'>> & {
+    options?: Partial<PaymentMethodMessages['options']>;
+} | null): PaymentMethodMessages;
+
+/** Name of the radio group that carries the chosen row (`method` or `method|option`). */
+declare const PAYMENT_CHOICE_FIELD = "payment_choice";
+/** Name of the radio group that carries the chosen cash point. */
+declare const CASH_POINT_FIELD = "cash_point";
+/** Fields of the page form (contact, delivery, address, method) for the JSON POST of the embedded payment. */
+declare function formFields(form: HTMLFormElement | null | undefined): Record<string, string>;
+type PaymentMethodClassNames = Partial<Record<'root' | 'legend' | 'choice' | 'radioLabel' | 'radio' | 'labelText' | 'hint' | 'icon' | 'brands' | 'panel' | 'cashPoint' | 'cashPointInput' | 'cashMore' | 'note' | 'alert' | 'status' | 'brickWrap' | 'brick' | 'submit' | 'rebuild', string>>;
+type PaymentMethodTestIds = Partial<Record<'method' | 'submit' | 'cash' | 'redirectNote' | 'card' | 'syncing' | 'syncFailed' | 'rebuild' | 'noPayment', string>>;
+type PaymentMethodSectionProps = {
+    /** From `buildPayChoices(payment.methods)`. */
+    choices: PayChoices;
+    /** The server total (`cart.cost.total`). Shown on the button and passed to the card form. Never computed here. */
+    amount: Money;
+    /** Cart (or checkout) id: scopes the stored attempt id so a reload reuses it. */
+    scope?: string;
+    /** The page `<form>`: its fields travel with the card payment and it is validated before charging. */
+    formRef: RefObject<HTMLFormElement | null>;
+    /** POST endpoint that charges the card (`handlers.pay` on the server). */
+    payUrl: string;
+    /** POST endpoint that re-reads the payment (`handlers.status`). Enables the 3DS / review polling. */
+    statusUrl?: string;
+    /** Row preselected. Default: `choices.defaultValue`. */
+    defaultChoice?: string | null;
+    /** Value of the delivery group; the card form waits until it is `deliveryReady` and `syncDelivery` has settled. */
+    delivery?: string;
+    /** `false` while the buyer has not chosen a delivery that fixes the total (e.g. address pending). Default true. */
+    deliveryReady?: boolean;
+    /**
+     * Saves the chosen delivery on the server cart so the server total includes it. Resolve `true` once the new total
+     * has been read back (the `amount` prop is then up to date). Called once per delivery, whatever the payment row (so
+     * the total on the button and in the shop's summary always holds the chosen delivery). Without it nothing waits.
+     *
+     * Resolve `'requote'` when the server refused the rate because the quote expired or changed and the shop is loading
+     * fresh rates: the section then says so (`quoteChanged`, a status, not an error), keeps the card in the page and
+     * tries again with the next delivery value. `false` is a real failure (the card degrades to the redirect).
+     */
+    syncDelivery?: (delivery: string) => Promise<boolean | 'requote'>;
+    /** A two-step checkout still collecting the address: the button reads "continue" and no card form shows. */
+    addressFirst?: boolean;
+    /** The address must be saved again before paying. */
+    retryAddress?: boolean;
+    /** Disables the button (the shop is not ready to take payment). */
+    blocked?: boolean;
+    /** The page form is submitting. */
+    busy?: boolean;
+    /** Names of fields with a server error (`payment_method`, `cash_point`). */
+    invalid?: ReadonlySet<string>;
     nonce?: string;
-    /** Extra origins by directive (e.g. your image CDN). */
-    extra?: {
-        script?: string[];
-        frame?: string[];
-        connect?: string[];
-        img?: string[];
-        form?: string[];
+    locale?: string;
+    messages?: Parameters<typeof paymentMethodMessages>[1];
+    /** Name for a plain method (`PaymentMethod` without options). Default: the key as it comes. */
+    methodLabel?: (methodKey: string) => {
+        label: string;
+        hint?: string;
     };
-    /** `report-uri` / `report-to` target for the report-only rollout. */
-    reportUri?: string;
+    /** Per-row icon by option (`card`, `cash`, `wallet`, `credits`) or `plain`. Replaces the default marks of that row. */
+    icons?: Partial<Record<PaymentOptionKey | 'plain', ReactNode>>;
+    /**
+     * Brand marks (`BrandMark`): the provider's mark on its account / no-card rows and on a plain method, the cash point
+     * marks on the cash row and next to each point, and `cardBrands` on the card row. Default true; `false` keeps the
+     * rows text-only.
+     */
+    brandMarks?: boolean;
+    /** Card networks drawn on the card row (`visa`, `mastercard`, `amex`, `carnet`…), as the shop's provider accepts them. */
+    cardBrands?: readonly string[];
+    /** How to print the total on the button. Default `formatMoney`. */
+    renderAmount?: (amount: Money) => ReactNode;
+    /** Anchor to the cart for the "rebuild" action when the cart expired. Default: plain `<a href>`. */
+    rebuildHref?: string;
+    renderLink?: (props: {
+        href: string;
+        className?: string;
+        children: ReactNode;
+        testId?: string;
+    }) => ReactNode;
+    /** Called once the order is closed in the page (approved, under review or voucher). Navigate to the thank-you page. */
+    onDone: (outcome: PaymentOutcome) => void;
+    /** The server total changed under the buyer: re-read the cart (the card form remounts with the new amount). */
+    onAmountChanged?: () => void;
+    onEvent?: (event: PaymentEvent) => void;
+    classNames?: PaymentMethodClassNames;
+    testIds?: PaymentMethodTestIds;
+    /** Hide the section button (drive the form some other way). Card payments then need `PaymentMethodHandle`-less flows. */
+    hideSubmit?: boolean;
+    /** Replaces the transport built from `payUrl` / `statusUrl`. */
+    transport?: PaymentTransport;
+    /** Extra props for the card form (`adapter`, `adapters`, `messages`, `minHeight`, `storage`, timeouts...). */
+    brickProps?: Partial<Omit<PaymentBrickProps, 'client' | 'amount' | 'transport' | 'onResult' | 'onEvent' | 'onFallback'>>;
 };
 /**
- * Builds the Content-Security-Policy for the payment routes from what each provider declares
- * (`PaymentClient.csp`), so the shop never hard-codes provider hosts. Meant for `/pagar` only,
- * never for the whole site. Roll out as `Content-Security-Policy-Report-Only` first.
+ * "Payment method", hybrid. Card: the provider's secure form INSIDE the page (`PaymentBrick`) with the shop's own
+ * button. Cash: payment points and a voucher on order. Provider account and no-card payments redirect. Without
+ * JavaScript, or if the card form does not load, everything falls back to the plain redirect flow (the page form's
+ * normal submit); the cash point radios and the notes work without JavaScript with the `payments.css` sheet.
+ *
+ * Money: the form amount is the server total passed in `amount` (already holding the chosen delivery); nothing is added
+ * or recalculated here.
  *
- * No SRI on purpose: provider SDK URLs are unversioned and a hash would break payments on any update.
+ * Accessibility: one labelled `fieldset` with native radios; notes in `role="status"`, problems in `role="alert"`; the
+ * button explains its busy state and is never silently disabled while the card form is loading.
  */
-declare function paymentCsp(clients: readonly (PaymentClient | null | undefined)[], options?: PaymentCspOptions): string;
-/** `Content-Security-Policy` or, during the rollout week, `Content-Security-Policy-Report-Only`. */
-declare function paymentCspHeaderName(reportOnly: boolean): string;
+declare function PaymentMethodSection(props: PaymentMethodSectionProps): react.JSX.Element;
 
 /** CSS custom properties (set by the shop in its stylesheet) -> provider widget variables. */
 declare const PAYMENT_THEME_TOKENS: {
@@ -361,4 +477,4 @@ declare const PAYMENT_THEME_TOKENS: {
  */
 declare function readPaymentTheme(el: Element | null | undefined, tokens?: Record<string, string>): Record<string, string>;
 
-export { type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_THEME_TOKENS, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentCspOptions, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, loadPaymentSdk, mercadoPagoBricksAdapter, paymentCsp, paymentCspHeaderName, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
+export { CASH_POINT_FIELD, type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PayChoices, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentMethodClassNames, type PaymentMethodMessages, PaymentMethodSection, type PaymentMethodSectionProps, type PaymentMethodTestIds, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };

package/dist/payments.d.ts

@@ -1,6 +1,8 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
-import { Money, PaymentAttemptResult, PaymentClient, PaymentOutcomeKind, PaymentOutcome, PaymentErrorView, PaymentMessages, PaymentErrorKind } from '@asteby/storefront';
+import { ReactNode, CSSProperties, RefObject } from 'react';
+import { Money, PaymentAttemptResult, PaymentClient, PaymentOutcomeKind, PaymentOutcome, PaymentErrorView, PaymentMessages, PaymentErrorKind, PaymentOptionKey } from '@asteby/storefront';
+import { a as PayChoices } from './choices-DEPE9KRq.js';
+export { B as BuildPayChoicesOptions, P as PayChoice, b as PayErrorBody, c as PaymentCspMode, d as PaymentCspOptions, V as VoucherRowLabels, e as buildPayChoices, f as cashProviderData, g as checkoutToAttempt, h as choiceValue, p as parseChoice, i as payErrorResponse, j as paymentCsp, k as paymentCspHeaderName, l as paymentCspHeaders, m as paymentCspMode, n as paymentNonce, o as paymentNonceFromHeaders, v as voucherRows } from './choices-DEPE9KRq.js';
 
 /**
  * Replaceable ports of the embedded payment. The shop (or another provider)
@@ -317,30 +319,144 @@ declare function loadPaymentSdk(url: string, options: LoadScriptOptions): Promis
 /** Test helper: forgets the loaded-script cache. */
 declare function resetPaymentSdkCache(): void;
 
-type PaymentCspOptions = {
-    /** Per-request nonce; also set it on the inserted `<script>` and on `<Scripts nonce>`. */
+/** Texts of the "Payment method" section. Override any of them with the `messages` prop. */
+type PaymentMethodMessages = {
+    legend: string;
+    /** Button label before the total: "Pagar $1,200.00". */
+    pay: string;
+    /** Button label for card and cash, before the total. */
+    placeOrder: string;
+    /** Button label when the buyer leaves for the provider's page. */
+    payRedirect: string;
+    /** Button label for the first step (address) of a two-step checkout. */
+    continue: string;
+    /** Button label when the address must be saved again. */
+    retryAddress: string;
+    processing: string;
+    redirectNote: string;
+    cashPoints: string;
+    cashMore: string;
+    cashNote: string;
+    secureCard: string;
+    pickDeliveryFirst: string;
+    updatingTotal: string;
+    syncFailed: string;
+    /** The shipping quote expired or changed: fresh rates are loading. */
+    quoteChanged: string;
+    rebuildCart: string;
+    noPaymentTitle: string;
+    noPayment: string;
+    paymentNote: string;
+    /** Fallback names for the provider options when the server sends no `label`. */
+    options: Record<PaymentOptionKey, string>;
+};
+/** Messages for a locale (`es*` default, `en*`), with optional overrides. */
+declare function paymentMethodMessages(locale?: string | null, overrides?: Partial<Omit<PaymentMethodMessages, 'options'>> & {
+    options?: Partial<PaymentMethodMessages['options']>;
+} | null): PaymentMethodMessages;
+
+/** Name of the radio group that carries the chosen row (`method` or `method|option`). */
+declare const PAYMENT_CHOICE_FIELD = "payment_choice";
+/** Name of the radio group that carries the chosen cash point. */
+declare const CASH_POINT_FIELD = "cash_point";
+/** Fields of the page form (contact, delivery, address, method) for the JSON POST of the embedded payment. */
+declare function formFields(form: HTMLFormElement | null | undefined): Record<string, string>;
+type PaymentMethodClassNames = Partial<Record<'root' | 'legend' | 'choice' | 'radioLabel' | 'radio' | 'labelText' | 'hint' | 'icon' | 'brands' | 'panel' | 'cashPoint' | 'cashPointInput' | 'cashMore' | 'note' | 'alert' | 'status' | 'brickWrap' | 'brick' | 'submit' | 'rebuild', string>>;
+type PaymentMethodTestIds = Partial<Record<'method' | 'submit' | 'cash' | 'redirectNote' | 'card' | 'syncing' | 'syncFailed' | 'rebuild' | 'noPayment', string>>;
+type PaymentMethodSectionProps = {
+    /** From `buildPayChoices(payment.methods)`. */
+    choices: PayChoices;
+    /** The server total (`cart.cost.total`). Shown on the button and passed to the card form. Never computed here. */
+    amount: Money;
+    /** Cart (or checkout) id: scopes the stored attempt id so a reload reuses it. */
+    scope?: string;
+    /** The page `<form>`: its fields travel with the card payment and it is validated before charging. */
+    formRef: RefObject<HTMLFormElement | null>;
+    /** POST endpoint that charges the card (`handlers.pay` on the server). */
+    payUrl: string;
+    /** POST endpoint that re-reads the payment (`handlers.status`). Enables the 3DS / review polling. */
+    statusUrl?: string;
+    /** Row preselected. Default: `choices.defaultValue`. */
+    defaultChoice?: string | null;
+    /** Value of the delivery group; the card form waits until it is `deliveryReady` and `syncDelivery` has settled. */
+    delivery?: string;
+    /** `false` while the buyer has not chosen a delivery that fixes the total (e.g. address pending). Default true. */
+    deliveryReady?: boolean;
+    /**
+     * Saves the chosen delivery on the server cart so the server total includes it. Resolve `true` once the new total
+     * has been read back (the `amount` prop is then up to date). Called once per delivery, whatever the payment row (so
+     * the total on the button and in the shop's summary always holds the chosen delivery). Without it nothing waits.
+     *
+     * Resolve `'requote'` when the server refused the rate because the quote expired or changed and the shop is loading
+     * fresh rates: the section then says so (`quoteChanged`, a status, not an error), keeps the card in the page and
+     * tries again with the next delivery value. `false` is a real failure (the card degrades to the redirect).
+     */
+    syncDelivery?: (delivery: string) => Promise<boolean | 'requote'>;
+    /** A two-step checkout still collecting the address: the button reads "continue" and no card form shows. */
+    addressFirst?: boolean;
+    /** The address must be saved again before paying. */
+    retryAddress?: boolean;
+    /** Disables the button (the shop is not ready to take payment). */
+    blocked?: boolean;
+    /** The page form is submitting. */
+    busy?: boolean;
+    /** Names of fields with a server error (`payment_method`, `cash_point`). */
+    invalid?: ReadonlySet<string>;
     nonce?: string;
-    /** Extra origins by directive (e.g. your image CDN). */
-    extra?: {
-        script?: string[];
-        frame?: string[];
-        connect?: string[];
-        img?: string[];
-        form?: string[];
+    locale?: string;
+    messages?: Parameters<typeof paymentMethodMessages>[1];
+    /** Name for a plain method (`PaymentMethod` without options). Default: the key as it comes. */
+    methodLabel?: (methodKey: string) => {
+        label: string;
+        hint?: string;
     };
-    /** `report-uri` / `report-to` target for the report-only rollout. */
-    reportUri?: string;
+    /** Per-row icon by option (`card`, `cash`, `wallet`, `credits`) or `plain`. Replaces the default marks of that row. */
+    icons?: Partial<Record<PaymentOptionKey | 'plain', ReactNode>>;
+    /**
+     * Brand marks (`BrandMark`): the provider's mark on its account / no-card rows and on a plain method, the cash point
+     * marks on the cash row and next to each point, and `cardBrands` on the card row. Default true; `false` keeps the
+     * rows text-only.
+     */
+    brandMarks?: boolean;
+    /** Card networks drawn on the card row (`visa`, `mastercard`, `amex`, `carnet`…), as the shop's provider accepts them. */
+    cardBrands?: readonly string[];
+    /** How to print the total on the button. Default `formatMoney`. */
+    renderAmount?: (amount: Money) => ReactNode;
+    /** Anchor to the cart for the "rebuild" action when the cart expired. Default: plain `<a href>`. */
+    rebuildHref?: string;
+    renderLink?: (props: {
+        href: string;
+        className?: string;
+        children: ReactNode;
+        testId?: string;
+    }) => ReactNode;
+    /** Called once the order is closed in the page (approved, under review or voucher). Navigate to the thank-you page. */
+    onDone: (outcome: PaymentOutcome) => void;
+    /** The server total changed under the buyer: re-read the cart (the card form remounts with the new amount). */
+    onAmountChanged?: () => void;
+    onEvent?: (event: PaymentEvent) => void;
+    classNames?: PaymentMethodClassNames;
+    testIds?: PaymentMethodTestIds;
+    /** Hide the section button (drive the form some other way). Card payments then need `PaymentMethodHandle`-less flows. */
+    hideSubmit?: boolean;
+    /** Replaces the transport built from `payUrl` / `statusUrl`. */
+    transport?: PaymentTransport;
+    /** Extra props for the card form (`adapter`, `adapters`, `messages`, `minHeight`, `storage`, timeouts...). */
+    brickProps?: Partial<Omit<PaymentBrickProps, 'client' | 'amount' | 'transport' | 'onResult' | 'onEvent' | 'onFallback'>>;
 };
 /**
- * Builds the Content-Security-Policy for the payment routes from what each provider declares
- * (`PaymentClient.csp`), so the shop never hard-codes provider hosts. Meant for `/pagar` only,
- * never for the whole site. Roll out as `Content-Security-Policy-Report-Only` first.
+ * "Payment method", hybrid. Card: the provider's secure form INSIDE the page (`PaymentBrick`) with the shop's own
+ * button. Cash: payment points and a voucher on order. Provider account and no-card payments redirect. Without
+ * JavaScript, or if the card form does not load, everything falls back to the plain redirect flow (the page form's
+ * normal submit); the cash point radios and the notes work without JavaScript with the `payments.css` sheet.
+ *
+ * Money: the form amount is the server total passed in `amount` (already holding the chosen delivery); nothing is added
+ * or recalculated here.
  *
- * No SRI on purpose: provider SDK URLs are unversioned and a hash would break payments on any update.
+ * Accessibility: one labelled `fieldset` with native radios; notes in `role="status"`, problems in `role="alert"`; the
+ * button explains its busy state and is never silently disabled while the card form is loading.
  */
-declare function paymentCsp(clients: readonly (PaymentClient | null | undefined)[], options?: PaymentCspOptions): string;
-/** `Content-Security-Policy` or, during the rollout week, `Content-Security-Policy-Report-Only`. */
-declare function paymentCspHeaderName(reportOnly: boolean): string;
+declare function PaymentMethodSection(props: PaymentMethodSectionProps): react.JSX.Element;
 
 /** CSS custom properties (set by the shop in its stylesheet) -> provider widget variables. */
 declare const PAYMENT_THEME_TOKENS: {
@@ -361,4 +477,4 @@ declare const PAYMENT_THEME_TOKENS: {
  */
 declare function readPaymentTheme(el: Element | null | undefined, tokens?: Record<string, string>): Record<string, string>;
 
-export { type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_THEME_TOKENS, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentCspOptions, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, loadPaymentSdk, mercadoPagoBricksAdapter, paymentCsp, paymentCspHeaderName, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
+export { CASH_POINT_FIELD, type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PayChoices, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentMethodClassNames, type PaymentMethodMessages, PaymentMethodSection, type PaymentMethodSectionProps, type PaymentMethodTestIds, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };