Frontend Capabilities

# API Reference

Early Access

The Payment Components feature is in early access. To request access, write to eap@chargebee.com.

# 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 instance.

# components

Creates a Components object which is used to create payment components.

# Syntax

cbInstance.components(options);
1

# Parameters

options
Object Required Hide properties
style
Object Hide properties
theme
String
appearance
String
accentColor
String
grayColor
String
panelBackground
String
scaling
String
radius
String
variables
String
accent1
String
Background color 1
accent2
String
Background color 2
accent3
String
Interactive components color 1
accent4
String
Interactive components color 2
accent5
String
Interactive components color 3
accent6
String
Borders and separators color 1
accent7
String
Borders and separators color 2
accent8
String
Borders and separators color 3
accent9
String
Solid color 1
accent10
String
Solid color 2
accent11
String
Accessible text color 1
accent12
String
Accessible text color 2
accentSurface
String
Functional color for surface
accentIndicator
String
Functional color for accent indicator
accentTrack
String
Functional color for accent track
accentContrast
String
Functional color for accent contrast
gray1
String
Gray background 1
gray2
String
Gray background 2
gray3
String
Gray for interactive components 1
gray4
String
Gray for interactive components 2
gray5
String
Gray for interactive components 3
gray6
String
Gray for borders and separators 1
gray7
String
Gray for borders and separators 2
gray8
String
Gray for borders and separators 3
gray9
String
Gray for solid color 1
gray10
String
Gray for solid color 2
gray11
String
Gray for accessible text 1
gray12
String
Gray for accessible text 2
graySurface
String
Gray color for surface
grayIndicator
String
Gray color for accent indicator
grayTrack
String
Gray color for accent track
grayContrast
String
Gray color for accent contrast
colorBackground
String
Page background
colorPanelSolid
String
Solid panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorPanelTranslucent
String
Translucent panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorSurface
String
Form component backgrounds, such as text fields, checkboxes, select, etc.
colorOverlay
String
Dialog overlays
defaultFontFamily
String
Your custom default font
headingFontFamily
String
Your custom font for components
codeFontFamily
String
Your custom font for components
strongFontFamily
String
Your custom font for components
emFontFamily
String
Your custom font for components
quoteFontFamily
String
Your custom font for components
fontWeightLight
String
Font weight for light text
fontWeightRegular
String
Font weight for regular text
fontWeightMedium
String
Font weight for medium text
fontWeightBold
String
Font weight for bold text
space1
String
Spacing for 1 unit
space2
String
Spacing for 2 units
space3
String
Spacing for 3 units
space4
String
Spacing for 4 units
space5
String
Spacing for 5 units
space6
String
Spacing for 6 units
space7
String
Spacing for 7 units
space8
String
Spacing for 8 units
space9
String
Spacing for 9 units
radiusFactor
String
Radius base variable, used for multiplying.
radiusFull
String
A variable used to calculate a fully rounded radius.
radiusThumb
String
A variable used to calculate radius of a thumb element.
rules
Object
The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used

# Return value

A Components instance.

# Example

cbInstance.components({
    locale:"fr",
})
1
2
3

# Components class

# create

Creates a UI component to collect sensitive information from your customers.

# Syntax

components.create(componentType, options, callbacks)
1

# Parameters payment

componentType
string Required
Allowed Values:
payment
options
Object Required Hide properties
style
Object Hide properties
theme
String
appearance
String
accentColor
String
grayColor
String
panelBackground
String
scaling
String
radius
String
variables
String
accent1
String
Background color 1
accent2
String
Background color 2
accent3
String
Interactive components color 1
accent4
String
Interactive components color 2
accent5
String
Interactive components color 3
accent6
String
Borders and separators color 1
accent7
String
Borders and separators color 2
accent8
String
Borders and separators color 3
accent9
String
Solid color 1
accent10
String
Solid color 2
accent11
String
Accessible text color 1
accent12
String
Accessible text color 2
accentSurface
String
Functional color for surface
accentIndicator
String
Functional color for accent indicator
accentTrack
String
Functional color for accent track
accentContrast
String
Functional color for accent contrast
gray1
String
Gray background 1
gray2
String
Gray background 2
gray3
String
Gray for interactive components 1
gray4
String
Gray for interactive components 2
gray5
String
Gray for interactive components 3
gray6
String
Gray for borders and separators 1
gray7
String
Gray for borders and separators 2
gray8
String
Gray for borders and separators 3
gray9
String
Gray for solid color 1
gray10
String
Gray for solid color 2
gray11
String
Gray for accessible text 1
gray12
String
Gray for accessible text 2
graySurface
String
Gray color for surface
grayIndicator
String
Gray color for accent indicator
grayTrack
String
Gray color for accent track
grayContrast
String
Gray color for accent contrast
colorBackground
String
Page background
colorPanelSolid
String
Solid panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorPanelTranslucent
String
Translucent panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorSurface
String
Form component backgrounds, such as text fields, checkboxes, select, etc.
colorOverlay
String
Dialog overlays
defaultFontFamily
String
Your custom default font
headingFontFamily
String
Your custom font for components
codeFontFamily
String
Your custom font for components
strongFontFamily
String
Your custom font for components
emFontFamily
String
Your custom font for components
quoteFontFamily
String
Your custom font for components
fontWeightLight
String
Font weight for light text
fontWeightRegular
String
Font weight for regular text
fontWeightMedium
String
Font weight for medium text
fontWeightBold
String
Font weight for bold text
space1
String
Spacing for 1 unit
space2
String
Spacing for 2 units
space3
String
Spacing for 3 units
space4
String
Spacing for 4 units
space5
String
Spacing for 5 units
space6
String
Spacing for 6 units
space7
String
Spacing for 7 units
space8
String
Spacing for 8 units
space9
String
Spacing for 9 units
radiusFactor
String
Radius base variable, used for multiplying.
radiusFull
String
A variable used to calculate a fully rounded radius.
radiusThumb
String
A variable used to calculate radius of a thumb element.
rules
Object
The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
layout
Object Hide properties
type
tab | accordion Required
defaultItemsToShow
number
Specifies the number of payment methods to display in the UI. Any additional payment methods appear under an expandable menu.
showRadioButtons
boolean
paymentMethods
Object Hide properties
sortOrder
Array<string>

Sort order of the payment methods displayed on the payment component.

Example: sortOrder: ["card", "google_pay", "apple_pay"]

See PaymentIntent.payment_method_type for the list of supported values.

allowed
Array<string>

List of payment methods supported by the payment component.

Example: allowed: ["card", "google_pay", "apple_pay"]

See also:

See PaymentIntent.payment_method_type for the list of supported values.

paymentIntent
Object Hide properties
id
string Required
callbacks
Object Hide properties
onError(error)
function
error
Unknown
onSuccess(paymentIntent, extra)
function()
paymentIntent
Object Hide properties
id
string Required
extra
Unknown

# Return

Components

# Parameters payment-button

componentType
string Required
Allowed Values:
payment-button
options
Object Required Hide properties
style
Object Hide properties
theme
String
appearance
String
accentColor
String
grayColor
String
panelBackground
String
scaling
String
radius
String
variables
String
accent1
String
Background color 1
accent2
String
Background color 2
accent3
String
Interactive components color 1
accent4
String
Interactive components color 2
accent5
String
Interactive components color 3
accent6
String
Borders and separators color 1
accent7
String
Borders and separators color 2
accent8
String
Borders and separators color 3
accent9
String
Solid color 1
accent10
String
Solid color 2
accent11
String
Accessible text color 1
accent12
String
Accessible text color 2
accentSurface
String
Functional color for surface
accentIndicator
String
Functional color for accent indicator
accentTrack
String
Functional color for accent track
accentContrast
String
Functional color for accent contrast
gray1
String
Gray background 1
gray2
String
Gray background 2
gray3
String
Gray for interactive components 1
gray4
String
Gray for interactive components 2
gray5
String
Gray for interactive components 3
gray6
String
Gray for borders and separators 1
gray7
String
Gray for borders and separators 2
gray8
String
Gray for borders and separators 3
gray9
String
Gray for solid color 1
gray10
String
Gray for solid color 2
gray11
String
Gray for accessible text 1
gray12
String
Gray for accessible text 2
graySurface
String
Gray color for surface
grayIndicator
String
Gray color for accent indicator
grayTrack
String
Gray color for accent track
grayContrast
String
Gray color for accent contrast
colorBackground
String
Page background
colorPanelSolid
String
Solid panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorPanelTranslucent
String
Translucent panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorSurface
String
Form component backgrounds, such as text fields, checkboxes, select, etc.
colorOverlay
String
Dialog overlays
defaultFontFamily
String
Your custom default font
headingFontFamily
String
Your custom font for components
codeFontFamily
String
Your custom font for components
strongFontFamily
String
Your custom font for components
emFontFamily
String
Your custom font for components
quoteFontFamily
String
Your custom font for components
fontWeightLight
String
Font weight for light text
fontWeightRegular
String
Font weight for regular text
fontWeightMedium
String
Font weight for medium text
fontWeightBold
String
Font weight for bold text
space1
String
Spacing for 1 unit
space2
String
Spacing for 2 units
space3
String
Spacing for 3 units
space4
String
Spacing for 4 units
space5
String
Spacing for 5 units
space6
String
Spacing for 6 units
space7
String
Spacing for 7 units
space8
String
Spacing for 8 units
space9
String
Spacing for 9 units
radiusFactor
String
Radius base variable, used for multiplying.
radiusFull
String
A variable used to calculate a fully rounded radius.
radiusThumb
String
A variable used to calculate radius of a thumb element.
rules
Object
The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
card
Object Hide properties
text
string
currencyCode
string
amount
number
google_pay
Object Hide properties
buttonSizeMode
string
color
string
buttonType
string
buttonLocale
string
paypal_express_checkout
Object
_internal
Object Hide properties
appUrl
string

# Return

Components

# Payment Component

# mount

Inserts the payment UI component into the DOM.

# Syntax

components.mount(target)
1

# Parameters

target
string | HTMLElement Required
DOM element or a CSS selector where the component should be mounted.

# Return

Promise<boolean>

# update

Updates the payment component options using a shallow merge and remounts the component.

# Syntax

components.update(options)
1

# Parameters

options
PaymentComponentUpdateOption
paymentIntent
Object Hide properties
id
string Required
paymentMethods
Object Hide properties
sortOrder
Array<string>

Sort order of the payment methods displayed on the payment component.

Example: sortOrder: ["card", "google_pay", "apple_pay"]

See PaymentIntent.payment_method_type for the list of supported values.

allowed
Array<string>

List of payment methods supported by the payment component.

Example: allowed: ["card", "google_pay", "apple_pay"]

See also:

See PaymentIntent.payment_method_type for the list of supported values.

layout
Object Hide properties
type
tab | accordion Required
defaultItemsToShow
number
Specifies the number of payment methods to display in the UI. Any additional payment methods appear under an expandable menu.
showRadioButtons
boolean
form
Object Hide properties
values
Object Hide properties
firstName
string
lastName
string
addressLine1
string
addressLine2
string
addressLine3
string
city
string
state
string
stateCode
string
countryCode
string
zip
string
phone
string
configuration
Object Hide properties
firstName
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
lastName
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
addressLine1
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
addressLine2
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
addressLine3
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
city
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
state
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
stateCode
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
countryCode
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
zip
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required
phone
Object Hide properties
label
string
required
boolean
readOnly
boolean
short
boolean
placeholder
string
order
number
type
text | email | tel | number | select
validations
Object Hide properties
presence
Object Hide properties
message
string Required
value
boolean Required
allowBlank
Object Hide properties
message
string Required
value
boolean Required
length
Object Hide properties
message
string Required
minimum
number Required
maximum
number Required
length
Object Hide properties
message
string Required
type
email Required
allowedValues
Object Hide properties
label
string Required
value
string Required

# confirm

Initiates the payment authorization process. Once the user completes the payment, the function returns an authorized PaymentIntent, which can be used to create subscriptions and invoices.

# Syntax

components.confirm(options)
1

# Parameters

options
ConfirmOptions

# validate

Verifies that the submitted payment details are valid and ready for processing.

# Syntax

const promise = components.validate()
1

# Return

Promise<boolean>

# close

Removes the mounted component from the DOM.

# Syntax

const promise = components.close()
1

# getPaymentIntent

Retrieves the payment_intent associated with the payment component and updates the component with any modifications.

# Syntax

const promise = components.getPaymentIntent()
1

# Return

Promise<PaymentIntent>

PaymentIntent
id
string Required

# Payment Button Component

The Payment Button Component is a dynamic prebuilt UI button that submits the payment form when clicked.

# mount

Inserts the payment button UI component into the DOM.

# Syntax

components.mount(target)
1

# Parameters

target
string | HTMLElement Required
DOM element or a CSS selector where the component should be mounted.

# Return

Promise<boolean>

# close

Removes the mounted payment button component from the DOM.

# Syntax

const promise = components.close()
1

# ComponentCreateOptions

style
Object Hide properties
theme
String
appearance
String
accentColor
String
grayColor
String
panelBackground
String
scaling
String
radius
String
variables
String
accent1
String
Background color 1
accent2
String
Background color 2
accent3
String
Interactive components color 1
accent4
String
Interactive components color 2
accent5
String
Interactive components color 3
accent6
String
Borders and separators color 1
accent7
String
Borders and separators color 2
accent8
String
Borders and separators color 3
accent9
String
Solid color 1
accent10
String
Solid color 2
accent11
String
Accessible text color 1
accent12
String
Accessible text color 2
accentSurface
String
Functional color for surface
accentIndicator
String
Functional color for accent indicator
accentTrack
String
Functional color for accent track
accentContrast
String
Functional color for accent contrast
gray1
String
Gray background 1
gray2
String
Gray background 2
gray3
String
Gray for interactive components 1
gray4
String
Gray for interactive components 2
gray5
String
Gray for interactive components 3
gray6
String
Gray for borders and separators 1
gray7
String
Gray for borders and separators 2
gray8
String
Gray for borders and separators 3
gray9
String
Gray for solid color 1
gray10
String
Gray for solid color 2
gray11
String
Gray for accessible text 1
gray12
String
Gray for accessible text 2
graySurface
String
Gray color for surface
grayIndicator
String
Gray color for accent indicator
grayTrack
String
Gray color for accent track
grayContrast
String
Gray color for accent contrast
colorBackground
String
Page background
colorPanelSolid
String
Solid panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorPanelTranslucent
String
Translucent panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorSurface
String
Form component backgrounds, such as text fields, checkboxes, select, etc.
colorOverlay
String
Dialog overlays
defaultFontFamily
String
Your custom default font
headingFontFamily
String
Your custom font for components
codeFontFamily
String
Your custom font for components
strongFontFamily
String
Your custom font for components
emFontFamily
String
Your custom font for components
quoteFontFamily
String
Your custom font for components
fontWeightLight
String
Font weight for light text
fontWeightRegular
String
Font weight for regular text
fontWeightMedium
String
Font weight for medium text
fontWeightBold
String
Font weight for bold text
space1
String
Spacing for 1 unit
space2
String
Spacing for 2 units
space3
String
Spacing for 3 units
space4
String
Spacing for 4 units
space5
String
Spacing for 5 units
space6
String
Spacing for 6 units
space7
String
Spacing for 7 units
space8
String
Spacing for 8 units
space9
String
Spacing for 9 units
radiusFactor
String
Radius base variable, used for multiplying.
radiusFull
String
A variable used to calculate a fully rounded radius.
radiusThumb
String
A variable used to calculate radius of a thumb element.
rules
Object
The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used

# Style

theme
String
appearance
String
accentColor
String
grayColor
String
panelBackground
String
scaling
String
radius
String
variables
String
accent1
String
Background color 1
accent2
String
Background color 2
accent3
String
Interactive components color 1
accent4
String
Interactive components color 2
accent5
String
Interactive components color 3
accent6
String
Borders and separators color 1
accent7
String
Borders and separators color 2
accent8
String
Borders and separators color 3
accent9
String
Solid color 1
accent10
String
Solid color 2
accent11
String
Accessible text color 1
accent12
String
Accessible text color 2
accentSurface
String
Functional color for surface
accentIndicator
String
Functional color for accent indicator
accentTrack
String
Functional color for accent track
accentContrast
String
Functional color for accent contrast
gray1
String
Gray background 1
gray2
String
Gray background 2
gray3
String
Gray for interactive components 1
gray4
String
Gray for interactive components 2
gray5
String
Gray for interactive components 3
gray6
String
Gray for borders and separators 1
gray7
String
Gray for borders and separators 2
gray8
String
Gray for borders and separators 3
gray9
String
Gray for solid color 1
gray10
String
Gray for solid color 2
gray11
String
Gray for accessible text 1
gray12
String
Gray for accessible text 2
graySurface
String
Gray color for surface
grayIndicator
String
Gray color for accent indicator
grayTrack
String
Gray color for accent track
grayContrast
String
Gray color for accent contrast
colorBackground
String
Page background
colorPanelSolid
String
Solid panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorPanelTranslucent
String
Translucent panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorSurface
String
Form component backgrounds, such as text fields, checkboxes, select, etc.
colorOverlay
String
Dialog overlays
defaultFontFamily
String
Your custom default font
headingFontFamily
String
Your custom font for components
codeFontFamily
String
Your custom font for components
strongFontFamily
String
Your custom font for components
emFontFamily
String
Your custom font for components
quoteFontFamily
String
Your custom font for components
fontWeightLight
String
Font weight for light text
fontWeightRegular
String
Font weight for regular text
fontWeightMedium
String
Font weight for medium text
fontWeightBold
String
Font weight for bold text
space1
String
Spacing for 1 unit
space2
String
Spacing for 2 units
space3
String
Spacing for 3 units
space4
String
Spacing for 4 units
space5
String
Spacing for 5 units
space6
String
Spacing for 6 units
space7
String
Spacing for 7 units
space8
String
Spacing for 8 units
space9
String
Spacing for 9 units
radiusFactor
String
Radius base variable, used for multiplying.
radiusFull
String
A variable used to calculate a fully rounded radius.
radiusThumb
String
A variable used to calculate radius of a thumb element.
rules
Object
The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components.

# PaymentComponentCreateOptions

style
Object Hide properties
theme
String
appearance
String
accentColor
String
grayColor
String
panelBackground
String
scaling
String
radius
String
variables
String
accent1
String
Background color 1
accent2
String
Background color 2
accent3
String
Interactive components color 1
accent4
String
Interactive components color 2
accent5
String
Interactive components color 3
accent6
String
Borders and separators color 1
accent7
String
Borders and separators color 2
accent8
String
Borders and separators color 3
accent9
String
Solid color 1
accent10
String
Solid color 2
accent11
String
Accessible text color 1
accent12
String
Accessible text color 2
accentSurface
String
Functional color for surface
accentIndicator
String
Functional color for accent indicator
accentTrack
String
Functional color for accent track
accentContrast
String
Functional color for accent contrast
gray1
String
Gray background 1
gray2
String
Gray background 2
gray3
String
Gray for interactive components 1
gray4
String
Gray for interactive components 2
gray5
String
Gray for interactive components 3
gray6
String
Gray for borders and separators 1
gray7
String
Gray for borders and separators 2
gray8
String
Gray for borders and separators 3
gray9
String
Gray for solid color 1
gray10
String
Gray for solid color 2
gray11
String
Gray for accessible text 1
gray12
String
Gray for accessible text 2
graySurface
String
Gray color for surface
grayIndicator
String
Gray color for accent indicator
grayTrack
String
Gray color for accent track
grayContrast
String
Gray color for accent contrast
colorBackground
String
Page background
colorPanelSolid
String
Solid panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorPanelTranslucent
String
Translucent panel backgrounds, such as cards, tables, popovers, dropdown menus, etc.
colorSurface
String
Form component backgrounds, such as text fields, checkboxes, select, etc.
colorOverlay
String
Dialog overlays
defaultFontFamily
String
Your custom default font
headingFontFamily
String
Your custom font for components
codeFontFamily
String
Your custom font for components
strongFontFamily
String
Your custom font for components
emFontFamily
String
Your custom font for components
quoteFontFamily
String
Your custom font for components
fontWeightLight
String
Font weight for light text
fontWeightRegular
String
Font weight for regular text
fontWeightMedium
String
Font weight for medium text
fontWeightBold
String
Font weight for bold text
space1
String
Spacing for 1 unit
space2
String
Spacing for 2 units
space3
String
Spacing for 3 units
space4
String
Spacing for 4 units
space5
String
Spacing for 5 units
space6
String
Spacing for 6 units
space7
String
Spacing for 7 units
space8
String
Spacing for 8 units
space9
String
Spacing for 9 units
radiusFactor
String
Radius base variable, used for multiplying.
radiusFull
String
A variable used to calculate a fully rounded radius.
radiusThumb
String
A variable used to calculate radius of a thumb element.
rules
Object
The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components.
locale
String
Locale code in ISO 639-1 format (en, fr). By default, `en` will be used
layout
Object Hide properties
type
tab | accordion Required
defaultItemsToShow
number
Specifies the number of payment methods to display in the UI. Any additional payment methods appear under an expandable menu.
showRadioButtons
boolean
paymentMethods
Object Hide properties
sortOrder
Array<string>

Sort order of the payment methods displayed on the payment component.

Example: sortOrder: ["card", "google_pay", "apple_pay"]

See PaymentIntent.payment_method_type for the list of supported values.

allowed
Array<string>

List of payment methods supported by the payment component.

Example: allowed: ["card", "google_pay", "apple_pay"]

See also:

See PaymentIntent.payment_method_type for the list of supported values.

paymentIntent
Object Hide properties
id
string Required

# PaymentComponentCreateCallback

# onError

# Syntax

callbacks.onError(error, from)
1

# Parameters

error
Unknown

# onSuccess

# Syntax

callbacks.onSuccess(paymentIntent, extra)
1

# Parameters

paymentIntent
Object Hide properties
id
string Required
extra
Unknown

# PaymentComponentUpdateOptions

paymentIntent
Object Hide properties
id
string Required
extra
Unknown

# PaymentIntent

id
string Required
status
string
Allowed Values:
consumed
in_progress
inited
expired
authorized
currency_code
string
amount
number
gateway_account_id
string
expires_at
number
payment_method_type
string
Allowed Values:
google_pay
apple_pay
paypal_express_checkout
card

# ConfirmOptions

billingAddress
Object Hide properties
first_name
String
First name
last_name
String
Last name
company
String
Company name
phone
String
Phone number.
email
String
Email ID
line1
String
Address line 1
line2
String
Address line 2
city
String
City
state
String
State name
state_code
String
State code
country
String
Country code
zip
String
Zip/Postal code
shippingAddress
Object Hide properties
first_name
String
First name
last_name
String
Last name
company
String
Company name
phone
String
Phone number.
email
String
Email ID
line1
String
Address line 1
line2
String
Address line 2
city
String
City
state
String
State name
state_code
String
State code
country
String
Country code
zip
String
Zip/Postal code
customer
Object Required if Using Netbanking, UPI, Direct Debit via Adyen, Stripe, Bluesnap, and GoCardless SEPA, ACH via GoCardless, ACH via Bluesnap, Autogiro via GoCardless, BACS via GoCardless Hide properties
Customer with whom the subscription will be associated
firstName
String
First name
lastName
String
Last name
email
String
E-mail address
phone
String
Phone number

# AdditionalData

billingAddress
Object Hide properties
first_name
String
First name
last_name
String
Last name
company
String
Company name
phone
String
Phone number.
email
String
Email ID
line1
String
Address line 1
line2
String
Address line 2
city
String
City
state
String
State name
state_code
String
State code
country
String
Country code
zip
String
Zip/Postal code
shippingAddress
Object Hide properties
first_name
String
First name
last_name
String
Last name
company
String
Company name
phone
String
Phone number.
email
String
Email ID
line1
String
Address line 1
line2
String
Address line 2
city
String
City
state
String
State name
state_code
String
State code
country
String
Country code
zip
String
Zip/Postal code
customer
Object Required if Using Netbanking, UPI, Direct Debit via Adyen, Stripe, Bluesnap, and GoCardless SEPA, ACH via GoCardless, ACH via Bluesnap, Autogiro via GoCardless, BACS via GoCardless Hide properties
Customer with whom the subscription will be associated
firstName
String
First name
lastName
String
Last name
email
String
E-mail address
phone
String
Phone number

# PaymentMethods

sortOrder
Array<string>

Sort order of the payment methods displayed on the payment component.

Example: sortOrder: ["card", "google_pay", "apple_pay"]

See PaymentIntent.payment_method_type for the list of supported values.

allowed
Array<string>

List of payment methods supported by the payment component.

Example: allowed: ["card", "google_pay", "apple_pay"]

See also:

See PaymentIntent.payment_method_type for the list of supported values.

# PaymentMethods

type
tab | accordion Required
defaultItemsToShow
number
Specifies the number of payment methods to display in the UI. Any additional payment methods appear under an expandable menu.
showRadioButtons
boolean

# Locale ENUM

code language
es Spanish
en English
fr French
de German
it Italian
pt Portuguese

# Address

first_name
String
First name
last_name
String
Last name
company
String
Company name
phone
String
Phone number.
email
String
Email ID
line1
String
Address line 1
line2
String
Address line 2
city
String
City
state
String
State name
state_code
String
State code
country
String
Country code
zip
String
Zip/Postal code

# Customer

firstName
String
First name
lastName
String
Last name
email
String
E-mail address
phone
String
Phone number

← Overview →