Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Business operations
Financial services
Developer tools
All products
Home
Payments
Business operations
Home
Payments
Business operations
Financial services
Developer tools
Support
Overview
Overview
Payment Element
Quickstart
Payment Element and Card Element comparison
Migrate to the Payment Element
Elements Appearance API
Testing
No-code options
Elements
·
HomePaymentsStripe Elements

Elements Appearance API

Customize the look and feel of Elements to match the design of your site.

Stripe Elements supports visual customization, which allows you to match the design of your site with the appearance option. The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.

  1. Start by picking a theme

Get up and running right away by picking the prebuilt theme that most closely resembles your website.

  1. Customize the theme using variables

Set variables like fontFamily and colorPrimary to broadly customize components appearing throughout each Element.

  1. If needed, fine-tune individual components and states using rules

For complete control, specify custom CSS properties for individual components appearing in the Element.

The Elements Appearance API doesn’t support individual payment method Elements (such as CardElement). Use the Style object to customize your Element instead.

Themes

Start customizing Elements by picking from one of the following themes:

  • stripe
  • night
  • flat
  • none
const appearance = { theme: 'night' }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});

Variables

Set variables to affect the appearance of many components appearing throughout each Element.

The variables option works like CSS variables. You can specify CSS values for each variable and reference other variables with the var(--myVariable) syntax. You can even inspect the resulting DOM using the DOM explorer in your browser.

const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});

Commonly used variables

VariableDescription
fontFamilyThe font family used throughout Elements. Elements supports custom fonts by passing the fonts option to the Elements group.
fontSizeBaseThe font size that’s set on the root of the Element. By default, other font size variables like fontSizeXs or fontSizeSm are scaled from this value using rem units.
spacingUnitThe base spacing unit that all other spacing is derived from. Increase or decrease this value to make your layout more or less spacious.
borderRadiusThe border radius used for tabs, inputs, and other components in the Element.
colorPrimaryA primary color used throughout the Element. Set this to your primary brand color.
colorBackgroundThe color used for the background of inputs, tabs, and other components in the Element.
colorTextThe default text color used in the Element.
colorDangerA color used to indicate errors or destructive actions in the Element.

Less commonly used variables

Rules

The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components. After defining your theme and variables, use rules to seamlessly integrate Elements to match the design of your site.

const appearance = { // If you are planning to extensively customize rules, use the "none" // theme. This theme provides a minimal number of rules by default to avoid // interfering with your custom rule definitions. theme: 'none', rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});

See all rules

Other Configuration Options

In addition to themes, variables and rules, we have provided additional appearance configuration options to style Elements.

You can customize these by adding them to the appearance object:

const appearance = { labels: 'floating', // other configurations such as `theme`, `variables` and `rules`... }

We currently support the below options:

ConfigurationDescription
labelsEnables switching between labels above form fields and floating labels within the form fields; it can be either above or floating
Was this page helpful?
Questions? Contact us.
View developer tutorials on YouTube.
Check out our product changelog.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Themes
Variables
Rules
Other Configuration Options
Stripe Shell
Test mode
▗▄ ▄▟█ █▀▀ ▗▟████▙▖ ██████ ███▗▟█ ███ ███▗▟██▙▖ ▗▟█████▙▖ ███▖ ▀▀ ███ ███▀▀▀ ███ ███▀ ███ ███ ███ ▝▜████▙▖ ███ ███ ███ ███ ███ █████████ ▄▄ ▝███ ███ ▄ ███ ███ ███▄ ███ ███ ▄▄ ▝▜████▛▘ ▝▜███▛ ███ ███ ███▝▜██▛▘ ▝▜█████▛▘ ███ ▀▘
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Login to Stripe docs and press Control + Backtick on your keyboard to start managing your Stripe resources in test mode. - View supported commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g. )
The Stripe Shell is best experienced on desktop.
$