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

Initializes the Chargebee object with your site domain name and publishable key (opens new window), enabling the use of Payment Components.

# Syntax

Chargebee.init(options);
1

# Parameters

options
Object Required View properties

# 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 View properties

# 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
options
Object Required View properties
callbacks
Object View properties

# Return

PaymentComponent

# Example

  • js

# Parameters payment-button

The payment button component is a prebuilt UI button that submits the payment form when clicked. It dynamically adjusts based on the selected payment method.

Optional component

The payment button component is optional. You can implement your own custom button. However, if you choose not to use Chargebee’s payment button component, Chargebee will render payment buttons for all wallet-based payment methods selected by the user.

componentType
string Required
Allowed Values:
payment-button
options
Object Required View properties
callbacks
Object View properties

# 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 View properties

# 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 View properties

# 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
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
upi
netbanking_emandates
klarna_pay_now
online_banking_poland
direct_debit
amazon_payments
pay_to
faster_payments
sepa_instant_transfer
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
upi
netbanking_emandates
klarna_pay_now
online_banking_poland
direct_debit
amazon_payments
pay_to
faster_payments
sepa_instant_transfer

# Locale

Code Language
es Spanish
en English
fr French
de German
it Italian
pt Portuguese

← Overview →