Component Customization
Every component takes in an object which has options to control the behaviour and the look and feel of the component. Using the right parameters in options you can make sure the component matches the look of your web application.
Usage
let options = {}
let cardNumber = cashfree.create("cardNumber", options);
cardNumber.mount("#cardnumber")
The option object
let options = {
classes: {},
fonts: [],
style: {},
values:{},
disabled: false,
loader: true,
};
classes
Type: object
You can use classes which is an object that will have names of classes. The classes you specify will be applied to DOM container where the component is mounted. You have to make sure that these are present in your application css .
Important
Please note that you do not have to add the classes to your DOM container. The sdk will do it when required
Default values
{
base: "cf-base-private",
complete: "cf-complete-private",
empty: "cf-empty-private",
focus: "cf-focus-private",
invalid: "cf-invalid-private",
disabled: "cf-disabled-private",
}
base
The string you provide as a value of base will be applied to the container. This is the base class. If you do not provide a value of base, default value of cf-base-private will be applied
Example
Your js file
let options = {
classes: {
base: "my-base"
}
}
Your css file
.my-base{
padding: 5px;
}
Your HTML
<div class="base" id="mount-here"></div>
In this case a padding of 5px will be added to your container once a component is mounted
complete
A complete class will be applied to the container when the component you have mounted has been completed by the customer. This is relevant for example in card number input box when the user has entered a valid card number you would want to make the border of your container green. Default is cf-complete-private.
Please note that not all components will have apply a complete class to your container.
Example
Your js file
let options = {
classes: {
complete: "my-complete"
}
}
Your css file
.my-complete{
border: 1px solid green;
}
Combining example of base and complete you can figure out that when the component is complete it will have two classes so css of both of the classes wil be applied which are
padding: 5px;
border: 1px solid green;
empty
An empty class will be applied to the container when the component being mounted is empty. Example would be card number not yet entered by the user means that the card number component will be empty and the empty class that you have specified will be applied. Default is cf-empty-private
Example
Your js file
let options = {
classes: {
empty: "my-empty"
}
}
Your css file
.my-empty{
box-shadow: 1px 1px 4px gray;
}
When empty a box-shadow will appear in your container
focus
This will be applied to your container when the element inside is focussed. Example would be user has focussed on the card number input area. Default is cf-focus-private
Example
Your js file
let options = {
classes: {
focus: "my-focus"
}
}
Your css file
.my-empty{
transform: translateY(-5px)
}
When focussed the container will move up by 5px
invalid
This will be applied when the component inside is invalid. For example the user has entered a wrong card number. Default is cf-invalid-private
Example
Your js file
let options = {
classes: {
invalid: "my-invalid"
}
}
Your css file
.my-empty{
border: 1px solid red;
}
When invalid the container will have a red border
disabled
This will be applied when you want the component inside the container to be disabled. Default is cf-disabled-private
Example
Your js file
let options = {
classes: {
disabled: "my-disabled"
}
}
Your css file
.my-disabled{
opacity: 0.8;
}
When disabled your container will be dimmer
fonts
Type: array
Using fonts you can make sure that the text inside component has the same font as your web application.
Default value
[]
There are two ways to specify fonts
- Using a absolute URL to a css file with @font-face definitions.F or example:
https://fonts.googleapis.com/css?family=Open+Sans
Example
let options = {
fonts: [{
cssSrc: 'https://fonts.googleapis.com/css?family=Open+Sans'
}]
}
- Using a absolute URL for a font file along with other parameters
Example
let options = {
fonts:[{
fontFamily: "Nova Mono",
fontStyle: "normal",
fontWeight: 400,
fontDisplay: "swap",
src: "url(https://fonts.gstatic.com/s/novamono/v18/Cn-0JtiGWQ5Ajb--MRKvZ2ZZj9AtSw.woff2)",
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
}]
}
Required: src and fontFamily
You can specify multiple fonts and choose which to use in the component
style
Type: object
The style object is used to apply css properties to the contents of the component. It is different from classes in the fact that classes are used to apply css to the container that contains the component. There are 4 variants base, complete, empty and invalid.
You are free to add any css property by converting the propery type to camelCase and having the proerty value as string. Example being fontSize: '16px' for font-size: 16px
Default values
{
base: {
fontSize: "16px",
},
complete: {},
empty: {},
invalid: {
color: "#C1292E",
},
}
The following pseudo-classes and pseudo-elements can also be styled using a nested object inside of a variant:
:hover:focus:dsiabled::placeholder
Example
let options = {
fonts: [{
cssSrc: 'https://fonts.googleapis.com/css?family=Nova+Mono'
}],
style: {
base: {
fontSize: "18px",
fontFamily: "Nova Mono",
fontWeight: "300",
color: "#444",
backgroundColor: "transparent",
"::placeholder": {
color: "#2836d4",
},
":hover": {
color: "#ff00ff"
},
":focus": {
color: "#443231"
},
":disabled": {
color: "#f0d865",
backgroundColor: "pink",
},
},
complete: {
color: "#7A9B76",
},
empty: {
backgroundColor: "#fff",
"::placeholder": {
color: "#4e9152",
},
},
invalid: {
color: "#C1292E",
},
}
}
values
Type: object
The values property is used to initialize a component with a particular starting state. The keys of the values object changes according to the component type.
Default value
{}
Examples
Component Name: cardHolder
let options = {
values: {
cardHolder: 'Jane Doe'
}
}
Component Name: upiCollect
let options.values = {
upiId: "testsuccess@gocash"
}
Visit sections under different components to get all the available keys
disabled
Type: bool
You can use this to specify if the component should be loaded in a disabled state. Please note that the classes.disabled and style.base[":disabled"] or style.empty[":disabled"] will be applied to the container and compoent respectively
Default value
false
loader
Type: bool
Display skeleton loader UI while waiting for Elements to be fully loaded, after they are mounted. Not all components might support loader
Default value
true
Subscribe to Developer Updates
Updated 6 months ago