# Chargebee JS Vue Wrapper Vue wrapper for Chargebee Components ## Examples For detailed examples: [Click here](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/vue/cb-components-examples#readme) ## Live Demo View live demo [here](https://www.recur.in/components-examples/vue/#/example1) ## Installation Install from npm: ```bash npm install @chargebee/chargebee-js-vue-wrapper ``` ## Usage Chargebee Components requires you to initialize chargebee js with `site` and `publishableKey` > Wondering where to obtain your publishable API key? [Refer here](https://www.chargebee.com/docs/api_keys.html) In your `index.html`: ```html ...

``` ### Basic usage In your vue component ```js ``` ### A more complex example: >Note: If vue version is 3.2 or less, please add the following line to your Vue application bootstrap > `app.config.unwrapInjectedRef = true` > [Reference documentation](https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity) ```js ``` ### 3DS Authorization In your vue component ```js ``` ## Components and APIs #### Card Component ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)) Props | Description | Datatype ------|-------------|--------- `class` | CSS Class name for the container element | String `fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) `classes` | Set of CSS classnames that get substituted for various [events](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [Classes](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) `locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) `styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) `placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) `ref` | Vue reference(ref) for card component | [Vue ref](https://vuejs.org/v2/api/#vm-refs) ##### Events ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)) Props | Description | Arguments ------|-------------|--------- `@ready` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) `@change` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) `@focus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) `@blur` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) #### Field Components ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)) * CardNumber * CardExpiry * CardCVV Props | Description | Datatype ------|-------------|--------- `class` | CSS Classname for container element | String `styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) `placeholder` | Placeholder for the field | String ##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)) Props | Description | Arguments ------|-------------|--------- `@ready` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) `@change` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) `@focus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) `@blur` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) ## Reference: [Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration) ## Support Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com)