# 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 propertiessite
String Required Your site name.
domain
String Required if custom domain is enabled
Your custom domain.
Eg: https://billing.yourdomain.com
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:
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
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 propertiesstyle
Object Hide propertiestheme
String appearance
String The color scheme for the component.
Allowed Values:
light (default)
dark
light (default)
dark
accentColor
String The most dominant color in the component. This color is applied to primary buttons and other interactive elements.
Allowed Values:
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
grayColor
String The grayscale color used in the component, such as for shadows, out-of-focus elements, disabled elements, and placeholder text. The value
auto automatically selects a gray shade that complements the accentColor.
Allowed Values:
auto (default)
gray
mauve
slate
sage
olive
sand
auto (default)
gray
mauve
slate
sage
olive
sand
scaling
String The linear scaling applied to the component. Use this setting to adjust the UI density uniformly across the component.
Allowed Values:
90%
95%
100% (default)
105%
110%
90%
95%
100% (default)
105%
110%
radius
String Specifies the border-radius factor applied to the component. The resulting
border-radius is contextual and varies based on the type of UI element.
Allowed Values:
none
small
medium (default)
large
full
none
small
medium (default)
large
full
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 <Heading> components
codeFontFamily
String Your custom font for <Code> components
strongFontFamily
String Your custom font for <Strong> components
emFontFamily
String Your custom font for <Em> components
quoteFontFamily
String Your custom font for <Quote> 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
- js
# Components class
# create
Creates a UI component to collect sensitive information from your customers.
# Syntax
const component = components.create(componentType, options, callbacks)
1
# Parameters payment
componentType
string Required
Allowed Values:
payment
payment
options
Object Required Hide propertiesstyle
Object Hide propertiestheme
String appearance
String The color scheme for the component.
Allowed Values:
light (default)
dark
light (default)
dark
accentColor
String The most dominant color in the component. This color is applied to primary buttons and other interactive elements.
Allowed Values:
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
grayColor
String The grayscale color used in the component, such as for shadows, out-of-focus elements, disabled elements, and placeholder text. The value
auto automatically selects a gray shade that complements the accentColor.
Allowed Values:
auto (default)
gray
mauve
slate
sage
olive
sand
auto (default)
gray
mauve
slate
sage
olive
sand
scaling
String The linear scaling applied to the component. Use this setting to adjust the UI density uniformly across the component.
Allowed Values:
90%
95%
100% (default)
105%
110%
90%
95%
100% (default)
105%
110%
radius
String Specifies the border-radius factor applied to the component. The resulting
border-radius is contextual and varies based on the type of UI element.
Allowed Values:
none
small
medium (default)
large
full
none
small
medium (default)
large
full
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 <Heading> components
codeFontFamily
String Your custom font for <Code> components
strongFontFamily
String Your custom font for <Strong> components
emFontFamily
String Your custom font for <Em> components
quoteFontFamily
String Your custom font for <Quote> 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 propertiestype
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 propertiessortOrder
Array<string> The sort order for payment methods displayed in the payment component.
Example: sortOrder: ["card", "google_pay", "apple_pay"]
See PaymentIntent.payment_method_type for the list of supported values.
allowed
Array<string> The list of payment methods that the payment component displays. If this parameter is omitted, all supported payment methods are shown.
Example: allowed: ["card", "google_pay", "apple_pay"]
See also:
See PaymentIntent.payment_method_type for the list of supported values.
options
Object Hide propertiescard
Object Hide propertieslogos
Array<string> List of logos of card provider.
Example: options: { card: { logos: ["mastercard", "amex", "visa"] } }
paymentIntent
Object Hide propertiesid
string Required form
Object Hide propertiescustomer
Object Hide propertiesfirstName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required lastName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required phone
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required email
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required payment
Object Hide propertiesbillingAddress
Object Hide propertiesfirstName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required lastName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required phone
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine1
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine2
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine3
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required city
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required state
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required stateCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required countryCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required zip
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required shippingAddress
Object Hide propertiesfirstName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required lastName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required phone
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine1
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine2
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine3
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required city
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required state
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required stateCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required countryCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required zip
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required context
Object Hide propertiescart
Object Hide propertieslineItems
Array<Object> id
String Required name
String description
String type
Required
Allowed Values:
plan
addon
charge
plan
addon
charge
customer
Object Hide propertiesfirstName
String lastName
String phone
String email
String payment
Object Hide propertiesbillingAddress
Object Hide propertiesfirstName
String First name associated with the address
lastName
String Last name associated with the address
phone
String Phone number associated with the shipping address
addressLine1
String Address line 1 (eg. number, street, etc).
addressLine2
String Address line 2 (eg. suite, apt #, etc.).
addressLine3
String 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 propertiesfirstName
String First name associated with the address
lastName
String Last name associated with the address
phone
String Phone number associated with the shipping address
addressLine1
String Address line 1 (eg. number, street, etc).
addressLine2
String Address line 2 (eg. suite, apt #, etc.).
addressLine3
String 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
callbacks
Object Hide propertiesonError(error)
function error
Unknown onSuccess(paymentIntent, extra)
function PaymentIntent
Object Hide propertiesid
string status
string
Allowed Values:
authorized
authorized
amount
number gateway_account_id
string expires_at
number payment_method_type
string
Allowed Values:
google_pay
apple_pay
paypal_express_checkout
venmo
card
bancontact
ideal
google_pay
apple_pay
paypal_express_checkout
venmo
card
bancontact
ideal
created_at
Unix timestamp modified_at
Unix timestamp updated_at
Unix timestamp currency_code
string object
string gateway
string extra
Unknown onPaymentMethodChange(paymentMethod)
function paymentMethod
string onClose()
function # Return
PaymentComponent
# Example
- js
# Parameters payment-button
componentType
string Required
Allowed Values:
payment-button
payment-button
options
Object Required Hide propertiesstyle
Object Hide propertiestheme
String appearance
String The color scheme for the component.
Allowed Values:
light (default)
dark
light (default)
dark
accentColor
String The most dominant color in the component. This color is applied to primary buttons and other interactive elements.
Allowed Values:
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
grayColor
String The grayscale color used in the component, such as for shadows, out-of-focus elements, disabled elements, and placeholder text. The value
auto automatically selects a gray shade that complements the accentColor.
Allowed Values:
auto (default)
gray
mauve
slate
sage
olive
sand
auto (default)
gray
mauve
slate
sage
olive
sand
scaling
String The linear scaling applied to the component. Use this setting to adjust the UI density uniformly across the component.
Allowed Values:
90%
95%
100% (default)
105%
110%
90%
95%
100% (default)
105%
110%
radius
String Specifies the border-radius factor applied to the component. The resulting
border-radius is contextual and varies based on the type of UI element.
Allowed Values:
none
small
medium (default)
large
full
none
small
medium (default)
large
full
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 <Heading> components
codeFontFamily
String Your custom font for <Code> components
strongFontFamily
String Your custom font for <Strong> components
emFontFamily
String Your custom font for <Em> components
quoteFontFamily
String Your custom font for <Quote> 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
paymentMethods
Object Hide propertiesoptions
Object Hide propertiescard
Object Hide propertiestext
string The text appearing on the payment button when the card payment method is selected.
google_pay
Object Hide propertiesbuttonColor
String Color of the Google Pay button.
Allowed Values:
default
black
white
default
black
white
buttonType
String Type of the Google Pay button.
Allowed Values:
long
short
book
buy
checkout
donate
order
pay
plain
subscribe
long
short
book
buy
checkout
donate
order
pay
plain
subscribe
buttonSizeMode
String Button size options.
Allowed Values:
static
fill
static
fill
buttonLocale
String Locale options for the Google Pay Button.
paypal_express_checkout
Object bancontact
Object Hide propertiestext
string The text appearing on the payment button when the Bancontact payment method is selected.
ideal
Object Hide propertiestext
string The text appearing on the payment button when the iDEAL payment method is selected.
callbacks
Object Hide propertiesonError(error)
function error
Unknown onClose()
function # Return
PaymentButtonComponent
# Example
- js
# Payment Component
# mount
Inserts the payment UI component into the DOM.
# Syntax
await paymentComponent.mount(target);
1
# Parameters
target
string | HTMLElement Required DOM element or a CSS selector where the component should be mounted.
# Return
A promise that resolves to true if the component was successfully mounted, or false if an error occurred
# update
Updates the payment component options using a shallow merge and remounts the component.
# Syntax
paymentComponent.update(options)
1
# Parameters
options
Object Hide propertiesstyle
Object Hide propertiestheme
String appearance
String The color scheme for the component.
Allowed Values:
light (default)
dark
light (default)
dark
accentColor
String The most dominant color in the component. This color is applied to primary buttons and other interactive elements.
Allowed Values:
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
grayColor
String The grayscale color used in the component, such as for shadows, out-of-focus elements, disabled elements, and placeholder text. The value
auto automatically selects a gray shade that complements the accentColor.
Allowed Values:
auto (default)
gray
mauve
slate
sage
olive
sand
auto (default)
gray
mauve
slate
sage
olive
sand
scaling
String The linear scaling applied to the component. Use this setting to adjust the UI density uniformly across the component.
Allowed Values:
90%
95%
100% (default)
105%
110%
90%
95%
100% (default)
105%
110%
radius
String Specifies the border-radius factor applied to the component. The resulting
border-radius is contextual and varies based on the type of UI element.
Allowed Values:
none
small
medium (default)
large
full
none
small
medium (default)
large
full
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 <Heading> components
codeFontFamily
String Your custom font for <Code> components
strongFontFamily
String Your custom font for <Strong> components
emFontFamily
String Your custom font for <Em> components
quoteFontFamily
String Your custom font for <Quote> 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
paymentIntent
Object Hide propertiesid
string Required paymentMethods
Object Hide propertiessortOrder
Array<string> The sort order for payment methods displayed in the payment component.
Example: sortOrder: ["card", "google_pay", "apple_pay"]
See PaymentIntent.payment_method_type for the list of supported values.
allowed
Array<string> The list of payment methods that the payment component displays. If this parameter is omitted, all supported payment methods are shown.
Example: allowed: ["card", "google_pay", "apple_pay"]
See also:
See PaymentIntent.payment_method_type for the list of supported values.
options
Object Hide propertiescard
Object Hide propertieslogos
Array<string> List of logos of card provider.
Example: options: { card: { logos: ["mastercard", "amex", "visa"] } }
layout
Object Hide propertiestype
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 propertiescustomer
Object Hide propertiesfirstName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required lastName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required phone
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required email
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required payment
Object Hide propertiesbillingAddress
Object Hide propertiesfirstName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required lastName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required phone
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine1
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine2
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine3
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required city
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required state
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required stateCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required countryCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required zip
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required shippingAddress
Object Hide propertiesfirstName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required lastName
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required phone
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine1
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine2
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required addressLine3
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required city
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required state
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required stateCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required countryCode
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required zip
Object Hide properties
Allowed Values:
Object
'default'
'never'
Object
'default'
'never'
label
string required
boolean readOnly
boolean short
boolean placeholder
string order
number allowedValues
Array<Object> label
string Required value
string Required context
Object Hide propertiescart
Object Hide propertieslineItems
Array<Object> id
String Required name
String description
String type
Required
Allowed Values:
plan
addon
charge
plan
addon
charge
customer
Object Hide propertiesfirstName
String lastName
String phone
String email
String payment
Object Hide propertiesbillingAddress
Object Hide propertiesfirstName
String First name associated with the address
lastName
String Last name associated with the address
phone
String Phone number associated with the shipping address
addressLine1
String Address line 1 (eg. number, street, etc).
addressLine2
String Address line 2 (eg. suite, apt #, etc.).
addressLine3
String 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 propertiesfirstName
String First name associated with the address
lastName
String Last name associated with the address
phone
String Phone number associated with the shipping address
addressLine1
String Address line 1 (eg. number, street, etc).
addressLine2
String Address line 2 (eg. suite, apt #, etc.).
addressLine3
String 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
# Return
NA
# validate
Verifies that the submitted payment details are valid and ready for processing.
# Syntax
const isValid = await paymentComponent.validate()
1
# Return
Promise<boolean>
# confirm
Initiates the payment authorization process. Once the user completes the payment, the function calls the onSuccess callback along with authorized paymentIntent.
# Syntax
await paymentComponent.confirm()
1
# Return
NA
# close
Removes the mounted component from the DOM and triggers the onClose callback of the payment component if defined.
# Syntax
paymentComponent.close()
1
# Return
NA
# 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
await paymentButtonComponent.mount(target);
1
# Parameters
target
string | HTMLElement Required DOM element or a CSS selector where the component should be mounted.
# Return
A promise that resolves to true if the component was successfully mounted, or false if an error occurred
# update
Updates the payment button component options using a shallow merge and remounts the component.
# Syntax
paymentButtonComponent.update(options)
1
# Parameters
options
Object Hide propertiesstyle
Object Hide propertiestheme
String appearance
String The color scheme for the component.
Allowed Values:
light (default)
dark
light (default)
dark
accentColor
String The most dominant color in the component. This color is applied to primary buttons and other interactive elements.
Allowed Values:
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
indigo (default)
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
blue
cyan
teal
jade
green
grass
lime
mint
sky
grayColor
String The grayscale color used in the component, such as for shadows, out-of-focus elements, disabled elements, and placeholder text. The value
auto automatically selects a gray shade that complements the accentColor.
Allowed Values:
auto (default)
gray
mauve
slate
sage
olive
sand
auto (default)
gray
mauve
slate
sage
olive
sand
scaling
String The linear scaling applied to the component. Use this setting to adjust the UI density uniformly across the component.
Allowed Values:
90%
95%
100% (default)
105%
110%
90%
95%
100% (default)
105%
110%
radius
String Specifies the border-radius factor applied to the component. The resulting
border-radius is contextual and varies based on the type of UI element.
Allowed Values:
none
small
medium (default)
large
full
none
small
medium (default)
large
full
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 <Heading> components
codeFontFamily
String Your custom font for <Code> components
strongFontFamily
String Your custom font for <Strong> components
emFontFamily
String Your custom font for <Em> components
quoteFontFamily
String Your custom font for <Quote> 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
paymentMethods
Object Hide propertiesoptions
Object Hide propertiescard
Object Hide propertiestext
string The text appearing on the payment button when the card payment method is selected.
google_pay
Object Hide propertiesbuttonColor
String Color of the Google Pay button.
Allowed Values:
default
black
white
default
black
white
buttonType
String Type of the Google Pay button.
Allowed Values:
long
short
book
buy
checkout
donate
order
pay
plain
subscribe
long
short
book
buy
checkout
donate
order
pay
plain
subscribe
buttonSizeMode
String Button size options.
Allowed Values:
static
fill
static
fill
buttonLocale
String Locale options for the Google Pay Button.
paypal_express_checkout
Object bancontact
Object Hide propertiestext
string The text appearing on the payment button when the Bancontact payment method is selected.
ideal
Object Hide propertiestext
string The text appearing on the payment button when the iDEAL payment method is selected.
# Return
NA
# close
Removes the mounted payment button component from the DOM and triggers the onClose callback of the payment button component if defined.
# Syntax
paymentButtonComponent.close()
1
# Return
NA
# PaymentIntent
id
string Required status
string
Allowed Values:
consumed
in_progress
inited
expired
authorized
consumed
in_progress
inited
expired
authorized
amount
number gateway_account_id
string expires_at
number payment_method_type
string
Allowed Values:
google_pay
apple_pay
paypal_express_checkout
venmo
card
bancontact
ideal
google_pay
apple_pay
paypal_express_checkout
venmo
card
bancontact
ideal
created_at
Unix timestamp modified_at
Unix timestamp updated_at
Unix timestamp currency_code
string object
string gateway
string # PaymentMethods
| supported payment methods |
|---|
card |
google_pay |
apple_pay |
paypal_express_checkout |
venmo |
bancontact |
ideal |
# Locale
| code | language |
|---|---|
es | Spanish |
en | English |
fr | French |
de | German |
it | Italian |
pt | Portuguese |
