Pay monthly settings

Open Pay Monthly Message Settings from App → Features → Pay monthly message cog. The heading on the page is Pay Monthly Message. Header actions are Back to Merchant and Back to Merchants. Accordion order: Previews, Platform, Pages, Prices, Styles, Settings, then Current pay monthly config (debug). Save settings and Reload sit under the accordions. Footer status: Edit settings to update pay monthly message behavior.

The page subtitle is Configure pay monthly message visibility, price selectors, page detection and inline styling.

Above the accordions: enable toggle starts Off. Empty assigned-lenders copy No lenders assigned. Add a lender below. Button + Add lender. When every merchant lender is already in the table: All available lenders are already assigned.

Pay monthly message styling (the Styles accordion) has four tiers, applied in this order at runtime. Pick the highest-leverage tier so the merchant config stays small and easy to reason about.

Settings map

Accordion	What it is
Previews	Live iframe of the pay monthly message. Iframe title: Pay monthly settings preview. Preview reflects pay monthly settings.
Platform	Ecommerce platform. Hint: Read-only here. Managed at the top merchant level — edit on the Merchant detail card.
Pages	Enable feature subtitle: Choose which page types render the pay monthly message. Page detection subtitle: Verify that we identify the right page type. Platform uses platform defaults; Custom exposes a merchant URL/class override. Also Cart drawer and Advanced: ignore patterns. Cart drawer hint: Side cart / offcanvas on any page. Price selectors stay under Prices → Cart drawer. Ignore hint: URLs matching these patterns will never inject a pay monthly message. One per line.
Prices	Subtitle: CSS selectors used to extract prices from the merchant's DOM. Required for pay monthly messaging. Tabs: Product / Collection / Cart / Cart drawer / Home, plus Ecommerce Events. Cart drawer tab hint: Side cart while open. Open class is under Pages → Cart drawer.
Styles	Subtitle: Styling applied to the inline pay monthly message. Separate from lender container styling. Hierarchy: Tier 1 Merchant CSS (head) → Tier 2 Per-page rules → Tier 3 Responsive overrides per page → Tier 4 Element fields. Heading Tier 2–4 Per-page rules, responsive overrides & element fields. See Which tier?. Styles ⓘ labels: Which styling tier should I use?, About Merchant CSS, About per-page styling, and About compatibility settings.
Settings	Subtitle: Advisory: Learn more from pay monthly can launch popup ecommerce modal or popup calculator journeys.
Current pay monthly config (debug)	Raw JSON for this visit. Idle pre: Loading….

Pages

• Enable feature — which page types render the pay monthly message.
• Page detection — tablist aria-label Detection method. Platform uses platform defaults; Custom exposes URL patterns (merchant override) and Class patterns (merchant override). Empty: Enable a page above to configure its detection. Test URLs check those patterns. + Add another URL appends another test URL row. URL-pattern placeholder: One pattern per line. Glob /products/* or regex ^/products/[^/]+/?$. Class-pattern placeholder: One class pattern per line. Supports * wildcard, e.g. *categorypath*. Banner when no testing domain is set: No testing domain configured. Set one on the merchant detail page so test URLs can be opened in a new tab. Detection still runs against the path you enter. Prefix hover title when no testing domain is set: No testing domain configured for this merchant. Remove-row hover title: Remove this URL. Remove-row aria-label: Remove URL. Disabled visit titles: Add a path first (path empty) and Set a testing domain to enable this link (no testing domain). The visit title is the opened URL when both domain and path are set — do not copy merchant domains onto this public page.
• Cart drawer — Side cart / offcanvas on any page. Price selectors stay under Prices → Cart drawer. Enable cart drawer. When Product is off: Enable Product above. Drawer uses product pay monthly settings. When Product is on: Uses Product pay monthly lenders while the drawer is open. Drawer root is under Prices → Cart drawer. Drawer open detection (preset) and Custom open class when the preset is Custom. Placeholder: my-drawer-open. Custom class hint: Class name only (no dot). FinMatch injects only while this class is on the drawer root (or parent cart-drawer). Price selectors stay under Prices → Cart drawer.
• Advanced: ignore patterns → Ignore page patterns. Hint: URLs matching these patterns will never inject a pay monthly message. One per line.

There is no Page Detect Settings heading. That old name pointed at this Pages accordion plus Prices.

Prices

Tabs: Product, Collection, Cart, Cart drawer, Home.

• Normal price selector, Sale price selector, Price container selector (Product, Collection, Home)
• Cart: Cart total selector, Preferred total / discount voucher total, Cart price container selector. Hint: DOM element where the pay-monthly message is injected (defaults to cart total if empty).
• Cart drawer: Side cart while open. Open class is under Pages → Cart drawer. Drawer root selector — Bootscore offcanvas element, e.g. #offcanvas-cart. Price container hint: Where the pay-monthly message is injected (often cart subtotal/footer inside the drawer).

Field placeholders:

• Product / Home: .price-item--regular, .price-item--sale, .price__container
• Collection: .price__regular .price-item--regular (.price__regular.price-item--regular), .price__sale .price-item--sale.price-item--last (.price__sale.price-item--sale.price-item--last), .card__information
• Cart: .totals__total-value, Optional: alternate total element (e.g. after voucher), .finmatch-cart-total-container
• Cart drawer: #offcanvas-cart, #CartDrawer .drawer__footer .ajaxcart__price (#CartDrawer.drawer__footer.ajaxcart__price). .money is shorter than eight characters.
• Ajax events (comma-separated) placeholder: shopify:section:load, shopify:cart:updated

Ecommerce Events:

• Ajax events (comma-separated) — DOM events that trigger price re-detection (e.g. cart update, variant change).
• Dispatch resize event — same value as Styles → Compatibility

See Dynamic price detection.

Styles fields

• Extra CSS (site-wide) — Tier 1. Placeholder: .product-card { min-height: 420px; }. Hint: Saved as styling.extraCSSMerchant. Tier 1 copy: Injected once into the merchant site's <head>. Applies site-wide on every page where the SDK loads. Use for defending against merchant theme styles that interfere with our injection target.
• Tier 2–4 hint: General tab sets per-merchant message defaults. Per-page tabs override fields for that page only. Inside each page tab, Responsive overrides let you wrap element rules in @media breakpoints, and the Element fields below map to CSS variables on the message element.
• Compatibility: Hooks for merchant themes whose layout doesn't recompute after we inject the message (fixed-height containers, sticky headers, etc.). Dispatch a window resize event after we inject the message — Compatibility footer. Hint: Mirrors the Dispatch resize event checkbox in the Prices section. Saved as ecommerce_overrides.events.dispatchResizeEvent.
• Style-panel ⓘ labels: About the alignment field rename, About the linkColor field rename, About price prefix and suffix, About space before suffix, About force new line, About advanced typography, About responsive styling breakpoints, About page-level Extra CSS. Hover titles: Renamed from alignment, Renamed from linkColor.

Which tier?

Tier	Use when	Runtime
1 · Merchant CSS	Merchant theme CSS fights the injection target (fixed-height card, flex that will not reflow).	styling.extraCSSMerchant — head-injected once, idempotent.
2 · Per-page rules	One page type needs different defaults (cart bigger font; collection with no link).	Per-page fields on each .finance-message (CSS variables).
3 · Responsive overrides	Only one breakpoint needs the change (cart on a narrow viewport).	Per-page responsiveStyles → one @media block per row, scoped to .finance-message.<page>-page.
4 · Element fields	Default: colour, font, alignment, link text, price prefix/suffix on the message.	Per-page element fields (fontSize, fontColor, textAlign, linkFontColor, linkText, textOr, textSuffix, …).

Decision tree:

1. Is the issue the merchant’s page chrome (card height, sticky headers, table totals)? → Tier 1.
2. Does only one breakpoint need the change? → Tier 3 on that page tab.
3. Does only one page type need the change at all sizes? → Tier 2 via that page tab’s element fields.
4. Otherwise → Tier 4 on the General tab as the merchant default.

When merchant themes do not recompute layout after injection (sticky headers, fixed grids), enable Dispatch resize event in the Compatibility footer (also under Prices → Ecommerce Events).

Tier 1: Merchant CSS

CSS injected into the merchant site’s head as a single style#finmatch-merchant-extra-css block. It applies site-wide on every page where the FinMatch SDK loads. Re-runs replace the existing block instead of stacking (styling.extraCSSMerchant, applied by inject-merchant-css.js at DOM-ready).

Use when:

• The theme has a fixed-height container (product card, header, sticky footer) that pushes the injection out of view — grow the container.
• The price row is flex with flex-wrap: nowrap — flip it to wrap so the message has room.
• You need to hide a competing element (their own finance widget) so ours can occupy the slot.
• Cart total tables will not accept new rows — make the surrounding table behave as block, or grow a cell so we can inject inside it.

Do not use Tier 1 to style the finance message itself. That is Tiers 2–4.

Tier 2: Per-page rules

Product, Collection, Cart, and Home tabs override General defaults for that page type only. Empty fields fall back to General. Each field maps to a CSS variable on that page’s injected .finance-message.

Use when:

• Cart needs a bolder font because it sits near the totals table.
• Collection needs a smaller link, or no link, because the product page already carries the CTA.
• Home needs a different price prefix (for example “Pay monthly from” instead of “or”).

Stored at styling.<pageType>.{fontSize, fontColor, textAlign, linkFontColor, linkText, textOr, textSuffix, spaceBeforeSuffix, forceNewLine, extraCSS}. Site-wide styling.general.accentColor sets --accent-color only (General tab). CSS vars are set per element before insertion.

Style-panel hints: Site-wide --accent-color (General tab only). Pay-monthly links use Link color below. Leading word before the £ amount. Defaults to or. Trailing text after the £ amount. Defaults to /month. Sets --finance-message-font-family. Default: inherit. Sets --finance-message-font-weight. Default: 400. Sets --finance-message-line-height. Default: 1.5. Sets --finance-message-letter-spacing. Default: normal. Sets --finance-message-price-font-size. Used for the inline.finance-price token. Sets --finance-message-price-font-weight. Default: 600. Sets --finance-message-price-font-color on the £ amount. Empty inherits Font color at runtime. Sets --finance-message-text-font-color on prefix/suffix (.static-text, e.g. “or”, “/month”). Empty inherits Font color. Responsive row: Block + full width inside this breakpoint only.

Font size placeholder e.g. 15px. Link text placeholder Learn more. Extra CSS (this page only) placeholder .finance-message { padding: 10px; border-radius: 4px; }. Responsive Font size placeholder e.g. 16px.

Tier 3: Responsive overrides

Each row becomes one @media block, scoped to .finance-message.<page>-page, for that page type only. Use it to fix layout at a breakpoint without touching the desktop default.

Examples: force cart text-align: center under 480px; override product link colour at 1024px because it clashes with a sale badge; force a new line below a width so the message does not collide with the price.

Pick a comparison (equal to or less than, equal to or more than, strictly less than, strictly greater than) and a pixel width. Row chrome: When viewport width is, Breakpoint width in CSS pixels, Remove breakpoint (title Remove this breakpoint), Apply on this breakpoint. Fields: Font size, Font color, Text alignment, Link color, Force new line. Admin stores minWidth / maxWidth. Legacy rows that only had mediaQuery still load; saving rewrites them to min/max. Strict less-than / greater-than use calc plus or minus 1px so the edge pixel behaves as you expect.

Stored at styling.<pageType>.responsiveStyles[]. Applied by styles.js → applyStylingOverrides().

Tier 4: Element fields

Per-element CSS variables on the message: font, weight, line-height, letter-spacing, and the inline price font size. Leave blank to inherit from the merchant’s page styles. The General tab is the merchant default; page tabs override it.

Field	CSS variable	Default
fontFamily	--finance-message-font-family	inherit
fontWeight	--finance-message-font-weight	400
lineHeight	--finance-message-line-height	1.5
letterSpacing	--finance-message-letter-spacing	normal
priceFontSize	--finance-message-price-font-size	16px
priceFontColor	--finance-message-price-font-color	inherits fontColor, else #333333
priceFontWeight	--finance-message-price-font-weight	600
textFontColor	--finance-message-text-font-color	inherits fontColor, else #333333

Set on document.documentElement before insertion. The amount uses .finance-price (priceFontColor); prefix/suffix uses .static-text (textFontColor). The learn-more link uses linkFontColor.

Compatibility

Hooks that do not change visuals directly, but help the message render inside hostile merchant themes.

Dispatch resize event fires a synthetic window.resize after injection. Use it when the theme uses scroll-spy, sticky headers, or layout libraries that do not observe DOM mutations.

Page-level Force new line (Tier 4) toggles display:block; width:100%. Tier 1 covers most structural fixes (fixed containers, table cells, sticky footers).

Stored at ecommerce_overrides.events.dispatchResizeEvent. The same value is the Prices → Ecommerce Events checkbox; both surfaces stay in sync.

Deprecated fields

Legacy rows still show in admin with a “Renamed from …” hint. Prefer the four tiers above. Saving copies the value into the canonical field and drops the legacy key.

• alignment → textAlign. Runtime reads textAlign. Both paths set --finance-message-text-align.
• linkColor → linkFontColor. Runtime reads linkFontColor. Both paths set --finance-message-link-font-color / --finance-message-link-color.
• styling.general.extraCSS → styling.extraCSSMerchant. Old site-wide CSS slot. New work belongs in Tier 1. Runtime still reads both until you migrate.

Migration choices on the General extraCSS banner. Heading: Legacy styling.general.extraCSS detected. Hint: This snippet is still applied at runtime, but the canonical home is now Tier 1 extraCSSMerchant. Choose how to migrate:

• Copy to Tier 1 — appends the snippet to extraCSSMerchant, leaves the legacy field. Safe rehearsal. After copy the banner notes Copied. Save to persist. The legacy field is unchanged — runtime will continue to read both until you choose Copy & clear.
• Copy & clear — same, then clears styling.general.extraCSS once you have verified Tier 1 alone is enough.
• Leave as-is — dismiss the banner for this session. Runtime still honours general.extraCSS.

Global CSS

CSS injected once in the page head as style#finmatch-merchant-extra-css (styling.extraCSSMerchant). Same mechanism as Tier 1. Use it for merchant page chrome (card heights, theme bugs). For the finance message itself, prefer the per-page Extra CSS field.

Page CSS

CSS appended for this page type only (styling.<pageType>.extraCSS). Wrapped in a media-query block when responsive styles are configured; otherwise applied as a sibling stylesheet to that page’s .finance-message. Use for padding, borders, or layouts the structured fields cannot express.

Price text

Wrap the calculated monthly figure with custom text (prefix / suffix).

Defaults: prefix or, suffix /month, Space before suffix on (so the suffix is separated from the amount). Hint: Checked: £25 /month · Unchecked: £25/month. Disable the space when you want the suffix flush against the amount.

Show Learn more link — Hint: When off, only the price line is shown on this page (modal/calculator can stay enabled elsewhere).

Stored at styling.<pageType>.{textOr, textSuffix, spaceBeforeSuffix}. Falls back to styling.general if the per-page values are empty.

Force new line

Forces the pay monthly message onto its own line. Hint: Sets display:block; width:100% on the message element so it sits on its own line. Enable when the merchant’s price layout is inline (price + sale badge + message on one line) and the message gets squeezed.

Set independently per page tab. General is the default for any page that does not override it (styling.<pageType>.forceNewLine).

Reload and Save

ⓘ What does Reload do? Reload discards unsaved pay-monthly edits and re-fetches runtime config plus the merchant profile. Use it after someone else saved in another tab, or to roll back without a full page refresh.

Runtime config: gs://finmatch-p/configs/finmatch-merchant-config.json via GET /admin/merchant-config/:id. Profile: merchants.json via GET /api/merchants/:id.

Save settings writes runtime config via PUT /admin/merchant-config/:id (top-level fields are replaced — renamed legacy keys are dropped on this write) and PATCHes the merchant profile.

Click Save settings:

1. The button and footer status both show Saving.... The button is disabled until the write finishes.
2. Success footer: Saved to runtime config + merchant profile.
3. Failure footer is the API message, or Failed to save settings. The same fallback is toasted. The button returns to Save settings.

Reload footer: Reloading..., then **Settings reloaded from API

• runtime config.** Failure: Reload failed: plus the reason.

Dynamic price detection

Scans each detected page for prices in the DOM and renders a monthly equivalent next to them.

Static, server-rendered prices on collection grids and product pages use CSS selectors in the Prices accordion. Embedded calculators and modals use the per-lender price source under Calculator Settings / Ecommerce Modal Settings (Default calculator price in embed mode, and the matching modal price-source section).

See Calculator editor.