Disclosures

The Disclosures component (fs-disclosures) displays the FastSpring reseller disclosure "Sold and fulfilled by FastSpring, an authorized reseller." It also displays Privacy Policy and Terms of Sale links sourced automatically from session data. The component renders inside its own iframe and uses the same style.state.default / state.hover structure as the other components.

This component is required. This page is the complete reference for the Disclosures component. For setup context, see the Integration Guide.

Auto-populated links: the Privacy Policy and Terms of Sale links render only when both URLs are present in the session data. No extra configuration needed; they populate automatically.

Mount

Add a target element to your HTML:

<div id="disclosures-container"></div>

Then create the component from your sdk instance and mount it:

const disclosuresComponent = sdk.components.create('fs-disclosures', {
    // style goes here
});

disclosuresComponent.mount('#disclosures-container');

How styling works

Styling is configured through a style object with per-state overrides. Each state contains one or more style categories (container, link).

sdk.components.create('fs-disclosures', {
    style: {
        state: {
            default: { /* base styling */ },
            hover:   { /* applied on link hover */ },
        },
    },
});

Style precedence (most specific wins):

State-specific category styles (e.g., state.hover.link)
Default category styles (state.default.container)
globalStyles passed to FastSpring.init(), which is applied as base defaults across all components

Available states

State	When applied
`default`	Always
`hover`	The customer hovers over a link

Style categories

`container`: the disclosure container

Property	Type	Default	Description
`backgroundColor`	`string`	`transparent`	Container background color
`color`	`string`	`#cccccc`	Reseller disclosure text color
`fontFamily`	`string`	`Helvetica`	Font family
`fontSize`	`string`	`12px`	Font size
`padding`	`string`	`12px 16px`	Inner padding of the container
`rowGap`	`string`	`6px`	Gap between the reseller row and the links row

`link`: Privacy Policy and Terms of Sale links

Set under both state.default.link and state.hover.link to control link styling at rest and on hover.

Property	Type	Default	Description
`color`	`string`	`#2563eb`	Link color

Default values per state

The hover state declares a link-color hook (--fs-disclosures-link-color-hover), but its default value is the same as the default-state link color. The visual hover effect only appears if you override it.

State	Property	Default override value
`hover`	`link.color`	`#2563eb` (same as default)

Full example

const disclosuresComponent = sdk.components.create('fs-disclosures', {
    style: {
        state: {
            default: {
                container: {
                    backgroundColor: 'transparent',
                    color: '#6B7280',
                    fontFamily: 'Inter, sans-serif',
                    fontSize: '12px',
                    padding: '16px 0',
                    rowGap: '8px',
                },
                link: {
                    color: '#2563EB',
                },
            },
            hover: {
                link: {
                    color: '#1E40AF',
                },
            },
        },
    },
});

disclosuresComponent.mount('#disclosures-container');

Integration Guide: end-to-end integration walkthrough.
Card: the card-entry form component.
Pay Button: the submit button component.