# Payment Components ## Overview This page documents the Payment Components API, which allows you to integrate secure, customizable payment forms directly into your website. Payment Components provide a complete payment collection solution with built-in support for multiple payment methods, localization, and styling options. Payment Components also authenticate the customer for you during confirmation, whether that means a card [3D Secure](https://www.chargebee.com/docs/payments/2.0/payment-components/overview#3d-secure-and-sca) challenge or a bank authorization. See [`confirm()`](#confirm) for details. ## Tutorials For step-by-step integration, see the [Payment Components tutorials](https://www.chargebee.com/tutorials/topics/payment-components/). ## Prerequisites Before using the Payment Components API, ensure you have [initialized Chargebee.js](https://www.chargebee.com/docs/js/settingup-api-ref) in your application with a [publishable key](https://www.chargebee.com/docs/billing/2.0/site-configuration/api_keys#publishable-key). ```js const chargebee = Chargebee.init({ site: "YOUR_CHARGEBEE_BILLING_SUBDOMAIN", publishableKey: "test__" // Your publishable API key }); ``` ## `Components` object The `Components` object is used to create and manage instances of UI components for securely collecting sensitive payment information from your customers. ### `components(options)` Creates a `Components` object and sets the default styling and localization options to be applied to the components created using this object. #### Syntax ```js chargebee.components(options); ``` #### Parameters - `options` (Object, required) - `style` (Object) - `theme` (Object) - `appearance` (String) The color scheme for the component. Allowed: `light (default)`, `dark`. - `accentColor` (String) The most dominant color in the component. This color is applied to primary buttons and other interactive elements. Allowed: `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: `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: `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: `none`, `small`, `medium (default)`, `large`, `full`. - `variables` (Object) The variables option is a map of CSS-like variables to CSS values, allowing granular customization of individual components.Note: You can set font family names using `defaultFontFamily` and related options. They're used only when available on the customer's device. Loading custom font files is not supported. - `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 Returns a `Components` instance. #### Example ```js const components = chargebee.components({ style: { theme: { radius: "large", scaling: "100%", }, variables: { colorBackground: "#dcf5bf33", defaultFontFamily: "'Sora', sans-serif", }, rules: { ".g-RadioCardsItem": { background: "linear-gradient(150deg, transparent 60%, var(--gray-9))", }, ".g-BaseButton:where(.g-variant-solid)": { background: "linear-gradient(10deg, var(--gray-9), var(--gray-7))", boxShadow: "0 6px 8px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2)", }, "#payment-container": { padding: "var(--space-6)", minHeight: "150rem", }, }, }, locale: "fr" }); ``` ## `PaymentComponent` object The `PaymentComponent` is a UI component used to collect payment information from your customers. ### `create('payment', options, callbacks)` Creates a `PaymentComponent` object. #### Syntax ```js components.create('payment', options, callbacks) ``` #### Parameters - `componentType` (string, required) Allowed: `payment`. - `options` (Object, required) - `style` (Object) - `theme` (Object) - `appearance` (String) The color scheme for the component. Allowed: `light (default)`, `dark`. - `accentColor` (String) The most dominant color in the component. This color is applied to primary buttons and other interactive elements. Allowed: `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: `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: `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: `none`, `small`, `medium (default)`, `large`, `full`. - `variables` (Object) The variables option is a map of CSS-like variables to CSS values, allowing granular customization of individual components.Note: You can set font family names using `defaultFontFamily` and related options. They're used only when available on the customer's device. Loading custom font files is not supported. - `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 - `channel` (String) Identifies the channel on which the user opens the Payment Component. It is used to determine the payment methods that are available to the user and their order of display. Configure the rules either in Payment Method Display Rules, under the Payment Optimization Engine in the Chargebee dashboard, or in the `paymentMethods.allowed` and `paymentMethods.sortOrder` parameters of the component. Payment Method Display Rules take precedence over the `paymentMethods` parameters. If a rule is set and you omit this option, Chargebee detects the channel as `desktop` or `mobile` from the user's browser. Tablets are treated as `mobile`.When you configure the `paymentMethods` parameters, you can provide a custom value for `channel`. The value must contain 1 to 64 characters, start with a letter or number, and contain only letters, numbers, periods (`.`), underscores (`_`), or hyphens (`-`). Payment Method Display Rules do not support custom channel names.The `paymentMethods` configuration can only be set when creating a Payment Component. You can't change it using `update()`. - `layout` (Object) - `type` (String, required) Allowed: `tab`, `accordion`. - `defaultItemsToShow` (number) Specifies the number of payment methods to display in the UI. Any additional payment methods appear under an expandable menu. - `showRadioButtons` (boolean) - `resetFormOnConfirm` (boolean) Specifies the behavior of the payment form after the `payment_intent` `status` is `authorized` (i.e., the user has authorized the payment amount on the payment method). When set to `true` (default), the payment form locks all fields to prevent further edits. When set to `false`, the payment form displays a new page specific to the payment method, indicating that the payment has been authorized. - `paymentMethods` (Object) - `sortOrder` (Array) 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) 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. - `savePaymentMethod` (Object) Specifies whether and how the customer's payment method is saved in Chargebee Billing. - `consentType` (String, required) Specifies the type of consent required for saving the payment method in Chargebee Billing. Use `consent` to display a checkbox that allows users to provide explicit consent. Use `info` to display a note, saving the payment method without explicit consent. Allowed: `info`, `consent`. - `label` (String) Defines the label text for the consent checkbox. This is applicable only when `consentType` is set to `consent`. - `defaultChecked` (boolean) Indicates whether the consent checkbox is selected by default. This is applicable only when `consentType` is set to `consent`. - `description` (String) Provides additional text to display based on the value of `consentType`. When `consentType` is `consent`, this text is displayed alongside the `label`. When `consentType` is `info`, only this text is displayed. - `selectDefaultPaymentMethod` (boolean) Specifies whether the first payment method is pre-selected for the user. When set to `true` (default), payment methods are listed, and the first method is pre-selected. When set to `false`, payment methods are displayed without any pre-selection. - `options` (Object) - `card` (Object) - `hideCVV` (boolean) Specifies whether to hide the CVV field in the card component. The default value is `false`. - `addressAutoComplete` (boolean) Enables address autocompletion as users type. This feature is powered by Google Maps. The default value is `false`. - `defaultAddressSource` (String) Specifies the default address to use for the card address. When set, users are not prompted for an address. The default value is `undefined`. Allowed: `billingAddress`, `shippingAddress`, `undefined`. - `copyAddressCheckbox` (Object) Displays a checkbox that allows users to use the address specified by `defaultAddressSource` as the card address. If the checkbox is cleared, users can fill in a form to provide a card address. - `label` (String) The text label displayed next to the checkbox. - `logos` (Array) A list of card provider logos to display. If omitted, Payment Components show logos for all supported card providers. Allowed: `amex`, `dinersclub`, `discover`, `jcb`, `mastercard`, `visa`. - `mandate` (Object) Configures the behavior of the mandate popup. Allowed: ``default` : Displays the default mandate popup.`, ``never` : Hides the mandate popup.`, `Object: An object that provides additional properties (see below) to configure the mandate popup.`. - `showMaximumAmount` (boolean) Specifies whether to display the maximum allowed amount for the mandate. - `upi` (Object) - `mandate` (Object) Configures the display behavior of the mandate popup. Allowed: ``default` : Displays the default mandate popup.`, ``never` : Hides the mandate popup.`, `Object: An object that provides additional properties (see below) to configure the mandate popup.`. - `showMaximumAmount` (boolean) Indicates whether to display the maximum allowed amount for the mandate. - `netbanking_emandates` (Object) - `mandate` (Object) Configures the display behavior of the mandate popup. Allowed: ``default` : Displays the default mandate popup.`, ``never` : Hides the mandate popup.`, `Object: An object that provides additional properties (see below) to configure the mandate popup.`. - `showMaximumAmount` (boolean) Indicates whether to display the maximum allowed amount for the mandate. - `paymentIntent` (Object) - `id` (string, required) - `form` (Object) - `customer` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `billingAddress` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `addressLine1` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine2` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine3` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `city` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `state` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `stateCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `countryCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `zip` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `payment` (Object) - `upi` (Object) - `id` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `netbanking_emandates` (Object) - `accountNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `ifscCode` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `bankName` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `accountType` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `online_banking_poland` (Object) - `bankName` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `pay_to` (Object) - `accountNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `bsbNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `faster_payments` (Object) - `accountNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `iban` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `bankName` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `branchCode` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `billingAddress` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `addressLine1` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine2` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine3` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `city` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `state` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `stateCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `countryCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `zip` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `shippingAddress` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `addressLine1` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine2` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine3` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `city` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `state` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `stateCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `countryCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `zip` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `context` (Object) - `cart` (Object) - `lineItems` (Array) - `id` (String, required) - `name` (String) - `description` (String) - `type` (required) Allowed: `plan`, `addon`, `charge`. - `customer` (Object) - `firstName` (String) - `lastName` (String) - `phone` (String) - `email` (String) - `companyName` (String) - `billingAddress` (Object) - `firstName` (String) First name associated with the address - `lastName` (String) Last name associated with the address - `phone` (String) Phone number associated with the address - `email` (String) Email address associated with the address. - `companyName` (String) Company name associated with the 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) - `firstName` (String) First name associated with the address - `lastName` (String) Last name associated with the address - `phone` (String) Phone number associated with the address - `email` (String) Email address associated with the address. - `companyName` (String) Company name associated with the 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) - `onAppReady()` (Function) Triggered when the Payment Component has connected to your page: it has loaded and is ready to send and receive SDK calls. From this point on, calls such as `paymentComponent.update()` are routed to the component, and callbacks such as `onPaymentMethodChange` can fire back to your page.To detect when the payment component is ready for interaction, wait for `onPaymentMethodChange()` instead. - `onError(error)` (Function) Triggered when there is an error either during the rendering of the payment component or at any time during the entire payment flow.The value you return determines the message that the payment component shows inside its iframe. For more information, see `onError()`. - `error` (Object) - `code` (string) Identifies the error. Chargebee derives it from the error's name or its `error_code`, and falls back to `UNKNOWN_CODE`. - `message` (string) Describes the error in a form you can show to the customer. This is the text the payment component displays by default. - `paymentMethod` (string) The payment method that the error came from, such as `card`. The possible values are the same as `PaymentIntent.payment_method_type`. - `error` (Unknown) The original error that Chargebee received, for logging and debugging. - `onSuccess(paymentIntent, extra)` (Function) Triggered when the payment intent is authorized. - `PaymentIntent` (Object) - `id` (string) - `status` (string) Allowed: `authorized`. - `amount` (number) - `gateway_account_id` (string) - `expires_at` (number) - `payment_method_type` (string) Allowed: `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) - `extra` (Unknown) - `onPaymentMethodChange(paymentMethod)` (Function) Triggered after the supported payment methods are loaded and a method becomes active (the initial default selection or a user switch). This is the earliest reliable signal that a payment method is actually showing in the form. Some sub-fields (for example, card fields after BIN lookup) may still be loading when this callback fires. - `paymentMethod` (String) The selected payment method. The possible values are the same as `PaymentIntent.payment_method_type`. - `onSavePaymentMethodChange(value)` (Function) This function is triggered when the user selects or clears the `savePaymentMethod` checkbox. It is applicable only when `savePaymentMethod.consentType` is set to `consent`. - `value` (boolean) Indicates the state of the checkbox. When set to `true`, the checkbox is selected by the user. When set to `false`, the checkbox is cleared by the user. - `onButtonClick()` (Function) An optional function executed when the user clicks the payment submit button or, if available, the payment button component. This function runs before the payment flow begins, including before Apple Pay or Google Pay is launched. Use it for form validation, analytics, logging, or tax calculations that must complete before payment. Return a resolved Promise to proceed with the payment flow, or return a rejected Promise to block the flow. The function must return within one second, or Chargebee will mark the Promise as rejected, halting the payment flow. If the Promise is rejected, the `onError()` callback is triggered with the rejection message. - `onClose()` (Function) #### Return value Returns a `PaymentComponent` object. #### Example **Details** ```js const paymentComponent = components.create( "payment", { style: { theme: {}, variables: {}, rules: {}, }, locale: "en", channel: "desktop", layout: { type: "tab", showRadioButtons: true, defaultItemsToShow: 2, }, paymentMethods: { sortOrder: ["card"], savePaymentMethod: { label: "Save this to your list of payment methods", consentType: "consent", description: "I authorize Chargebee to save this payment method and automatically charge this payment method for any further transactions associated with it.", defaultChecked: false } }, paymentIntent: { id: paymentIntent.id }, form: { customer: { firstName: { required: true, }, lastName: "default", }, shippingAddress: { firstName: { placeholder: "Custom Placeholder", }, addressLine1: { short: true, }, countryCode: { order: 3, }, zip: "default" }, }, context: { cart: { lineItems: [{ id: "1234", type: "plan" }], }, customer: { firstName: "john", lastName: "doe", }, }, }, { onAppReady() { // Payment Component is connected; safe to call paymentComponent SDK methods. console.log("Payment Component connected"); }, onError(error) { console.log(error); }, onSuccess(PaymentIntent, extra) { console.log(PaymentIntent, extra); }, onPaymentMethodChange(paymentMethod) { console.log(paymentMethod); }, onButtonClick(){ // if validation is failure // return Promise.reject('validation_failure') return Promise.resolve(); }, onClose() { console.log("Payment Component closed"); } }, ); ``` ### `mount(target)` Inserts the payment UI component into the DOM. Success means the Payment Component is attached to your page and ready to send and receive SDK calls. It does not wait for the payment-method list to load or for form fields to render; for that, listen for `onPaymentMethodChange`. #### Syntax ```js await paymentComponent.mount(target); ``` #### Parameters - `target` (string | HTMLElement, required) DOM element or a CSS selector where the component should be mounted. #### Return value Returns a promise that resolves to `true` if the component mounts successfully, or `false` if an error occurs. ### `update(options)` Updates the Payment Component options using a shallow merge and remounts the component. Success means the Payment Component is ready to send and receive SDK calls. It does not wait for the payment-method list to load or for form fields to render; for that, listen for `onPaymentMethodChange`. #### Syntax ```js paymentComponent.update(options) ``` #### Parameters - `options` (Object) - `style` (Object) - `theme` (Object) - `appearance` (String) The color scheme for the component. Allowed: `light (default)`, `dark`. - `accentColor` (String) The most dominant color in the component. This color is applied to primary buttons and other interactive elements. Allowed: `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: `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: `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: `none`, `small`, `medium (default)`, `large`, `full`. - `variables` (Object) The variables option is a map of CSS-like variables to CSS values, allowing granular customization of individual components.Note: You can set font family names using `defaultFontFamily` and related options. They're used only when available on the customer's device. Loading custom font files is not supported. - `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 - `paymentIntent` (Object) - `id` (string, required) - `paymentMethods` (Object) - `sortOrder` (Array) 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) 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. - `savePaymentMethod` (Object) Specifies whether and how the customer's payment method is saved in Chargebee Billing. - `consentType` (String, required) Specifies the type of consent required for saving the payment method in Chargebee Billing. Use `consent` to display a checkbox that allows users to provide explicit consent. Use `info` to display a note, saving the payment method without explicit consent. Allowed: `info`, `consent`. - `label` (String) Defines the label text for the consent checkbox. This is applicable only when `consentType` is set to `consent`. - `defaultChecked` (boolean) Indicates whether the consent checkbox is selected by default. This is applicable only when `consentType` is set to `consent`. - `description` (String) Provides additional text to display based on the value of `consentType`. When `consentType` is `consent`, this text is displayed alongside the `label`. When `consentType` is `info`, only this text is displayed. - `selectDefaultPaymentMethod` (boolean) Specifies whether the first payment method is pre-selected for the user. When set to `true` (default), payment methods are listed, and the first method is pre-selected. When set to `false`, payment methods are displayed without any pre-selection. - `options` (Object) - `card` (Object) - `hideCVV` (boolean) Specifies whether to hide the CVV field in the card component. The default value is `false`. - `addressAutoComplete` (boolean) Enables address autocompletion as users type. This feature is powered by Google Maps. The default value is `false`. - `defaultAddressSource` (String) Specifies the default address to use for the card address. When set, users are not prompted for an address. The default value is `undefined`. Allowed: `billingAddress`, `shippingAddress`, `undefined`. - `copyAddressCheckbox` (Object) Displays a checkbox that allows users to use the address specified by `defaultAddressSource` as the card address. If the checkbox is cleared, users can fill in a form to provide a card address. - `label` (String) The text label displayed next to the checkbox. - `logos` (Array) A list of card provider logos to display. If omitted, Payment Components show logos for all supported card providers. Allowed: `amex`, `dinersclub`, `discover`, `jcb`, `mastercard`, `visa`. - `mandate` (Object) Configures the behavior of the mandate popup. Allowed: ``default` : Displays the default mandate popup.`, ``never` : Hides the mandate popup.`, `Object: An object that provides additional properties (see below) to configure the mandate popup.`. - `showMaximumAmount` (boolean) Specifies whether to display the maximum allowed amount for the mandate. - `upi` (Object) - `mandate` (Object) Configures the display behavior of the mandate popup. Allowed: ``default` : Displays the default mandate popup.`, ``never` : Hides the mandate popup.`, `Object: An object that provides additional properties (see below) to configure the mandate popup.`. - `showMaximumAmount` (boolean) Indicates whether to display the maximum allowed amount for the mandate. - `netbanking_emandates` (Object) - `mandate` (Object) Configures the display behavior of the mandate popup. Allowed: ``default` : Displays the default mandate popup.`, ``never` : Hides the mandate popup.`, `Object: An object that provides additional properties (see below) to configure the mandate popup.`. - `showMaximumAmount` (boolean) Indicates whether to display the maximum allowed amount for the mandate. - `layout` (Object) - `type` (String, required) Allowed: `tab`, `accordion`. - `defaultItemsToShow` (number) Specifies the number of payment methods to display in the UI. Any additional payment methods appear under an expandable menu. - `showRadioButtons` (boolean) - `resetFormOnConfirm` (boolean) Specifies the behavior of the payment form after the `payment_intent` `status` is `authorized` (i.e., the user has authorized the payment amount on the payment method). When set to `true` (default), the payment form locks all fields to prevent further edits. When set to `false`, the payment form displays a new page specific to the payment method, indicating that the payment has been authorized. - `form` (Object) - `customer` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `billingAddress` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `addressLine1` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine2` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine3` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `city` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `state` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `stateCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `countryCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `zip` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `payment` (Object) - `upi` (Object) - `id` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `netbanking_emandates` (Object) - `accountNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `ifscCode` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `bankName` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `accountType` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `online_banking_poland` (Object) - `bankName` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `pay_to` (Object) - `accountNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `bsbNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `faster_payments` (Object) - `accountNumber` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `iban` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `bankName` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `branchCode` (Object) Allowed: `Object`, `'default'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `billingAddress` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `addressLine1` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine2` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine3` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `city` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `state` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `stateCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `countryCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `zip` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `shippingAddress` (Object) - `firstName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `lastName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `phone` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `email` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `companyName` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `addressLine1` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine2` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `addressLine3` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `city` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `state` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `stateCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `countryCode` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `required` (boolean) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `allowedValues` (Array) - `label` (string, required) - `value` (string, required) - `zip` (Object) Allowed: `Object`, `'default'`, `'never'`. - `label` (string) - `readOnly` (boolean) - `short` (boolean) - `placeholder` (string) - `order` (number) - `required` (boolean) - `context` (Object) - `cart` (Object) - `lineItems` (Array) - `id` (String, required) - `name` (String) - `description` (String) - `type` (required) Allowed: `plan`, `addon`, `charge`. - `customer` (Object) - `firstName` (String) - `lastName` (String) - `phone` (String) - `email` (String) - `companyName` (String) - `billingAddress` (Object) - `firstName` (String) First name associated with the address - `lastName` (String) Last name associated with the address - `phone` (String) Phone number associated with the address - `email` (String) Email address associated with the address. - `companyName` (String) Company name associated with the 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) - `firstName` (String) First name associated with the address - `lastName` (String) Last name associated with the address - `phone` (String) Phone number associated with the address - `email` (String) Email address associated with the address. - `companyName` (String) Company name associated with the 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 value None. ### `validate()` Runs validation on the currently selected payment method's form and returns whether it is ready to be confirmed. As a side effect, any field-level errors are surfaced inline within the Payment Component (for example, "Card number is invalid", "Expiry is required"). > **Call `validate()` first when using a custom button** > > `confirm()` does **not** validate the form before submitting. If you are driving the payment flow from your own custom Pay button (rather than using the [`PaymentButtonComponent`](#paymentbuttoncomponent-object)), you must call `await paymentComponent.validate()` and only proceed when it resolves to `true`. The built-in `PaymentButtonComponent` validates the form internally before calling `confirm()`, so you do not need to do this yourself when using it. #### Syntax ```js await paymentComponent.validate() ``` #### Return value A promise that resolves to a `boolean`: - `true` - every required field on the active payment method is filled in and passes validation. Safe to call `confirm()`. - `false` - one or more fields are missing or invalid (errors are now visible to the user). ### `confirm()` Initiates the payment authorization process for the currently selected payment method. After the user completes the payment, the function triggers the `onSuccess()` callback with the authorized `paymentIntent`. If anything goes wrong during authorization, the [`onError()`](#onerror) callback fires instead. This one call also authenticates the customer when the payment requires it. The authentication path depends on the payment method, but your code is the same in both cases: - **Cards**: [3D Secure](https://www.chargebee.com/docs/payments/2.0/payment-components/overview#3d-secure-and-sca) runs inside `confirm()`. If the gateway requires a challenge, Chargebee opens it for the customer to authenticate with their card issuer. Don't call the [3DS Helper](https://www.chargebee.com/docs/payments/2.0/card-components-and-helpers/3ds-helper) alongside Payment Components. - **Bank-based methods** such as iDEAL, Bancontact, Klarna, UPI, and netbanking: `confirm()` opens the customer's bank authorization page in a window that Chargebee manages, and waits for the result. Don't call [`handlePayment()`](https://www.chargebee.com/docs/js/cbinstanceobj-api-ref#handlepayment-paymentmethodtype-paymentoptions) or the [Payment method helper](https://www.chargebee.com/docs/payments/2.0/card-components-and-helpers/payment-method-helper) yourself. Either way, `confirm()` resolves without a value. The `onSuccess()` callback fires once the `payment_intent` reaches the `authorized` status, and `onError()` fires otherwise. > **Call `validate()` first when using a custom button** > > `confirm()` does **not** validate the form before submitting. If you are driving the payment flow from your own custom Pay button (rather than using the [`PaymentButtonComponent`](#paymentbuttoncomponent-object)), you must call `await paymentComponent.validate()` and only proceed when it resolves to `true`. The built-in `PaymentButtonComponent` validates the form internally before calling `confirm()`, so you do not need to do this yourself when using it. #### Syntax ```js await paymentComponent.confirm() ``` #### Example ```js async function onPayClick() { const isValid = await paymentComponent.validate(); if (!isValid) { // validate() has surfaced inline errors in the form return; } await paymentComponent.confirm(); } ``` #### Return value None. Authorization results are delivered via the `onSuccess()` and `onError()` callbacks. ### `close()` Removes the mounted component from the DOM and triggers the `onClose()` callback of the Payment Component if defined. #### Syntax ```js paymentComponent.close() ``` #### Return value None. ### `onError()` callback Called when an error occurs while the Payment Component renders, or at any point during the payment flow. Pass this function in the `callbacks` object of [`create('payment', options, callbacks)`](#create-payment-options-callbacks). The component calls this function before it displays anything, and the value you return determines the message that the component then shows inside its iframe. #### Syntax ```js onError(error) ``` #### Parameters - `error` (Object) - `code` (string) Identifies the error. Chargebee derives it from the error's name or its `error_code`, and falls back to `UNKNOWN_CODE`. - `message` (string) Describes the error in a form you can show to the customer. This is the text the payment component displays by default. - `paymentMethod` (string) The payment method that the error came from, such as `card`. The possible values are the same as `PaymentIntent.payment_method_type`. - `error` (Unknown) The original error that Chargebee received, for logging and debugging. #### Return value The component reads the returned value synchronously to decide what to show inside its iframe: Return value Message shown inside the component `string` Your text, unless the error has a translated message. `false` No message. Use this when your page reports the error in its own UI. Nothing Chargebee's default message, which is the `error.message` value.
Translated messages take precedence over the string you return. When Chargebee maps the error to a known cause and the current [locale](#localization) has a translation for that cause, the component shows the translated message and ignores your string. To suppress the message for every error, including errors that have a translation, return `false`. A promise counts as returning nothing, because the component doesn't wait for it to settle. The message clears itself after a few seconds. For more information, see [Customize the error message shown inside Payment Components](https://www.chargebee.com/docs/payments/2.0/payment-components/use-cases#customize-the-error-message-shown-inside-payment-components). #### Example ```js const paymentComponent = components.create( "payment", { paymentIntent: { id: paymentIntent.id } }, { onError(error) { console.log(error.code, error.message); return "We couldn't process your payment. Try again or use another payment method."; }, }, ); ``` ## `PaymentButtonComponent` object The `PaymentButtonComponent` is a prebuilt UI button that submits the payment form when clicked. The button dynamically updates based on the selected payment method. > **Optional component** > > The payment button component is optional. You can implement your own custom button. However, even if you choose not to use Chargebee's payment button component, Chargebee still renders payment buttons for all [wallet-based payment methods](https://www.chargebee.com/docs/payments/2.0/payment-components/overview#wallets) that the user selects. ### `create('payment-button', options, callbacks)` Creates a `PaymentButtonComponent` object. #### Syntax ```js components.create('payment-button', options, callbacks) ``` #### Parameters - `componentType` (string, required) Allowed: `payment-button`. - `options` (Object, required) - `style` (Object) - `theme` (Object) - `appearance` (String) The color scheme for the component. Allowed: `light (default)`, `dark`. - `accentColor` (String) The most dominant color in the component. This color is applied to primary buttons and other interactive elements. Allowed: `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: `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: `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: `none`, `small`, `medium (default)`, `large`, `full`. - `variables` (Object) The variables option is a map of CSS-like variables to CSS values, allowing granular customization of individual components.Note: You can set font family names using `defaultFontFamily` and related options. They're used only when available on the customer's device. Loading custom font files is not supported. - `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 - `paymentMethods` (Object) - `options` (Object) - `card` (Object) - `text` (string) The text appearing on the payment button when the card payment method is selected. - `google_pay` (Object) - `buttonColor` (String) Color of the Google Pay button. Allowed: `default`, `black`, `white`. - `buttonType` (String) Type of the Google Pay button. Allowed: `long`, `short`, `book`, `buy`, `checkout`, `donate`, `order`, `pay`, `plain`, `subscribe`. - `buttonSizeMode` (String) Size options for the Google Pay button. Allowed: `static`, `fill`. - `buttonLocale` (String) Locale options for the Google Pay Button. Allowed: `en`, `ar`, `bg`, `ca`, `cs`, `da`, `de`, `el`, `es`, `et`, `fi`, `fr`, `hr`, `id`, `it`, `ja`, `ko`, `ms`, `nl`, `no`, `pl`, `pt`, `ru`, `sk`, `sl`, `sr`, `sv`, `th`, `tr`, `uk`, `zh`. - `requestPayerEmail` (boolean) - `requestBillingAddress` (boolean) - `requestShippingAddress` (boolean) - `apple_pay` (Object) - `buttonColor` (String) Allowed: `white`, `white-outline`, `black`. - `buttonType` (String) Allowed: `add-money`, `book`, `buy`, `check-out`, `continue`, `contribute`, `donate`, `order`, `pay`, `plain`, `reload`, `rent`, `set-up`, `subscribe`, `support`, `tip`, `top-up`. - `requestPayerEmail` (boolean) - `locale` (String) - `requestBilling` (boolean) - `requestShipping` (boolean) - `requestPayerPhone` (boolean) - `requestPayerName` (boolean) - `shippingOptions` (Array) - `label` (String, required) - `id` (String, required) - `amount` (String) - `detail` (String) - `displayItems` (Array) - `label` (String, required) - `amount` (String, required) - `totalLabel` (String) - `merchantCountryCode` (String) - `storeName` (String) - `onshippingmethodselected` (Function) Trigerred when the user selects a shipping method. See Apple Pay docs for more details. - `onshippingcontactselected` (Function) Trigerred when the user selects a shipping contact in the payment sheet. See Apple Pay docs for more details. - `onpaymentmethodselected` (Function) Trigerred when the user selects a new payment method. See Apple Pay docs for more details. - `recurringPaymentRequest` (Object) Represents a request to set up a recurring payment using Apple Pay merchant token (MPAN). The schema must match ApplePayRecurringPaymentRequest. - `paypal_express_checkout` (Object) For more information see PayPal documentation. - `locale` (String) Locale for Paypal Express Checkout. - `funding` (Object) - `allowed` (Array) - `disallowed` (Array) - `style` (Object) - `label` (String) Allowed: `checkout`, `credit`, `pay`, `buynow`, `paypal`, `installment`. - `shape` (String) Allowed: `pill`, `rect`. - `layout` (String) Allowed: `vertical`, `horizontal`. - `height` (String) Allowed: `small`, `medium`, `large`. - `size` (String) Allowed: `small`, `medium`, `large`, `responsive`. - `color` (String) Allowed: `gold`, `blue`, `silver`, `white`, `black`. - `installmentperiod` (unknown) - `tagline` (boolean) - `disableMaxWidth` (boolean) - `bancontact` (Object) - `text` (string) The text appearing on the payment button when the Bancontact payment method is selected. - `ideal` (Object) - `text` (string) The text appearing on the payment button when the iDEAL payment method is selected. - `upi` (Object) - `text` (string) The text appearing on the payment button when the UPI payment method is selected. - `netbanking_emandates` (Object) - `text` (string) The text appearing on the payment button when the Netbanking E-Mandates payment method is selected. - `klarna_pay_now` (Object) - `text` (string) The text appearing on the payment button when the Klarna Pay Now payment method is selected. - `online_banking_poland` (Object) - `text` (string) The text appearing on the payment button when the Online Banking Poland payment method is selected. - `direct_debit` (Object) - `text` (string) The text appearing on the payment button when the Direct Debit payment method is selected. - `pay_to` (Object) - `text` (string) The text appearing on the payment button when the PayTo payment method is selected. - `faster_payments` (Object) - `text` (string) The text appearing on the payment button when the Faster Payments payment method is selected. - `callbacks` (Object) - `onError(error)` (Function) Triggered when the payment button component fails to render.Errors from the payment flow itself are reported through the `onError()` callback of the payment component, and the payment component also decides what message to show. Any value that you return from this callback is ignored. - `error` (Unknown) - `onClose()` (Function) #### Return value Returns a `PaymentButtonComponent` object. #### Example **Details** ```js const paymentButtonComponent = components.create( "payment-button", { style: { theme: {}, variables: {}, rules: {}, }, locale: "en", paymentMethods: { options: { card: { text: "Pay", }, google_pay: { buttonSizeMode: "fill", }, }, }, }, { onError(error) { console.log(error); }, onClose() { console.log("payment button component closed"); }, }, ); ``` ### `mount(target)` Inserts the payment button component into the DOM. #### Syntax ```js await paymentButtonComponent.mount(target); ``` #### Parameters - `target` (string | HTMLElement, required) DOM element or a CSS selector where the component should be mounted. #### Return value Returns a promise that resolves to true if the component mounts successfully, or false if an error occurs. ### `update(options)` Updates the payment button component options using a shallow merge and remounts the button. #### Syntax ```js paymentButtonComponent.update(options) ``` #### Parameters - `options` (Object) - `style` (Object) - `theme` (Object) - `appearance` (String) The color scheme for the component. Allowed: `light (default)`, `dark`. - `accentColor` (String) The most dominant color in the component. This color is applied to primary buttons and other interactive elements. Allowed: `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: `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: `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: `none`, `small`, `medium (default)`, `large`, `full`. - `variables` (Object) The variables option is a map of CSS-like variables to CSS values, allowing granular customization of individual components.Note: You can set font family names using `defaultFontFamily` and related options. They're used only when available on the customer's device. Loading custom font files is not supported. - `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 - `paymentMethods` (Object) - `options` (Object) - `card` (Object) - `text` (string) The text appearing on the payment button when the card payment method is selected. - `google_pay` (Object) - `buttonColor` (String) Color of the Google Pay button. Allowed: `default`, `black`, `white`. - `buttonType` (String) Type of the Google Pay button. Allowed: `long`, `short`, `book`, `buy`, `checkout`, `donate`, `order`, `pay`, `plain`, `subscribe`. - `buttonSizeMode` (String) Size options for the Google Pay button. Allowed: `static`, `fill`. - `buttonLocale` (String) Locale options for the Google Pay Button. Allowed: `en`, `ar`, `bg`, `ca`, `cs`, `da`, `de`, `el`, `es`, `et`, `fi`, `fr`, `hr`, `id`, `it`, `ja`, `ko`, `ms`, `nl`, `no`, `pl`, `pt`, `ru`, `sk`, `sl`, `sr`, `sv`, `th`, `tr`, `uk`, `zh`. - `requestPayerEmail` (boolean) - `requestBillingAddress` (boolean) - `requestShippingAddress` (boolean) - `apple_pay` (Object) - `buttonColor` (String) Allowed: `white`, `white-outline`, `black`. - `buttonType` (String) Allowed: `add-money`, `book`, `buy`, `check-out`, `continue`, `contribute`, `donate`, `order`, `pay`, `plain`, `reload`, `rent`, `set-up`, `subscribe`, `support`, `tip`, `top-up`. - `requestPayerEmail` (boolean) - `locale` (String) - `requestBilling` (boolean) - `requestShipping` (boolean) - `requestPayerPhone` (boolean) - `requestPayerName` (boolean) - `shippingOptions` (Array) - `label` (String, required) - `id` (String, required) - `amount` (String) - `detail` (String) - `displayItems` (Array) - `label` (String, required) - `amount` (String, required) - `totalLabel` (String) - `merchantCountryCode` (String) - `storeName` (String) - `onshippingmethodselected` (Function) Trigerred when the user selects a shipping method. See Apple Pay docs for more details. - `onshippingcontactselected` (Function) Trigerred when the user selects a shipping contact in the payment sheet. See Apple Pay docs for more details. - `onpaymentmethodselected` (Function) Trigerred when the user selects a new payment method. See Apple Pay docs for more details. - `recurringPaymentRequest` (Object) Represents a request to set up a recurring payment using Apple Pay merchant token (MPAN). The schema must match ApplePayRecurringPaymentRequest. - `paypal_express_checkout` (Object) For more information see PayPal documentation. - `locale` (String) Locale for Paypal Express Checkout. - `funding` (Object) - `allowed` (Array) - `disallowed` (Array) - `style` (Object) - `label` (String) Allowed: `checkout`, `credit`, `pay`, `buynow`, `paypal`, `installment`. - `shape` (String) Allowed: `pill`, `rect`. - `layout` (String) Allowed: `vertical`, `horizontal`. - `height` (String) Allowed: `small`, `medium`, `large`. - `size` (String) Allowed: `small`, `medium`, `large`, `responsive`. - `color` (String) Allowed: `gold`, `blue`, `silver`, `white`, `black`. - `installmentperiod` (unknown) - `tagline` (boolean) - `disableMaxWidth` (boolean) - `bancontact` (Object) - `text` (string) The text appearing on the payment button when the Bancontact payment method is selected. - `ideal` (Object) - `text` (string) The text appearing on the payment button when the iDEAL payment method is selected. - `upi` (Object) - `text` (string) The text appearing on the payment button when the UPI payment method is selected. - `netbanking_emandates` (Object) - `text` (string) The text appearing on the payment button when the Netbanking E-Mandates payment method is selected. - `klarna_pay_now` (Object) - `text` (string) The text appearing on the payment button when the Klarna Pay Now payment method is selected. - `online_banking_poland` (Object) - `text` (string) The text appearing on the payment button when the Online Banking Poland payment method is selected. - `direct_debit` (Object) - `text` (string) The text appearing on the payment button when the Direct Debit payment method is selected. - `pay_to` (Object) - `text` (string) The text appearing on the payment button when the PayTo payment method is selected. - `faster_payments` (Object) - `text` (string) The text appearing on the payment button when the Faster Payments payment method is selected. #### Return value None. ### `close()` Removes the mounted payment button component from the DOM and triggers the `onClose()` callback of the payment button component if defined. #### Syntax ```js paymentButtonComponent.close() ``` #### Return value None. ## `PaymentIntent` object The [`payment_intent` API object](https://apidocs.chargebee.com/docs/api/payment_intents) is provided below for reference. **Parameters** - `id` (string, required) - `status` (string) Allowed: `consumed`, `in_progress`, `inited`, `expired`, `authorized`. - `amount` (number) - `gateway_account_id` (string) - `expires_at` (number) - `payment_method_type` (string) Allowed: `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) ## Payment methods The following table lists the supported payment methods: 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`
## Localization Payment Components support multiple locales, as shown in the following table: Code Language `es` Spanish `en` English `fr` French `de` German `it` Italian `pt` Portuguese
> **Override default translations** > > You can customize the translated text on the Payment Components UI using the Chargebee Billing [Language Pack](https://www.chargebee.com/docs/payments/2.0/payment-components/use-cases#customize-field-and-label-text-for-different-languages).