The cards and components can be integrated with Chargebee by using 3D Secure, also referred to as 3DS popularly. The integration can be done without 3DS as well. Learn more.
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.
Send the card details to the payment gateway for tokenization. The payment gateway for processing the card details is selected based on smart routing(opens new window).
If multi business entity(opens new window) is configured, then the payment gateway configured for the business entity specified during Chargebee.js initialization init is selected here.
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.
This function is used to initiate 3DS authorization against the card details entered in the card component fields. After successful payment authorization, the payment intent is returned with 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.
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.
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,
fieldString Corresponding field type
typeString Event type for which the callback got triggered
completeBoolean This will be true, if the fields are filled completely
errorObject If the component has any validation errors, the corresponding error message and error code are passed {name, message}
cardTypeString Card number type Example values are: mastercard, visa, amex, etc.
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);})
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.
The 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.
This is needed only if you are using the card component in the field mode. This function is used to specifiy container element where the component will be mounted. Accepts either the CSS selector or a DOM Element.
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,
fieldString Corresponding field type
typeString Event type for which the callback got triggered
completeBoolean This will be true, if the fields are filled completely
errorObject If the component has any validation errors, the corresponding error message and error code are passed {name, message}
cardTypeString Card number type Example values are: mastercard, visa, amex, etc.
// sample status object for change event on number field with error{type:"change"// event typefield:"number"// field typecardType:"visa"complete:falseempty:falseerror:{// Validation error objectname:"CARD_NUMBER_INCOMPLETE",message:"Invalid card"}}
