Card

The Card component (fs-card) renders the payment fields (card number, expiry, and CVV) inside a secure iframe served from FastSpring's domain. Card data never touches your origin, which keeps you out of PCI scope.

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

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

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

cardComponent.mount('#card-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 (card, input, cardTitle, etc.) that group related properties.

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

Style precedence (most specific wins):

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

Hover legacy: Use state.hover.card.backgroundColor and state.hover.card.borderColor instead of the older backgroundColorOnHover / borderColorOnHover shortcuts.

Available states

Style categories

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

card: the panel

The outer container for the card form.

cardTitle: the header title

Styles the "Card" text in the card panel header. Supports state variants: set cardTitle under state.hover, state.focus, or state.active to change the title appearance per state.

input: all input fields

Use input to style all card fields at once. To target individual fields, use cardNumber, expiry, or cvv instead; they accept the same properties.

Placeholder styling example:

input: {
    '::placeholder': {
        color: '#7D8A9B',
        fontSize: '14px',
    },
}

cardNumber, expiry, cvv: per-field overrides

Each accepts the same properties as input (above) but applies only to the named field. Useful when you want one field styled differently from the others.

cvvIcon: CVV graphic

A small graphic to the right of the CVV input. The icon is a card silhouette with a circle showing where to find the CVV code.

changeCard: "Use a different card" link

inlineError: inline validation error messages

Default values per state

Out of the box, the Card visually changes for focus, error, and active. The hover state accepts overrides but applies no default differentiation. Set it explicitly if you want a hover effect.

focus

Applied when any input inside the card has keyboard focus.

hover

Applied when the customer hovers over the card panel. SDK defaults match the default-state values. Override them to add visual differentiation.

active

Applied when the card region is clicked. Adds a blue accent to the panel border and a bolder title.

error

Applied when the card is in an error state.

state: {
  default: { card: { backgroundColor: '#1e293b' } },
  hover:   { card: { backgroundColor: '#1e293b' } },
  focus:   { card: { backgroundColor: '#1e293b' } },
  active:  { card: { backgroundColor: '#1e293b' } },
}

Full example

const cardComponent = sdk.components.create('fs-card', {
    labelMode: 'floating',
    hideCardHeader: false,

    style: {
        state: {
            default: {
                card: {
                    backgroundColor: '#ffffff',
                    border: '1px solid #DEE2E6',
                    borderRadius: '8px',
                    padding: '24px',
                    fontFamily: 'Inter, sans-serif',
                    color: '#1F2937',
                    iconColor: '#4B5563',
                },
                cardTitle: {
                    color: '#1F2937',
                    fontSize: '18px',
                    fontWeight: '600',
                },
                input: {
                    backgroundColor: '#F9FAFB',
                    borderColor: '#E5E7EB',
                    borderRadius: '6px',
                    height: '48px',
                    fontSize: '15px',
                    '::placeholder': {
                        color: '#9CA3AF',
                    },
                },
                cvvIcon: {
                    height: '28px',
                    outlineColor: '#9CA3AF',
                    accentColor: '#2563EB',
                },
                inlineError: {
                    color: '#DC2626',
                    fontSize: '13px',
                },
            },
            focus: {
                input: {
                    borderColor: '#2563EB',
                },
            },
            error: {
                input: {
                    borderColor: '#DC2626',
                },
            },
        },
    },
});

cardComponent.mount('#card-element');

Related pages

• Integration Guide: end-to-end integration walkthrough.
• Pay Button: the companion component that submits the payment.
• Disclosures: reseller disclosure block.