Attributes

Configure the component declaratively — every attribute can also be set as a property. Try combinations live in the interactive designer.

Required

Attribute	Description
session-id	Session id from POST /v1/hosted-sessions
client-secret	The session’s client_secret from POST /v1/hosted-sessions. This is the session credential the component sends as Authorization: Bearer … on every call (read config, quote fee, challenge, confirm).

Layout

Attribute	Default	Values
layout	embedded	hosted · embedded · fields
show-summary	by layout	true · false — order summary card
show-branding	by layout	true · false — merchant brand header + “Powered by Govineer” footer
show-fee-line	true	true · false — convenience fee row
show-page-message	true	true · false — your account’s payment-page message
show-pay-button	true	true · false — when false, call tokenize()/submit() yourself
pay-button-label	Pay {amount}	any string; {amount} / {total} interpolate the fee-inclusive total (e.g. Pay {amount} now)

The layout matrix shows what each mode renders by default; show-* attributes override per element.

Payment methods

Attribute	Default	Values
methods	session config	comma-separated: card,ach,apple_pay
setup-future-usage	session config	off · on_session · off_session — when on_session/off_session, an opt-in “Save this payment method to my wallet” checkbox is shown for new card/ACH entry (default checked); the method is saved only when it’s checked. off/unset hides it and never saves.
disable-ach	false	true disables ACH even if the session allows it
disable-credit-card	false	true disables card entry
cvv-recheck	account config	true re-prompts CVV for saved cards
management-mode	false	true renders saved-method management (add/remove) instead of checkout
new-method-only	false	true suppresses the saved-method selector and only allows entering a new card/ACH — even if the session’s customer has saved methods. setup-future-usage still applies, so the new method can still be saved to that customer’s wallet. For admin “capture a new method” flows where existing methods are verified out-of-band.
ach-sec-code	unset	NACHA SEC code for ACH debits — web (internet-authorized), tel (telephone/agent-authorized), or ppd. When set and the payer chooses ACH, the component shows the matching authorization and records the accepted mandate (sec code + timestamp) with the payment. web displays the mandate next to Pay; clicking Pay is the authorization (no extra click). tel/ppd show an explicit checkbox that must be ticked before Pay (agent/staff attestation). Unset = no ACH authorization shown. Ignored for card / Apple Pay.

Theming

Attribute	Default	Values
theme	light	light · dark · auto
accent	account branding	hex color, e.g. #0B5FFF
font	inter	inter · system · roboto

See Theming for CSS custom properties.

Environment

Attribute	Description
api-base	Override the API origin (sandbox/staging environments)
elements-base	Override the secure card-fields iframe origin

Properties & methods (JS)

const el = document.querySelector('govifi-payment');

el.session         // SessionConfig | null
el.state           // 'idle' | 'processing' | 'success' | 'error' | 'expired'
el.feeQuote        // { amount, convenienceFee, totalAmount, method } | null
el.selectedMethod  // 'card' | 'ach' | 'apple_pay' | { savedMethodId }

await el.tokenize();        // → { token, method }  (fields-only integrations)
await el.submit();          // confirm via the API
el.reset();                 // back to idle
await el.refreshSession();  // re-fetch the session + refresh amount/total/fee in place

refreshSession() re-fetches the hosted session and updates the displayed amount/total/fee without tearing down the entered method — use it after PATCHing the session amount server-side so the summary updates while the payer’s typed-in card survives. (Changing the session-id attribute instead does a full reload and discards entered input.)