Coupon

The Coupon component (fs-coupon) renders a coupon code field and Apply button inside a secure iframe served from FastSpring's domain. Applying or removing a code updates the session through the SDK, and components that show session-derived values, such as totals, refresh automatically.

This page is the complete reference for the Coupon 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="coupon-element"></div>

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

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

couponComponent.mount('#coupon-element');

Component options

Top-level options passed alongside style:

What the buyer sees

How styling works

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

sdk.components.create('fs-coupon', {
    style: {
        state: {
            default:  { /* base styles */ },
            hover:    { /* applied on hover */ },
            focus:    { /* applied on focus */ },
            disabled: { /* applied to disabled controls */ },
            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)

Coming from the Card component? The input category uses the same property names as the Card's input where the two overlap, so shared keys carry over. Not every Card key is supported (for example, transition).

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 Coupon 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. The component's base text is 14px in #4B5563.

input: the coupon field

state.error.input styles the field while the backend has rejected the code. It accepts borderColor and color (both default #EB1431), plus backgroundColor and fontFamily (defaults: the resting values above). These are the same four properties state.error.input takes on Card and Email.

The field label is #64748B. In floating mode it moves to the top at .8rem when the field is focused or filled; in fixed mode it sits above the field at 14px, and the empty field shows the placeholder "Enter Coupon Code".

button: the Apply button

The button is 83px wide, with a 16px Helvetica Neue stack label.

chip: the applied-code chip

The applied code itself is shown in italics.

inlineError: inline validation error messages

Shown 4px below the field when the backend rejects a code. Same category name and properties as on Card and Email, so one error style block works across all three.

Deprecated: error is the old name for this category. It still applies, logs one console warning per component, and loses to inlineError when both are set. inlineError.color no longer sets the field's error border; use state.error.input.borderColor.

toggle: the coupon link

Styles the "Have a coupon code?" link shown in 'collapsed' presentation. The link is underlined and centered.

Default values per state

Out of the box, the Coupon component visually changes for hover, focus, disabled, and error.

hover

Applied when the pointer is over an element.

focus

Applied when the input has keyboard focus.

disabled

Applied during the apply or remove round-trip. The Apply button also looks disabled while the field is empty.

error

Applied when the backend rejects the code. The inlineError message appears 4px below the field.

Under error, input accepts borderColor, color, backgroundColor and fontFamily, and inlineError accepts all its properties. inlineError styling is also accepted under default; the error value wins when both are set.

Full example

sdk.components.create('fs-coupon', {
    presentation: 'expanded',
    style: {
        state: {
            default: {
                input:  { background: '#0b1220', color: '#f1f5f9', borderColor: '#283449', borderRadius: '10px', placeholderColor: '#64748b' },
                button: { background: '#6366f1', color: '#ffffff', fontWeight: '600', borderRadius: '10px' },
                chip:   { color: '#a5b4fc', iconColor: '#64748b' },
                inlineError: { color: '#fca5a5', backgroundColor: '#1f1a2e' },
                toggle: { color: '#818cf8' },
            },
            focus: { input: { borderColor: '#6366f1' } },
            error: { input: { borderColor: '#f87171', color: '#fecaca' } },
            hover: { button: { background: '#4f46e5' }, toggle: { color: '#a5b4fc' } },
            disabled: { button: { background: '#3730a3' } },
        },
    },
}).mount('#coupon-element');