Payment Card component CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

This topic provides examples of the main CSS classes/selectors you can use to customize Payment Card components.

Default player CSS

You can use the following main classes/selectors to apply additional CSS styling to this component in a flow running the default player.

Class/Selector	Description
.page-component-payment-card	The main class applied to Payment Card components. For example, to increase the padding around all Payment Card components in a flow: .page-component-payment-card {padding:15px}
.payment-card-grid-container	The main class applied to the grid container for all the input fields in this component. For example, to increase the padding in the grid: .payment-card-grid-container {padding:15px}
.payment-card-input-container	The main class applied to the input fields in this component. For example, to increase the padding for all input fields in this component: .payment-card-input-container {padding:15px}

Default legacy player CSS

This component is not supported for use with the default legacy player.