# API Reference

Supported Gateways

See the list of gateways supported by Hosted Components & Fields and ensure that yours is supported.

# Chargebee object

# init

This function is used to initialize Chargebee with your site, domain name and publishable key (opens new window). The 'chargebee instance' object returned as result of initialization can be used to create the components.

# Syntax

Chargebee.init(options);
1

# Parameters

options
Object Required Hide properties
site
String Required
Your site name.
domain
String Required if custom domain is enabled
Your custom domain.
Eg: https://billing.yourdomain.com
publishableKey
String Required
Your publishable API key.
businessEntityId
String
The unique ID of the business entity under whose context the cart object or the drop-in script should work.
If not provided, the default business entity defined for the site is considered.
Note:
  • This parameter is applicable only when multiple business entities have been created for the site.
  • Multiple Business Entities is currently in early access. Contact eap@chargebee.com to join the Early Adopter Program and enable this feature.

# Return value

Chargebee instance object

# Example

var cbInstance = Chargebee.init({
  site: "site-name", // your test site
  domain: "https://mybilling.acme.com" // this is an optional parameter.
  publishableKey: "test__"
})
1
2
3
4
5


# getInstance

This function will return 'chargebee instance' object.

# Syntax

Chargebee.getInstance();
1

# Return value

Chargebee instance object

Error will be thrown if instance is not created.

# Chargebee instance object

Chargebee instance object is used to create components and tokenize card information.

# load

This function is used to load the given module. Currently there is only one module, we will be adding more modules to support different functionality soon.

All components/fields functionality can be used only when module "components" is loaded. If you are using our wrappers, we will take care of loading the module, otherwise register the components after the promise is resolved

# Syntax

cbInstance.load(moduleName);
1

# Parameters

moduleName
String Required
Name of the module to load.
Allowed Values:
components
3ds-handler
functions
ideal
sofort
google-pay
bancontact
giropay
dotpay
paypal
netbanking_emandates
apple-pay
upi

# Return value

Promise that resolves after that corresponding module has been loaded

# Example

cbInstance.load("components").then(() => {
  // components can be mounted
});
1
2
3


# createComponent

This function is used to create a component based on the componentType and the options passed. Currently we support only the creation of card components, we will start supporting other component types soon.

# Syntax

cbInstance.createComponent(componentType, options);
1

# Parameters

componentType
String Required
Allowed Values:
card
options
Object Hide properties
currency
String
Currency code in ISO 4217 format (USD, EUR). By default, base currency code will be used
icon
Boolean
Card type icon
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
placeholder
Object Hide properties
Placeholder texts for number, cvv & expiry fields.
number
string
Given text will be applied as a placeholder for card number field.
expiry
string
Given text will be applied as a placeholder for card expiry field.
cvv
string
Given text will be applied as a placeholder for CVV field.
ariaLabel
Object Hide properties
Labels to be read out by the screen reader for accessibility purpose.
number
string
For the card number field, text given here is read out by the screen reader for accessibility purpose.
expiry
string
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
cvv
string
For the CVV field, text given here is read out by the screen reader for accessibility purpose.
classes
Object Hide properties
Class names that will be added to all container div elements for different states. Using this you can customize our components for different states.
focus
String
Pass the class name that will be applied during field focus.
empty
String
Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
invalid
String
Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
complete
String
Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
fonts
Array<Object | String>
Define the list of font definitions or font URLs
Object Hide properties
Font definition that will be used in our components
fontFamily
cssProperty Required
Font name
src
cssProperty Required
Source URL. Google Web Font or Typekit Web Font URL
fontStyle
cssProperty
fontWeight
cssProperty
String
Web font URL (Either Google Web Font or Typekit Web Font)
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
showTestCards
Boolean
Use this flag to show the test cards for sandbox environments while testing payment workflows for card-based payments.

# Return value

Card component object

# Example

cbInstance.createComponent("card", {
  placeholder: {
    number: "Number",
    expiry: "Expiry",
    cvv: "CVV",
  },
  classes: {
    focus: "focus",
    invalid: "invalid",
    empty: "empty",
    complete: "complete",
  },
  style: {
    // override styles for default state
    base: {
      color: "#333",
      fontWeight: "500",
      fontFamily:
        "Lato, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif",
      fontSize: "16px",
      fontSmoothing: "antialiased",
      ":focus": {
        color: "#424770",
      },

      "::placeholder": {
        color: "transparent",
      },

      ":focus::placeholder": {
        color: "#7b808c",
      },
      ":-webkit-autofill": {
        webkitTextColor: "#333",
      },
    },

    invalid: {
      color: "#e41029",

      ":focus": {
        color: "#e44d5f",
      },
      "::placeholder": {
        color: "#FFCCA5",
      },
    },
  },

  fonts: ["https://fonts.googleapis.com/css?family=Lato:400,700"],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


# tokenize

Send the card details to the payment gateway for tokenization. The payment gateway configured for the business entity (opens new window) specified during init() (opens new window) is selected here.

Note

The generated temporary token expires after 30 minutes.

# Syntax

cbInstance.tokenize(component, additionalData);
1

# Parameters

component
Pass card component object or component type for which you want to get Chargebee token
object
Allowed Values:
Card component object
additionalData
Data that is collected at your end.
object
For card component, you can pass additional information like firstName, lastName. Chargebee will generate temporary token for all these details along with the card information collected via our components.
firstName
string
First name.
lastName
string
Last name.
addressLine1
string
Billing address line 1.
addressLine2
string
Billing address line 2.
city
string
City.
state
string
State.
stateCode
string
State code.
zip
string
Zip
countryCode
string
2 letter country code.

# Return value

Promise that resolves to a Chargebee nonce (temp token) object.

# Example

let cardComponent = cbInstance.createComponent("card");
cbInstance
  .tokenize(cardComponent, {
    firstName: "John",
    lastName: "Doe",
    addressLine1: "1600 Amphitheatre Parkway",
    addressLine2: "<replace with sample>",
    city: "Mountain View",
    state: "California",
    stateCode: "CA",
    zip: "94039",
    countryCode: "US",
  })
  .then((data) => {
    console.log("chargebee token", data.token);
  })
  .catch((error) => {
    console.log(error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Sample Response

{
  "token": "cb_XAKJhqUVXuhyiJRYgLQSakdkNQad"
}
1
2
3

# Card component object

Card component object is used to specify where the components should be mounted and add listeners for various events.

# at

This is needed only if you are using the card component in the Default mode. This function is used to specifiy container element where the component will be mounted. Accepts either the CSS selector or a DOM Element.

# Syntax

cardComponent.at(domElement);
1

# Return value

Returns the object itself.

# Example

cardComponent.at("#card-field");
1


# createField

If you want to display the card component in Fields mode, you need to use this method to create number, cvv and expiry fields. You can pass options to override options passed at the component level.

# Syntax

cardComponent.createField(fieldType, options);
1

# Parameters

fieldType
String Required
Allowed Values:
number
cvv
expiry
options
Object Hide properties
placeholder
String
Placeholder text for the corresponding input field.
ariaLabel
String
Label to be read out by the screen reader for accessibility purpose.
icon
Boolean
Card type icon
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty

# Return value

Field object.

# Example

cardComponent.createField("number", {
  placeholder: "4111 1111 1111 1111",
  styles: {
    // override styles for default state
    base: {
      color: "#333",
      fontWeight: "500",
      fontFamily:
        "Poppins,-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif",
      fontSize: "16px",
      fontSmoothing: "antialiased",
      ":focus": {
        color: "#424770",
      },

      "::placeholder": {
        color: "transparent",
      },

      ":focus::placeholder": {
        color: "#7b808c",
      },
    },

    invalid: {
      color: "#e41029",

      ":focus": {
        color: "#e44d5f",
      },
      "::placeholder": {
        color: "#FFCCA5",
      },
    },
  },
});

cardComponent.createField("cvv");
cardComponent.createField("expiry");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


# mount

Our components will be inserted into the DOM and will be ready for collecting card details only after this method gets called. The container element for mounting can also be specified here. Accepts either a DOM Element or a CSS Selector

# Syntax

cardComponent.mount("#card-component");
1

# Return value

Returns a promise that resolves after successfully mounting the component.



# on

This function is used to attach listeners to the card component. In Default mode, focus, blur, ready, and change events can be attached. In Fields mode only ready and change events can be attached.

# Syntax

cardComponent.on(eventType, callbackFunction);
1

# Parameters

eventType
String Required
Allowed Values:
ready
focus
blur
change
callbackFunction
Function Required
Function that will be called when the corresponding event fires.
Other than ready event, all callback functions will get the current state as argument, with the following properties,
  • field String
    Corresponding field type
  • type String
    Event type for which the callback got triggered
  • complete Boolean
    This will be true, if the fields are filled completely
  • error Object
    If the component has any validation errors, the corresponding error message and error code are passed {name, message}
  • cardType String
    Card number type
    Example values are: mastercard, visa, amex, etc.
  • empty Boolean
    If the component is empty

# Return value

Returns the object itself.

# Example

cardComponent.on("ready", () => {
  console.log("field is ready to collect data");
});
cardComponent.on("focus", () => {
  // Triggered when field is focused
});
cardComponent.on("blur", () => {
  // Triggered when field is blurred
});
cardComponent.on("change", (currentState) => {
  // This event will be triggered whenver the state changes from "empty" -> "complete" -> "valid / invalid"
  // The validation errors for this field can be checked here
  console.log(currentState.error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14


# tokenize

Send the card details to the payment gateway for tokenization. The payment gateway configured for the business entity (opens new window) specified during init() (opens new window) is selected here.

Note

The generated temporary token expires after 30 minutes.

# Syntax

cardComponent.tokenize(additionalData);
1

# Parameters

additionalData
Object Hide properties
Additional information that you collect as part of card details can be passed. These information will be used while creating a payment source for the customer.
firstName
string
First name.
lastName
string
Last name.
addressLine1
string
Billing address line 1.
addressLine2
string
Billing address line 2.
city
string
City.
state
string
State.
stateCode
string
2 letter state code.
zip
string
Zip
countryCode
string
2 letter country code.

# Return value

Promise that resolves to a Chargebee nonce (temp token) object.

# Example

let cardComponent = cbInstance.createComponent("card");
cardComponent.tokenize({
  firstName: "John",
  lastName: "Doe",
  billingAddr1: "1600 Amphitheatre Parkway",
  billingCity: "Mountain View",
  billingState: "California",
  billingStateCode: "CA",
  billingZip: "94039",
  billingCountry: "United States",
}).then((data) {
  console.log('Chargebee token', data.token);
}).catch(error) {
  console.log(error);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# authorizeWith3ds

A paymentIntent needs to be created before using this method. Click here to know more

This function is used to initiate 3DS Authorization against the card details entered in the card component fields. After a successful 3DS flow, the payment intent passed will change to authorized state. The paymentIntent ID can then be used to create a payment source (opens new window) or create a subscription (opens new window).

This method internally uses the 3DS Helper provided by Chargebee.

# Syntax

cardComponent.authorizeWith3ds(paymentIntent, additionalData, callbacks);
1

# Parameters

paymentIntent
Object Required
Pass the payment intent object.
additionalData
Object Hide properties
Additional information that needs to be passed for improving the chances of frictionless checkout flow.
plan
String
Plan name
billingAddress
Object Hide properties
Card Billing Address
firstName
String Required if Worldpay gateway is used
First name associated with billing address
lastName
String
Last name associated with billing address
phone
String
Phone number associated with the billing address
addressLine1
String
Billing address line 1 (eg. number, street, etc).
addressLine2
String
Billing address line 2 (eg. suite, apt #, etc.).
addressLine3
String
Billing address line 3 (eg. suite, apt #, etc).
city
String
City or locality name
state
String
State
stateCode
String
2 letter code for US states or equivalent
countryCode
String
2 letter country code
zip
String
Zip code or postal code
customerBillingAddress
Object Hide properties
Customer's Billing Address
firstName
String Required if Worldpay gateway is used
First name associated with billing address
lastName
String
Last name associated with billing address
phone
String
Phone number associated with the billing address
addressLine1
String
Billing address line 1 (eg. number, street, etc).
addressLine2
String
Billing address line 2 (eg. suite, apt #, etc.).
addressLine3
String
Billing address line 3 (eg. suite, apt #, etc).
city
String
City or locality name
state
String
State
stateCode
String
2 letter code for US states or equivalent
countryCode
String
2 letter country code
zip
String
Zip code or postal code
shippingAddress
Object Hide properties
Shipping Address
firstName
String Required if Worldpay gateway is used
First name associated with shipping address
lastName
String
Last name associated with shipping address
phone
String
Phone number associated with the shipping address
addressLine1
String
Shipping address line 1 (eg. number, street, etc).
addressLine2
String
Shipping address line 2 (eg. suite, apt #, etc.).
addressLine3
String
Shipping address line 3 (eg. suite, apt #, etc).
city
String
City or locality name
state
String
State
stateCode
String
2 letter code for US states or equivalent
countryCode
String
2 letter country code
zip
String
Zip code or postal code
email
String Required if Worldpay gateway is used
Mail ID of the customer.
phone
String
Phone number
mandate
Object Hide properties
Enabling this parameter will request Additional Factor Authentication (AFA) and mandate setup to the gateway. Applicable only for cards issued in India.
requireMandate
Boolean
Set the value as `true` to create a mandate. The default value is `false`.
description
String
Send the plan name in this description. This plan name will appear on the AFA page.
callbacks
Object Hide properties
Callbacks to be used for this operation.
change
Function
This function will be called during each step of 3DS flow
success
Function
This function will be called if 3DS Authorization is successful
error
Function
This function will be called if 3DS Authorization has failed
challenge
Function
When this callback is implemented, the transaction will proceed in a redirect workflow if supported by the gateway. This callback function will be called with a redirect URL when the 3DS transaction requires a challenge. This workflow is currently supported by Adyen, Braintree and Stripe payment gateways.

# Return value

Promise that resolves to authorized payment intent object.

# getBinData

This method is used to access the BIN information of the card number entered in the card fields. The BIN data is returned only if the card number entered in the card number field is valid. In order to access BIN data, the domain where Chargebee.js is integrated has to be added to the domain allowed list in Chargebee settings.

Configure Chargebee > Checkout & Self-Serve Portal > Advanced Settings > Add domains

# Return value

BIN data or undefined

{
  "bin": "411111", // First 6 digits
  "last4": "1111" // Last 4 digits
}
1
2
3
4

# get3DSHandler

This method is used to retrieve Chargebee.js 3DS payment handler instance. This method can be accessed only after the 3DS payment transaction has been initiated with authoriseWith3ds method.

# Return value

3DS handler instance

# Example

cardComponent
  .authorizeWith3ds({
    callbacks: {
      challenge: (redirect_url) => {
        // Present challenge URL to user in an iframe or popup window
        window.open(redirect_url, "_blank");
      },
    },
  })
  .then((intent) => {
    console.log("success");
  })
  .catch((error) => {
    console.error(error);
  });

function onWindowClose() {
  // Call this method when user closes the popup window / iframe
  const threeDSHandler = cardComponent.get3DSHandler();
  threeDSHandler.cancel();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Card field object

Card field object is used to specify where the fields should be mounted and add event listeners at the individual field level.

let numberField = cardComponent.createField("number");
let expiryField = cardComponent.createField("expiry");
let cvvField = cardComponent.createField("cvv");
1
2
3

# at

This function is used to specifiy container element where the field will be mounted. Accepts either the DOM element or the CSS Selector

# Syntax

numberField.at(domElement);
1

# Return value

Returns the object itself.

# Example

cvvField.at("#cvv-field");
1


# on

This function is used to attach event listener for focus, blur, change and ready events.

# Syntax

numberField.on("change", callbackFunction);
1

# Parameters

eventType
String Required
Allowed Values:
ready
focus
blur
change
callbackFunction
Function Required
Function that will be called when the corresponding event fires.
Other than ready event, all callback functions will get the current state as argument, with the following properties,
  • field String
    Corresponding field type
  • type String
    Event type for which the callback got triggered
  • complete Boolean
    This will be true, if the fields are filled completely
  • error Object
    If the component has any validation errors, the corresponding error message and error code are passed {name, message}
  • cardType String
    Card number type
    Example values are: mastercard, visa, amex, etc.
  • empty Boolean
    If the component is empty
// sample status object for change event on number field with error
{
  type: "change" // event type
  field: "number" // field type
  cardType: "visa"
  complete: false
  empty: false
  error: { // Validation error object
    name: "CARD_NUMBER_INCOMPLETE",
    message: "Invalid card"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# Return value

Returns the object itself.

# Example

numberField.on("ready", () => {
  console.log("field is ready to collect data");
});
numberField.on("focus", () => {
  // Triggered when field is focused
});
numberField.on("blur", () => {
  // Triggered when field is blurred
});
numberField.on("change", (currentState) => {
  // This event will be triggered whenver the state changes from "empty" -> "complete" -> "valid / invalid"
  // The validation errors for this field can be checked here
  console.log(currentState.error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Validation error object

Whenever validation error happens, we pass the below error object to the callback function attached to change event.

errorCode
String
Allowed Values:
card_number_invalid
card_number_incomplete
invalid_card
card_expiry_past
card_expiry_invalid
card_expiry_incomplete
card_cvv_incomplete
card_cvv_invalid
message
String
Corresponding error message based on the locale set. If you want to display error message, you can customize based on error codes.

# Chargebee JS wrappers

# Angular

The card component and its fields are available as directives(cbCardField, cbNumberField, cbExpiryField, cbCvvField) in Angular wrapper (opens new window).

# Card Component directive

The following attributes can be set to the card component directive cbCardField

fonts
Array<Object | String>
Define the list of font definitions or font URLs
Object Hide properties
Font definition that will be used in our components
fontFamily
cssProperty Required
Font name
src
cssProperty Required
Source URL. Google Web Font or Typekit Web Font URL
fontStyle
cssProperty
fontWeight
cssProperty
String
Web font URL (Either Google Web Font or Typekit Web Font)
classes
Object Hide properties
Class names that will be added to all container div elements for different states. Using this you can customize our components for different states.
focus
String
Pass the class name that will be applied during field focus.
empty
String
Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
invalid
String
Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
complete
String
Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
placeholder
Object Hide properties
Placeholder texts for number, cvv & expiry fields.
number
string
Given text will be applied as a placeholder for card number field.
expiry
string
Given text will be applied as a placeholder for card expiry field.
cvv
string
Given text will be applied as a placeholder for CVV field.
ariaLabel
Object Hide properties
Labels to be read out by the screen reader for accessibility purpose.
number
string
For the card number field, text given here is read out by the screen reader for accessibility purpose.
expiry
string
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
cvv
string
For the CVV field, text given here is read out by the screen reader for accessibility purpose.

# Example:

...
<div
  cbCardField
  id="card-field"
  [fonts]="fonts"
  [styles]="styles"
  [locale]="locale"
  [classes]="classes"
  [placeholder]="placeholder"
></div>
...
1
2
3
4
5
6
7
8
9
10
11
export class AppComponent {
  ...
  styles = {
    // Styles for default field state
    base: {
      color: '#333',
      fontWeight: '500',
      fontFamily: 'Lato, Segoe UI, Helvetica Neue, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',

      ':focus': {
        color: '#424770',
      },

      '::placeholder': {
        color: 'transparent',
      },

      ':focus::placeholder': {
        color: '#7b808c',
      },
    },

    // Styles for invalid field state
    invalid: {
      color: '#e41029',

      ':focus': {
        color: '#e44d5f',
      },
      '::placeholder': {
        color: '#FFCCA5',
      },
    }
  };

  // Custom fonts
  fonts = [
    'https://fonts.googleapis.com/css?family=Lato:400,700'
  ];

  // Custom placeholder
  placeholder = {
    number: '4111 1111 1111 1111',
    expiry: 'MM / YY',
    cvv: 'CVV'
  };

  // Custom classes
  classes = {
    focus: 'focus',
    invalid: 'invalid',
    empty: 'empty',
    complete: 'complete',
  };

  // Locale
  locale = 'en';
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# Attaching event listeners

The following events can be attached to the card component directive cbCardField

  • ready
  • focus
  • blur
  • change

# Example

<div
  id="card-field"
  cbCardField
  class="fieldset field"
  (ready)="onReady($event)"
  (focus)="onFocus($event)"
  (blur)="onBlur($event)"
  (change)="onChange($event)"
></div>
1
2
3
4
5
6
7
8
9

# Field directives

The following attributes can be set to the field directives cbNumberField, cbExpiryField, cbCvvField

placeholder
String
Placeholder text for the corresponding input field.
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty

# Attaching event listeners

The following events listeners can be attached to the card component directive cbCardField

  • ready
  • focus
  • blur
  • change

# Example

<div
  id="card-number"
  cbNumberField
  class="fieldset field"
  (ready)="onReady($event)"
  (focus)="onFocus($event)"
  (blur)="onBlur($event)"
  (change)="onChange($event)"
></div>
1
2
3
4
5
6
7
8
9

# React

The following components are available in React wrapper (opens new window): CardComponent, CardNumber, CardExpiry, CardCVV.

# Card Component

The following props can be passed to the card Component CardComponent

fonts
Array<Object | String>
Define the list of font definitions or font URLs
Object Hide properties
Font definition that will be used in our components
fontFamily
cssProperty Required
Font name
src
cssProperty Required
Source URL. Google Web Font or Typekit Web Font URL
fontStyle
cssProperty
fontWeight
cssProperty
String
Web font URL (Either Google Web Font or Typekit Web Font)
classes
Object Hide properties
Class names that will be added to all container div elements for different states. Using this you can customize our components for different states.
focus
String
Pass the class name that will be applied during field focus.
empty
String
Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
invalid
String
Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
complete
String
Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
placeholder
Object Hide properties
Placeholder texts for number, cvv & expiry fields.
number
string
Given text will be applied as a placeholder for card number field.
expiry
string
Given text will be applied as a placeholder for card expiry field.
cvv
string
Given text will be applied as a placeholder for CVV field.
ariaLabel
Object Hide properties
Labels to be read out by the screen reader for accessibility purpose.
number
string
For the card number field, text given here is read out by the screen reader for accessibility purpose.
expiry
string
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
cvv
string
For the CVV field, text given here is read out by the screen reader for accessibility purpose.

# Example

<CardComponent
  className="field"
  ref={this.CardRef}
  icon={false}
  fonts={fonts}
  classes={classes}
  locale={locale}
  styles={styles}
  placeholder={placeholder}
/>
1
2
3
4
5
6
7
8
9
10

# Attaching event listeners

The following events listeners can be attached to card component CardComponent

  • ready
  • focus
  • blur
  • change

# Example

<CardComponent
  className="field"
  ref={this.CardRef}
  onReady={this.onReady}
  onFocus={this.onFocus}
  onBlur={this.onBlur}
  onChange={this.onChange}
/>
1
2
3
4
5
6
7
8

# Card Field Components

The following props can be passed to the field Components CardNumber, CardExpiry, CardCVV

placeholder
String
Placeholder text for the corresponding input field.
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty

# Example

<CardNumber
  className="field"
  icon={false}
  styles={styles}
  placeholder={"4242 4242 4242 4242"}
/>
1
2
3
4
5
6

# Attaching event listeners

The following events listeners can be attached to card fields

  • ready
  • focus
  • blur
  • change

# Example

<CardNumber
  className="field"
  onReady={this.onReady}
  onFocus={this.onFocus}
  onBlur={this.onBlur}
  onChange={this.onChange}
/>
1
2
3
4
5
6
7

# Vue

The following components are available in Vue wrapper (opens new window): CardComponent, CardNumber, CardExpiry, CardCVV

# Card Component

The following props can be passed to the card Component CardComponent

fonts
Array<Object | String>
Define the list of font definitions or font URLs
Object Hide properties
Font definition that will be used in our components
fontFamily
cssProperty Required
Font name
src
cssProperty Required
Source URL. Google Web Font or Typekit Web Font URL
fontStyle
cssProperty
fontWeight
cssProperty
String
Web font URL (Either Google Web Font or Typekit Web Font)
classes
Object Hide properties
Class names that will be added to all container div elements for different states. Using this you can customize our components for different states.
focus
String
Pass the class name that will be applied during field focus.
empty
String
Pass the class name that will be applied when the field is empty. This will be applied only after blur event is fired on the field.
invalid
String
Pass the class name that will be applied when the field is invalid. This will be applied only after blur event is fired on the field.
complete
String
Pass the class name that will be applied when the field is complete. This will be applied only after blur event is fired on the field.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
placeholder
Object Hide properties
Placeholder texts for number, cvv & expiry fields.
number
string
Given text will be applied as a placeholder for card number field.
expiry
string
Given text will be applied as a placeholder for card expiry field.
cvv
string
Given text will be applied as a placeholder for CVV field.
ariaLabel
Object Hide properties
Labels to be read out by the screen reader for accessibility purpose.
number
string
For the card number field, text given here is read out by the screen reader for accessibility purpose.
expiry
string
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
cvv
string
For the CVV field, text given here is read out by the screen reader for accessibility purpose.

# Example

<card-component
  class="fieldset"
  ref="cardComponent"
  :fonts="fonts"
  :styles="styles"
  :locale="locale"
  :classes="classes"
  :icon="icon"
  :placeholder="placeholder"
></card-component>
1
2
3
4
5
6
7
8
9
10

# Attaching event listeners

The following events listeners can be attached to card component CardComponent

  • ready
  • focus
  • blur
  • change

# Example

<card-component
  class="fieldset"
  ref="cardComponent"
  @ready="onReady"
  @change="onChange"
  @focus="onFocus"
  @blur="onBlur"
></card-component>
1
2
3
4
5
6
7
8

# Card Field Components

The following props can be passed to the field Components CardNumber, CardExpiry, CardCVV

placeholder
String
Placeholder text for the corresponding input field.
style
Object Hide properties
Inline styles that needs to be applied to all input fields.
base
Object Hide properties
Pass the set of css properties that needs to be applied on default state.
color
cssProperty
lineHeight
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
empty
Object Hide properties
Pass the set of css properties that needs to be applied on empty state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty
invalid
Object Hide properties
Pass the set of css properties that needs to be applied on invalid state
color
cssProperty
letterSpacing
cssProperty
textAlign
cssProperty
textTransform
cssProperty
textDecoration
cssProperty
textShadow
cssProperty
fontFamily
cssProperty
fontWeight
cssProperty
fontSize
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontSmoothing
cssProperty
fontStyle
cssProperty
fontVariant
cssProperty
:focus
Object Hide properties
color
cssProperty
fontSize
cssProperty
iconColor
cssProperty
::placeholder
Object Hide properties
color
cssProperty
fontSize
cssProperty
::selection
Object Hide properties
color
cssProperty
backgroundColor
cssProperty
background
cssProperty
:-webkit-autofill
Object Hide properties
color
cssProperty
webkitTextColor
cssProperty
:focus::placeholder
Object Hide properties
color
cssProperty
iconColor
cssProperty

# Example

<card-number
  class="fieldset"
  :styles="styles"
  :classes="classes"
  :placeholder="placeholder"
></card-number>
1
2
3
4
5
6

# Attaching event listeners

The following events listeners can be attached to card fields

  • ready
  • focus
  • blur
  • change

# Example

<card-number
  class="fieldset"
  @ready="onReady"
  @change="onChange"
  @focus="onFocus"
  @blur="onBlur"
></card-number>
1
2
3
4
5
6
7