FloPayFloPay
API Reference@flopay/shared

Constants

All constants exported by @flopay/shared, including SDK version, themes, element types, card brands, and currency mappings.

SDK Version and API

SDK_VERSION

const SDK_VERSION: string = '0.1.0';

Current SDK version string.

DEFAULT_API_BASE_URL

const DEFAULT_API_BASE_URL: string = 'https://api.flopay.io';

Default FloPay API base URL used by @flopay/node.

DEFAULT_API_VERSION

const DEFAULT_API_VERSION: string = '2024-01-01';

Default API version header value.


Themes

Six first-class theme bundles ship as paired FloPayAppearance + ButtonsLayoutStyles constants. All bundles are built around FloPay blue (#1785E0 on light bundles, #60A5FA on dark bundles for contrast). Each bundle's appearance includes rules for nested Stripe Elements (.Input, .Input:focus, .Label, .Tab, .Tab--selected).

AestheticLightDark
Modern — Inter, soft shadows, generous spacingMODERN_LIGHT_APPEARANCE + BUTTONS_LAYOUT_MODERN_LIGHTMODERN_DARK_APPEARANCE + BUTTONS_LAYOUT_MODERN_DARK
Bold — saturated FloPay blue, gradient pill submitBOLD_LIGHT_APPEARANCE + BUTTONS_LAYOUT_BOLD_LIGHTBOLD_DARK_APPEARANCE + BUTTONS_LAYOUT_BOLD_DARK
Glass — translucent surfaces with backdrop blurGLASS_LIGHT_APPEARANCE + BUTTONS_LAYOUT_GLASS_LIGHTGLASS_DARK_APPEARANCE + BUTTONS_LAYOUT_GLASS_DARK

In most code you don't need the individual constants — pass a theme value to FloPayCheckout, FloPayAutomaticPaymentButton, or SplitCardForm and the SDK resolves the bundle for you. Use the constants when you want to render a preview swatch outside the SDK, merge two themes, or pull an appearance into another design system.

Importing the bundle constants
import {
  MODERN_LIGHT_APPEARANCE,
  MODERN_DARK_APPEARANCE,
  BOLD_LIGHT_APPEARANCE,
  BOLD_DARK_APPEARANCE,
  GLASS_LIGHT_APPEARANCE,
  GLASS_DARK_APPEARANCE,
  BUTTONS_LAYOUT_MODERN_LIGHT,
  BUTTONS_LAYOUT_MODERN_DARK,
  BUTTONS_LAYOUT_BOLD_LIGHT,
  BUTTONS_LAYOUT_BOLD_DARK,
  BUTTONS_LAYOUT_GLASS_LIGHT,
  BUTTONS_LAYOUT_GLASS_DARK,
} from '@flopay/shared';

THEMES

const THEMES: Record<ThemeBundleId, ThemeBundle>;

Indexable map keyed by ThemeBundleId. Each entry is a ThemeBundle{ appearance, buttonsLayout }.

import { THEMES } from '@flopay/shared';

const glassDark = THEMES['glass-dark'];
// { appearance: FloPayAppearance, buttonsLayout: ButtonsLayoutStyles }

resolveTheme

function resolveTheme(id: ThemeId): ThemeBundle | undefined;

Resolves a ThemeId to its bundle. Returns undefined for 'classic' (the no-op marker that preserves the historic FloPay look) and for any unrecognised id.

import { resolveTheme } from '@flopay/shared';

const bundle = resolveTheme('bold-light');
if (bundle) {
  console.log(bundle.appearance.variables?.colorPrimary);
}

resolveTheme('classic'); // → undefined; SDK falls through to hardcoded defaults

Element Types

ELEMENT_TYPES

const ELEMENT_TYPES: readonly ['payment', 'card', 'cardNumber', 'cardExpiry', 'cardCvc', 'address'];

All supported element type identifiers. Used to validate element creation.


Card Brands

SUPPORTED_CARD_BRANDS

const SUPPORTED_CARD_BRANDS: readonly ['visa', 'mastercard', 'mastercard_debit', 'amex', 'discover'];

List of supported card brands.


Currency

CURRENCY_MAP

const CURRENCY_MAP: Record<string, CurrencyInfo>;

Maps ISO 3166-1 alpha-2 country codes to currency information. Includes entries for:

RegionCountriesCurrency
Eurozone + EUAT, BE, BG, CY, CZ, DE, DK, EE, ES, FI, FR, GR, HR, HU, IE, IT, LT, LU, LV, MT, NL, PL, PT, RO, SE, SI, SKEUR
United KingdomGBGBP
United StatesUSUSD
CanadaCACAD
New ZealandNZNZD
AustraliaAUAUD

Each entry is a CurrencyInfo object with currency, symbol, country, countryCode, and tax (0 or 1).

DEFAULT_CURRENCY

const DEFAULT_CURRENCY: CurrencyInfo = {
  currency: 'USD',
  symbol: '$',
  country: 'United States',
  countryCode: 'US',
  tax: 0,
};

Default currency information returned when a country is not in CURRENCY_MAP.


Countries, States & Provinces

COUNTRY_OPTIONS

const COUNTRY_OPTIONS: CountryOption[];

The full list of ISO 3166-1 alpha-2 countries used by the AVS country dropdown. Priority countries (US, GB, CA, AU, NZ, EU) appear first; the remainder are sorted alphabetically. Each entry has code, name, and flag (emoji).

Use getCountryByCode to look up a single entry.

US_STATES

const US_STATES: { code: string; name: string }[];

51 entries — all 50 US states plus District of Columbia. Codes are 2-letter USPS abbreviations (e.g. 'AL', 'CA', 'WY').

Used by the SDK to render a <select> for the AVS state field when country === 'US'.

CA_PROVINCES

const CA_PROVINCES: { code: string; name: string }[];

13 entries — all 10 Canadian provinces plus 3 territories. Codes are 2-letter ISO 3166-2:CA subdivisions (e.g. 'AB', 'ON', 'QC').

Used by the SDK to render a <select> for the AVS state field when country === 'CA'.

See getStateOptions and getStateLabel for the helpers that consume these.

On this page