API Reference Use Payment Components
The Payment Components solution offers enhanced features and an improved user experience compared to the Card Component. We encourage you to use Payment Components to take full advantage of these improvements.
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 domain
String Required if custom domain is enabled
Your custom domain.Eg: https://billing.yourdomain.com
publishableKey
String Required Your publishable API key.
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" ,
domain : "https://mybilling.acme.com"
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 ( ( ) => {
} ) ;
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 options
Object Hide properties Currency code in ISO 4217 format (USD, EUR). By default, base currency code will be used
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.
Given text will be applied as a placeholder for card number field.
Given text will be applied as a placeholder for card expiry field.
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.
For the card number field, text given here is read out by the screen reader for accessibility purpose.
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
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.
Pass the class name that will be applied during field focus.
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.
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.
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 Source URL. Google Web Font or Typekit Web Font URL
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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties 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 : {
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 Pass card component object or component type for which you want to get Chargebee token
object
Allowed Values:
Card component object
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.
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 text for the corresponding input field.
Label to be read out by the screen reader for accessibility purpose.
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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties Return value Field object.
Example cardComponent. createField ( "number" , {
placeholder : "4111 1111 1111 1111" ,
styles : {
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 type String complete Boolean error Object {name, message} cardType String mastercard, visa, amex, etc. empty Boolean Return value Returns the object itself.
Example cardComponent. on ( "ready" , ( ) => {
console. log ( "field is ready to collect data" ) ;
} ) ;
cardComponent. on ( "focus" , ( ) => {
} ) ;
cardComponent. on ( "blur" , ( ) => {
} ) ;
cardComponent. on ( "change" , ( currentState ) => {
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.
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 additionalData
Object Hide properties Additional information that needs to be passed for improving the chances of frictionless checkout flow.
billingAddress
Object Hide properties firstName
String Required if Worldpay gateway is used First name associated with billing address
Last name associated with billing address
Phone number associated with the billing address
Billing address line 1 (eg. number, street, etc).
Billing address line 2 (eg. suite, apt #, etc.).
Billing address line 3 (eg. suite, apt #, etc).
2 letter code for US states or equivalent
customerBillingAddress
Object Hide properties Customer's Billing Address
firstName
String Required if Worldpay gateway is used First name associated with billing address
Last name associated with billing address
Phone number associated with the billing address
Billing address line 1 (eg. number, street, etc).
Billing address line 2 (eg. suite, apt #, etc.).
Billing address line 3 (eg. suite, apt #, etc).
2 letter code for US states or equivalent
shippingAddress
Object Hide properties firstName
String Required if Worldpay gateway is used First name associated with shipping address
Last name associated with shipping address
Phone number associated with the shipping address
Shipping address line 1 (eg. number, street, etc).
Shipping address line 2 (eg. suite, apt #, etc.).
Shipping address line 3 (eg. suite, apt #, etc).
2 letter code for US states or equivalent
email
String Required if Worldpay gateway is used 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.
Set the value as `true` to create a mandate. The default value is `false`.
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.
This function will be called during each step of 3DS flow
This function will be called if 3DS Authorization is successful
This function will be called if 3DS Authorization has failed
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" ,
"last4" : "1111"
}
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 ) => {
window. open ( redirect_url, "_blank" ) ;
} ,
} ,
} )
. then ( ( intent ) => {
console. log ( "success" ) ;
} )
. catch ( ( error ) => {
console. error ( error) ;
} ) ;
function onWindowClose ( ) {
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 type String complete Boolean error Object {name, message} cardType String mastercard, visa, amex, etc. empty Boolean
{
type : "change"
field : "number"
cardType : "visa"
complete : false
empty : false
error : {
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" , ( ) => {
} ) ;
numberField. on ( "blur" , ( ) => {
} ) ;
numberField. on ( "change" , ( currentState ) => {
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.
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
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 Source URL. Google Web Font or Typekit Web Font URL
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.
Pass the class name that will be applied during field focus.
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.
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.
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 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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties placeholder
Object Hide properties Placeholder texts for number, cvv & expiry fields.
Given text will be applied as a placeholder for card number field.
Given text will be applied as a placeholder for card expiry field.
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.
For the card number field, text given here is read out by the screen reader for accessibility purpose.
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
For the CVV field, text given here is read out by the screen reader for accessibility purpose.
Example: ...
< divcbCardField
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 = {
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' ,
} ,
} ,
invalid: {
color: '#e41029' ,
':focus' : {
color: '#e44d5f' ,
} ,
'::placeholder' : {
color: '#FFCCA5' ,
} ,
}
} ;
fonts = [
'https://fonts.googleapis.com/css?family=Lato:400,700'
] ;
placeholder = {
number : '4111 1111 1111 1111' ,
expiry: 'MM / YY' ,
cvv: 'CVV'
} ;
classes = {
focus: 'focus' ,
invalid: 'invalid' ,
empty: 'empty' ,
complete: 'complete' ,
} ;
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
Example < divid = " 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 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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties Attaching event listeners The following events listeners can be attached to the card component directive cbCardField
Example < divid = " 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 Source URL. Google Web Font or Typekit Web Font URL
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.
Pass the class name that will be applied during field focus.
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.
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.
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 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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties placeholder
Object Hide properties Placeholder texts for number, cvv & expiry fields.
Given text will be applied as a placeholder for card number field.
Given text will be applied as a placeholder for card expiry field.
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.
For the card number field, text given here is read out by the screen reader for accessibility purpose.
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
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
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 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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties 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
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 Source URL. Google Web Font or Typekit Web Font URL
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.
Pass the class name that will be applied during field focus.
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.
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.
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 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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties placeholder
Object Hide properties Placeholder texts for number, cvv & expiry fields.
Given text will be applied as a placeholder for card number field.
Given text will be applied as a placeholder for card expiry field.
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.
For the card number field, text given here is read out by the screen reader for accessibility purpose.
For the card expiry field, text given here is read out by the screen reader for accessibility purpose.
For the CVV field, text given here is read out by the screen reader for accessibility purpose.
Example < card-componentclass = " 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
Example < card-componentclass = " 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 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.
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties empty
Object Hide properties Pass the set of css properties that needs to be applied on empty state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties invalid
Object Hide properties Pass the set of css properties that needs to be applied on invalid state
letterSpacing
cssProperty textTransform
cssProperty textDecoration
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty fontSmoothing
cssProperty :focus
Object Hide properties ::placeholder
Object Hide properties ::selection
Object Hide properties backgroundColor
cssProperty :-webkit-autofill
Object Hide properties webkitTextColor
cssProperty :focus::placeholder
Object Hide properties Example < card-numberclass = " 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
Example < card-numberclass = " fieldset" @ready = " onReady" @change = " onChange" @focus = " onFocus" @blur = " onBlur" > </ card-number> 1 2 3 4 5 6 7
