Email

The Email component (fs-email) renders an email input inside a secure iframe served from FastSpring's domain. The value maps to customer.billToContact.email in the session. The component renders no section header, so add your own heading above it on the page.

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

Mount

Add a target element to your HTML:

<div id="email-element"></div>

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

const emailComponent = sdk.components.create('fs-email', {
    // options + style go here
});

emailComponent.mount('#email-element');

Component options

Top-level options passed alongside style:

How styling works

Styling is configured through a style object passed at component creation. Each state contains one or more style categories (email, label, input, inlineError) that group related properties.

sdk.components.create('fs-email', {
    style: {
        state: {
            default: { /* base styles */ },
            hover:   { /* applied on hover */ },
            focus:   { /* applied on focus */ },
            error:   { /* applied in error state */ },
        },
    },
});

Style precedence: FastSpring uses the first value it finds, in this order:

1. The style you set for the current state (e.g., state.focus.input)
2. The style you set for the default state (e.g., state.default.input)
3. globalStyles passed to FastSpring.init()
4. FastSpring's built-in default (the Default column in the tables below)

Available states

For what each state changes out of the box, see Default values per state.

Style categories

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

The default font family for every category is Helvetica Neue, helvetica, arial, sans-serif, written as Helvetica Neue stack in the tables below.

email: component width

There is no panel around the field: background, border, and shadow come from your page. Text color and font are set per part (label, input, inlineError) or once for every component with globalStyles.

input: the email field

label: the field label

inlineError: inline validation error messages

The error slot reserves 16px of height so the layout doesn't shift when an error appears.

Default values per state

Out of the box, the Email component visually changes for focus and error. Only the combinations below can be overridden; others are ignored.

inlineError styling is also accepted under default; the error value wins when both are set.

focus

Applied when the input has keyboard focus.

error

Applied when validation fails.

Read-only mode

Applied when fields.email is 'readonly'. This is a mode, not a style state.

Full example

sdk.components.create('fs-email', {
    labelMode: 'floating',
    style: {
        state: {
            default: {
                email: {
                    maxWidth: '520px',
                },
                label: {
                    color: '#374151',
                    fontSize: '14px',
                    fontFamily: 'Inter, sans-serif',
                },
                input: {
                    fontFamily: 'Inter, sans-serif',
                    backgroundColor: '#f9fafb',
                    borderColor: '#e5e7eb',
                    height: '48px',
                    placeholderColor: '#9ca3af',
                },
                inlineError: {
                    color: '#dc2626',
                    fontSize: '13px',
                },
            },
            focus: {
                input: {
                    borderColor: '#2563eb',
                },
            },
            error: {
                input: {
                    borderColor: '#dc2626',
                },
            },
        },
    },
}).mount('#email-element');