# Card consent

Learn about customisation options for the card consent component.

## Styling


```typescript
const cardConsentConfig: CardConsentComponentConfig = {
  label: string,
  labelStyles: {
    checked: {
      color: string,
      fontWeight: string,
      fontSize: string
    },
    unchecked: {
      color: string,
      fontSize: string
    }
  },
  checked: boolean,
  checkedColor: string,
  tabIndex: number
};
```

| Property | Description |
|  --- | --- |
| `label`string | The text label to display next to the consent checkbox. |
| `labelStyles`object | Custom styles for the consent checkbox's label. |
| `labelStyles.checked`CssProperties | Details about the styles to apply the checkbox is checked. |
| `labelStyles.checked.color`string | The HEX colour code of the text. |
| `labelStyles.checked.fontWeight`string | The weight of the font. |
| `labelStyles.checked.fontSize`string | The size of the font. |
| `labelStyles.unchecked`CssProperties | Details about the styles to apply when the checkbox is unchecked. |
| `labelStyles.unchecked.color`string | The HEX colour code of the text. |
| `labelStyles.unchecked.fontSize`string | The size of the font. |
| `checked`boolean | The initial state of the checkbox. |
| `checkedColor`string | The HEX colour code of the checkbox, when checked. |
| `tabIndex`number | The tab index of the component. |


## Callbacks


```typescript
const cardCvcConfig: CardCvcComponentConfig = {
  onChange: (event: InputEvent) => void,
  onFocus: (event: FocusEvent) => void,
  onBlur: (event: FocusEvent) => void,
  onValidationPassed: (data: ValidationResult[]) => void,
  onValidationFailed: (data: ValidationResult[]) => void
};
```

| Callback | Description |
|  --- | --- |
| `onChange: (event: InputEvent) => void` | Event handler for when the input value changes. |
| `onFocus: (event: FocusEvent) => void` | Event handler for when the input receives focus. |
| `onBlur: (event: FocusEvent) => void` | Event handler for when the input loses focus. |
| `onValidationPassed: (data: ValidationResult[]) => void` | Event handler for when all validations pass. |
| `onValidationFailed: (data: ValidationResult[]) => void` | Event handler for when any validation fails. |


For more information about callbacks, see [Events](/guides/components/web/card/events).

## Example


```typescript
const cardConsentConfig: CardConsentComponentConfig = {
  label: "Save card for future payments",
  checked: false,
  checkedColor: "#0066cc",
  tabIndex: 4,
  labelStyles: {
    checked: {
      color: "#0066cc",
      fontWeight: "500"
    },
    unchecked: {
      color: "#666666",
      fontWeight: "normal"
    }
  },
  onChange: (event) => {
    console.log("Consent changed:", event.target.checked);
  },
  onFocus: (event) => {
    console.log("Consent focused");
  },
  onBlur: (event) => {
    console.log("Consent blurred");
  },
  onValidationPassed: (data) => {
    console.log("Consent validation passed");
  },
  onValidationFailed: (data) => {
    console.log("Consent validation failed:", data);
  }
};
```