Styling

const cardOnFileConfig: CardOnFileComponentConfig = {
  limitTokens: number,
  filterBy: {
    excludeExpiredTokens: boolean,
    schemes: string[],
    fundingSource: string,
    issuerCountryCode: string,
    ownerType: string
  },
  orderBy: {
    expiryDate: string,
    scheme: string,
    fundingSource: string,
    ownerType: string,
    issuerCountryCode: string,
    lastUsageDate: {
      orderByField: string
    }
  },
  cardBrandImages: {
    visaSrc: string,
    mastercardSrc: string,
    amexSrc: string,
    cupSrc: string,
    dinersSrc: string,
    discoverSrc: string,
    jcbSrc: string
  },
  expiredText: string,
  validThruText: string,
  deleteModal: {
    dialogAriaLabel: string,
    bodyText: string,
    cancelButtonText: string,
    deleteButtonText: string,
    class: string
  },
  deleteErrorMessage: string,
  deleteSuccessMessage: string,
  updateErrorMessage: string,
  updateSuccessMessage: string,
  successMessageClass: string,
  errorMessageClass: string,
  isExpiryDateEditable: boolean,
  isCvcRequired: boolean,
  allowDeleteToken: boolean,
  cvcComponentConfig: CardCvcComponentConfig,
  expiryDateComponentConfig: CardExpiryDateComponentConfig,
  styles: CSSProperties,
  iconDeleteSrc: string,
  iconSaveSrc: string,
  iconCancelSrc: string,
  iconEditSrc: string,
  inputStyles: CSSProperties,
  tokenItemClass: string,
  useTransparentCardBrandImage: boolean,
  editCardInformationAriaLabel: string,
  saveCardInformationAriaLabel: string,
  cancelEditCardInformationAriaLabel: string,
  deleteCardButtonAriaLabel: string,
  cardNumberAriaLabel: string,
  cardExpiryDateAriaLabel: string,
};

Parameter	Description
`limitTokens` number	The maximum number of tokens to display in the component. For example, if set to `5` then only the first five card tokens are displayed.
`filterBy` object	Details about the filtering options.
`filterBy.excludeExpiredTokens` boolean	Whether to exclude tokens associated with expired cards.
`filterBy.schemes` string []	The list of card schemes to include. For example, `[Visa, MasterCard]`.
`filterBy.fundingSource` string	The funding source type to include. For example `Credit` or `Debit`.
`filterBy.issuerCountryCode` string	The issuer country code to include.
`filterBy.ownerType` string	The owner type to include.
`orderBy` object	Details about the ordering options.
`orderBy.expiryDate` object	Details for ordering by expiry date.
`orderBy.expiryDate.direction` string	The direction to order by. Possible values: `desc` `asc`
`orderBy.expiryDate.priority` number	The priority of the ordering option.
`orderBy.scheme` object	Details for ordering by card scheme.
`orderBy.scheme.valuesOrder` string	The card scheme.
`orderBy.scheme.priority` number	The priority of the ordering option.
`orderBy.fundingSource` object	Details for ordering by funding source.
`orderBy.fundingSource.valuesOrder` string	The funding source. Possible values: `Credit` `Debit`
`orderBy.fundingSource.priority` number	The priority of the ordering option.
`orderBy.ownerType` object	Details for ordering by owner type.
`orderBy.ownerType.valuesOrder` string	The owner type. Possible values: `Consumer` `Commercial`
`orderBy.ownerType.priority` number	The priority of the ordering option.
`orderBy.issuerCountryCode` object	Details for ordering by issuer country code.
`orderBy.issuerCountryCode.direction` string	The direction to order by. Possible values: `desc` `asc`
`orderBy.issuerCountryCode.priority` number	The priority of the ordering option.
`orderBy.lastUsageDate` object	Details for ordering by last usage date.
`orderBy.lastUsageDate.direction` string	The direction to order by. Possible values: `desc` `asc`
`orderBy.lastUsageDate.orderByField` string	The field to order by. Possible values: `lastSuccessfulPurchaseDate` `lastSuccessfulPayoutDate`
`orderBy.lastUsageDate.priority` number	The priority of the ordering option.
`cardBrandImages` object	Details about the card brand images.
`cardBrandImages.visaSrc` string	The URL for the Visa card brand image.
`cardBrandImages.mastercardSrc` string	The URL for the Mastercard card brand image.
`cardBrandImages.amexSrc` string	The URL for the Amex card brand image.
`cardBrandImages.cupSrc` string	The URL for the CUP card brand image.
`cardBrandImages.dinersSrc` string	The URL for the Diners card brand image.
`cardBrandImages.discoverSrc` string	The URL for the Discover card brand image.
`cardBrandImages.jcbSrc` string	The URL for the JCB card brand image.
`expiredText` string	The text to display for expired cards.
`validThruText` string	The text to display for the "valid thru" label.
`deleteModal` object	Configuration for the deletion modal.
`deleteModal.dialogAriaLabel` string	The aria label for the deletion modal.
`deleteModal.bodyText` string	The body text for the deletion modal.
`deleteModal.cancelButtonText` string	The cancel button text for the deletion modal.
`deleteModal.deleteButtonText` string	The delete button text for the deletion modal.
`deleteModal.class` string	The name of the class associated with the deletion modal.
`deleteErrorMessage` string	The error message to display when a card deletion fails.
`deleteSuccessMessage` string	The success message to display when a card deletion is successful.
`updateErrorMessage` string	The error message to display when a card update fails.
`updateSuccessMessage` string	The success message to display when a card update is successful.
`successMessageClass` string	The name of the CSS class to apply to success messages.
`errorMessageClass` string	The name of the CSS class to apply to error messages.
`isExpiryDateEditable` boolean	Whether the expiry date field can be edited by the cardholder.
`isCvcRequired` boolean	Whether CVC is required when selecting a token. This applies to all tokens.
`allowDeleteToken` boolean	Whether to allow cardholders to delete a token (previously saved card).
`cvcComponentConfig` CardCvcComponentConfig	Configuration for the standalone card CVC component. See Card CVC.
`expiryDateComponentConfig` CardExpiryDateComponentConfig	Configuration for the standalone card expiry date component. See Card expiry date.
`styles` CSSProperties	Custom styling.
`iconDeleteSrc` string	The URL for your custom delete icon.
`iconSaveSrc` string	The URL for your custom save icon.
`iconCancelSrc` string	The URL for your custom cancel icon.
`iconEditSrc` string	The URL for your custom edit icon.
`inputStyles` CSSProperties	Custom input styles.
`tokenItemClass` string	Custom class for the token item.
`useTransparentCardBrandImage` boolean	Whether to use transparent card brand images. Defaults to `true`.
`editCardInformationAriaLabel` string	The aria label for the edit card information button.
`saveCardInformationAriaLabel` string	The aria label for the save card information button.
`cancelEditCardInformationAriaLabel` string	The aria label for the cancel edit information button.
`deleteCardButtonAriaLabel` string	The aria label for the delete card button.
`cardNumberAriaLabel` string	The aria label for the card number.
`cardExpiryDateAriaLabel` string	The aria label for the card expiry date.

Callbacks

const cardOnFileConfig: CardOnFileComponentConfig = {
  onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => CardTokenMapping[],
  onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => void,
  onPreDeleteToken: (token: BaseCardToken) => Promise<boolean>,
  onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => void,
  onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => void,
  onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => void,
  onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => void,
  tokenItemBuilder: (elementIds: TokenBuilderElementIds) => string,
  IDs.tokenLabelBuilder: (token: BaseCardToken) => string
}

Callback	Description
`onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => CardTokenMapping[]`	Event handler for pre-processing tokens before rendering. Allows custom filtering and mapping of token data.
`onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => void`	Event handler for when token retrieval from the API fails.
`onPreDeleteToken: (token: BaseCardToken) => Promise<boolean>`	Event handler for before token deletion. Return `true` to proceed, `false` to cancel.
`onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => void`	Event handler for after a token is successfully deleted.
`onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => void`	Event handler for when token deletion fails.
`onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => void`	Event handler for after a token is successfully updated.
`onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => void`	Event handler for when a token update fails.
`tokenItemBuilder: (elementIds: TokenBuilderElementIds) => string`	Custom HTML builder for token item layout. Returns an HTML string with a specific element.
`IDs.tokenLabelBuilder: (token: BaseCardToken) => string`	Custom label builder for token display text.

ℹ️
For more information about callbacks, see Events.

Example

const cardOnFileConfig: CardOnFileComponentConfig = {
  limitTokens: 5,
  filterBy: {
    excludeExpiredTokens: true,
    schemes: ["Visa", "MasterCard"],
    fundingSource: "Credit",
    issuerCountryCode: "USA",
    ownerType: "Consumer"
  },
  orderBy: {
    expiryDate: { 
      direction: "asc",
      priority: 1
    },
    scheme: { 
      valuesOrder: ["Visa", "MasterCard", "Amex"],
      priority: 2
    },
    fundingSource: { 
      valuesOrder: ["Credit", "Debit"],
      priority: 3
    },
    ownerType: { 
      valuesOrder: ["Consumer", "Commercial"],
      priority: 4
    },
    issuerCountryCode: { 
      direction: "desc",
      priority: 5
    },
    lastUsageDate: { 
      direction: "desc",
      orderByField: "lastSuccessfulPurchaseDate",
      priority: 6
    }
  },
  cardBrandImages: {
    visaSrc: "https://example.com/visa-logo.png",
    mastercardSrc: "https://example.com/mastercard-logo.png",
    amexSrc: "https://example.com/amex-logo.png"
  },
  expiredText: "Card expired",
  validThruText: "Valid until",
  deleteModal: {
    dialogAriaLabel: "Delete card dialog",
    bodyText: "Are you sure you want to delete this payment method?",
    cancelButtonText: "No, keep it",
    deleteButtonText: 'Yes, delete it',
    class: "custom-modal-class"
  },
  deleteErrorMessage: "Unable to delete card. Please try again.",
  deleteSuccessMessage: "Card has been removed successfully.",
  updateErrorMessage: "Unable to update card information. Please try again.",
  updateSuccessMessage: "Card information updated successfully.",
  successMessageClass: "alert alert-success",
  errorMessageClass: "alert alert-danger",
  isExpiryDateEditable: true,
  isCvcRequired: true,
  allowDeleteToken: true,
  cvcComponentConfig: {
    required: true,
    label: "Security code",
    applyMask: true,
    showMaskToggle: true,
    labelPosition: "left",
    errorMessage: "Please enter a valid security code",
    inputStyles: {
      base: {
        color: "#333",
        fontSize: "16px"
      }
    }
  },
  expiryDateComponentConfig: {
    label: "Expiry date",
    labelPosition: "left",
    formatOptions: "MM/YY",
    inputStyles: {
      base: {
        color: "#333",
        fontSize: "16px"
      }
    }
  },
  styles: {
    backgroundColor: "#f8f9fa",
    border: "1px solid #dee2e6",
    borderRadius: "8px",
    padding: "20px"
  },
  iconDeleteSrc: "http://example.com/delete.jpg",
  iconSaveSrc: "http://example.com/save.jpg",
  iconCancelSrc: "http://example.com/cancel.jpg",
  iconEditSrc: "http://example.com/edit.jpg",
  inputStyles: {
    borderRadius: "5px",
    backgroundColor: "grey"
  },
  tokenItemClass: "custom-token-item-class",
  useTransparentCardBrandImage: true,
  editCardInformationAriaLabel: "Edit card information button",
  saveCardInformationAriaLabel: "Save card information button",
  cancelEditCardInformationAriaLabel: "Cancel edit card information button",
  deleteCardButtonAriaLabel: "Delete card button",
  cardNumberAriaLabel: "Card number",
  cardExpiryDateAriaLabel: "Card expiry date",
  onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => {
    return data.gatewayTokens
      .filter(token => token.issuerCountryCode === 'USA')
      .map(token => ({
        id: token.gatewayTokenId,
        isCvcRequired: true
    }));
  },
  onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => {
    console.error('Failed to retrieve tokens:', data.errorMessage);
    showErrorMessage('Unable to load saved cards');
  },
  onPreDeleteToken: (token: BaseCardToken) => {
    return new Promise((resolve) => {
      const confirmed = confirm(`Are you sure you want to delete card ending in ${token.maskedPrimaryAccountNumber.slice(-4)}?`);
        resolve(confirmed);
    });
  }, 
  onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => {
    console.log('Token deleted successfully:', data);
    showSuccessMessage('Card removed successfully');
    refreshTokenList();
  },
  onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => {
    console.error('Delete failed:', data);
    showErrorMessage('Failed to delete card. Please try again.');
  },
  onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => {
    console.log('Token updated successfully:', data);
    showSuccessMessage('Card information updated');
  },
  onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => {
    console.error('Update failed:', data);
    showErrorMessage('Failed to update card information');
  }
};