Customization

Here is the updated Markdown documentation for VaultSDKAdapterConfig, with merged Field Properties for cardNumber and cvv, and a note on the required attribute.

VaultSDKAdapterConfig

Configuration object for the Vault SDK Adapter. This interface defines how secure fields are rendered and styled.

Properties

brands: Scheme[]

• Description: List of eligible card networks (e.g., Visa, Mastercard) that the vault form should support.
• Type: Scheme[]
• Required: Yes

fields: { cardNumber?: SDKVaultFieldConfig; cvv: SDKVaultFieldConfig }

• Description: Specifies the configuration for each secure field to be rendered in the form.
• Type: Object
• Required: Yes

Field Properties (SDKVaultFieldConfig)

Property	Type	Description
target	string	ID of a element to display the field. The SDK will appendChild to it. It needs to be accessible via document.getElementById
placeholder	string	Placeholder text for the input (optional)
ariaLabel	string	Accessibility label (optional)
iframeTitle	string	Title attribute for the iframe (optional)

• cvv is required; cardNumber is optional.

styles?: { fontSrc?: string; input: StylableInputVariables & { [key in CSSPseudoClasses]?: StylableInputVariables } }

• Description: Defines the styling for the secure input fields, including font source and per-pseudo-class customizations.
• Type: Object
• Required: No

Styles Properties

• fontSrc (optional): URL to a custom font to be loaded for the input fields.
• input: Base styles for the input fields, with optional overrides for specific CSS pseudo-classes.

StylableInputVariables:

• fontFamily (string, optional)
• fontSize (string, optional)
• lineHeight (string, optional)
• fontWeight (string, optional)
• color (string, optional)
• placeholderColor (string, optional)
• backgroundColor (string, optional)

Pseudo-class overrides:

• :empty
• :focus
• :valid
• :invalid
• :autocomplete
• ::placeholder
• :brandDetected

Example:

styles: {
  fontSrc: 'https://fonts.example.com/myfont.woff2',
  input: {
    fontFamily: 'Arial, sans-serif',
    fontSize: '16px',
    color: '#333',
    ':focus': {
      color: '#0070f3',
      backgroundColor: '#e6f7ff'
    },
    '::placeholder': {
      color: '#aaa'
    }
  }
}

---

Example Usage

const config: VaultSDKAdapterConfig = {
  brands: ['visa', 'mastercard'],
  fields: {
    cardNumber: {
      target: '#card-number',
      placeholder: 'Card Number',
      ariaLabel: 'Credit Card Number',
      iframeTitle: 'Secure Card Number Input'
    },
    cvv: {
      target: '#cvv',
      placeholder: 'CVV',
      ariaLabel: 'Card Security Code',
      iframeTitle: 'Secure CVV Input'
    }
  },
  styles: {
    fontSrc: 'https://fonts.example.com/myfont.woff2',
    input: {
      fontFamily: 'Arial, sans-serif',
      fontSize: '16px',
      color: '#333',
      ':focus': {
        color: '#0070f3',
        backgroundColor: '#e6f7ff'
      },
      '::placeholder': {
        color: '#aaa'
      }
    }
  }
}

---

Note:

• All fields in fields must specify a valid target selector.
• The cvv field is required; cardNumber is optional.
• The styles object allows for granular control over the appearance of secure fields, including state-based styling via pseudo-classes.