Pay Button

The Pay Button component (fs-pay-button) submits the payment when the customer clicks it. Styles apply directly as CSS on the underlying <button> element. Any valid CSS property in camelCase is accepted.

The component also includes two regional disclosure slots that render automatically when the session calls for them: the Brazilian IOF fees disclaimer and the GDPR data-privacy notice.

This page is the complete reference for the Pay Button: how to mount it, the states it exposes, and every style category and property available. For setup context, see the Integration Guide.

Mount

Add a target element to your HTML:

<div id="pay-button-element"></div>

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

const payButtonComponent = sdk.components.create('fs-pay-button', {
    // style goes here
});

payButtonComponent.mount('#pay-button-element');

How styling works

Styling is configured through a style object with per-state overrides. Each state contains one or more style categories (button, text, spinner, iofDisclaimer, gdprNotice).

sdk.components.create('fs-pay-button', {
    style: {
        state: {
            default:  { /* base styling */ },
            hover:    { /* mouse hover */ },
            active:   { /* mouse-down / tap */ },
            disabled: { /* before session loads, or during processing */ },
            error:    { /* payment error */ },
            valid:    { /* payment valid */ },
        },
    },
});

Style precedence (most specific wins):

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

Available states

Style categories

Each category below targets a specific part of the Pay Button component. Select a card to jump to its full property reference.

button: the button element

Any other valid CSS property in camelCase is accepted and applied directly to the <button> element.

text: the button label

Styles applied to the <span> inside the button. When not set on text, each property inherits from the same-named property on button via CSS inheritance.

spinner: the loading spinner

Shown while a payment is in flight. The spinner is a circular SVG arc filled with a linear gradient. The four named properties below map to CSS custom properties on :host; any other valid CSS property in camelCase is applied directly to the <svg> element.

iofDisclaimer: Brazilian IOF fees disclaimer

Rendered only when the session's complianceMessages array contains "SHOW_IOF_MESSAGE".

gdprNotice: GDPR data-privacy notice

Rendered for customers in GDPR-applicable countries (EU member states, UK, Norway, Switzerland, Japan). Includes auto-populated links to Terms of Service and Privacy Policy.

Default values per state

Out of the box, only the disabled and focus states change the button visually. Other states (hover, active, error, valid) accept overrides but apply no default differentiation. Set them explicitly if you want differentiated hover or interaction styling.

disabled

Applied when the session hasn't loaded or a payment is in progress.

focus

Applied when the button has keyboard focus.

hover, active, error, valid

The SDK declares CSS variables for these states (--fs-pay-button-hover-background, etc.) but defaults them to the same values as the default state. Visual differentiation only appears when you override them.

Full example

const payButtonComponent = sdk.components.create('fs-pay-button', {
    style: {
        state: {
            default: {
                button: {
                    backgroundColor: '#2563EB',
                    color: '#ffffff',
                    borderRadius: '8px',
                    width: '100%',
                    height: '54px',
                    fontSize: '16px',
                    fontWeight: '600',
                },
                text: {
                    fontFamily: 'Inter, sans-serif',
                },
                spinner: {
                    colorStart: '#DBEAFE',
                    colorMid:   '#93C5FD',
                    colorEnd:   '#1E40AF',
                    size: '1.5rem',
                },
                gdprNotice: {
                    fontSize: '12px',
                    color: '#6B7280',
                    linkColor: '#2563EB',
                    linkHoverColor: '#1E40AF',
                },
            },
            hover: {
                button: {
                    backgroundColor: '#1E4FC0',
                },
            },
            active: {
                button: {
                    backgroundColor: '#1E3A8A',
                },
            },
            disabled: {
                button: {
                    backgroundColor: '#9CA3AF',
                    cursor: 'not-allowed',
                },
            },
        },
    },
});

payButtonComponent.mount('#pay-button-element');

Related pages

• Integration Guide: end-to-end integration walkthrough.
• Card: the companion component that collects card details.
• Disclosures: reseller disclosure block.