@chargebee/chargebee-js-vue-wrapper
Advanced tools
Vue wrapper for Chargebee Components
For detailed examples: Click here
View live demo here
Install from npm:
npm install @chargebee/chargebee-js-vue-wrapper
Chargebee Components requires you to initialize chargebee js with site and publishableKey
Wondering where to obtain your publishable API key? Refer here
In your index.html:
<html>
<head>
...
<script src="https://js.chargebee.com/v2/chargebee.js"></script>
<script>
Chargebee.init({
site: 'your-site'
publishableKey: 'your-publishable-key'
})
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
In your vue component
<template>
<div>
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
...
<card-component ref="cardComponent" />
<button type="submit" id="tokenize" v-on:click="onSubmit">Submit</button>
...
</form>
</div>
</div>
</template>
<script>
import {CardComponent} from '@chargebee/chargebee-js-vue-wrapper';
export default {
name: 'app',
components: {
'card-component': CardComponent,
},
methods: {
onSubmit (e) {
e.preventDefault()
this.$refs.cardComponent.tokenize().then(data => {
console.log('chargebee token', data.token)
})
}
}
}
</script>
Note: If vue version is 3.2 or less, please add the following line to your Vue application bootstrap
app.config.unwrapInjectedRef = trueReference documentation
<template>
<div>
<div class="example-3" id="example-3" >
<form>
<card-component class="fieldset" ref="cardComponent"
:fonts="fonts"
:styles="styles"
:locale="locale"
:classes="classes"
@ready="onReady"
@change="onChange"
>
<card-number class="field empty" @focus="onFocus" :placeholder="'4111 1111 1111 1111'" />
<card-expiry class="field empty" @focus="onFocus" :placeholder="'MM / YY'" />
<card-cvv class="field empty" @focus="onFocus" :placeholder="'CVV'" />
</card-component>
<button type="submit" v-on:click="onSubmit">Submit</button>
<div id="errors">{{errorMessage}}</div>
</form>
</div>
</div>
</template>
<script>
import {CardComponent, CardNumber, CardExpiry, CardCvv} from '@chargebee/chargebee-js-vue-wrapper';
export default {
name: 'app',
components: {
'card-component': CardComponent,
'card-number': CardNumber,
'card-expiry': CardExpiry,
'card-cvv': CardCvv,
},
data () {
return {
styles: {
base: {
color: '#fff',
fontWeight: 600,
fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
':focus': {
color: '#424770'
},
'::placeholder': {
color: '#9BACC8'
},
':focus::placeholder': {
color: '#CFD7DF'
}
},
invalid: {
color: '#fff',
':focus': {
color: '#FA755A'
},
'::placeholder': {
color: '#FFCCA5'
}
}
},
locale: 'en',
classes: {
focus: 'focus',
complete: 'complete',
invalid: 'invalid',
empty: 'empty'
},
fonts: [
{
src: 'https://mysite.com/assets/my-font.woff',
fontStyle: 'italic',
fontFamily: 'Myfont',
fontWeight: '500'
},
'https://fonts.googleapis.com/css?family=Lato'
],
errors: {},
errorMessage: ''
}
},
methods: {
onSubmit (e) {
e.preventDefault()
this.$refs.cardComponent.tokenize().then(data => {
console.log('chargebee token', data.token)
})
},
onChange (status) {
let errors = {
...this.errors,
[status.field]: status.error
}
this.errors = errors
let {message} = Object.values(errors).filter(message => !!message).pop() || {}
this.errorMessage = message
},
onFocus (event) {
console.log(event.field, 'focused')
},
onReady (el) {
el.focus()
}
}
}
</script>
In your vue component
<template>
<div>
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
...
<card-component ref="cardComponent" />
<button type="submit" id="authorize" v-on:click="onSubmit">Submit</button>
...
</form>
</div>
</div>
</template>
<script>
import {CardComponent} from '@chargebee/chargebee-js-vue-wrapper';
export default {
name: 'app',
components: {
'card-component': CardComponent,
},
mounted: function() {
this.createPaymentIntent().then(intent => {
this.paymentIntent = intent;
});
},
data: function() {
return {
paymentIntent: null,
additionalData: {
// Additional params to improve chances of frictionless flow
}
}
},
methods: {
createPaymentIntent() {
// Make ajax call to server to create a paymentIntent
},
onSubmit (e) {
e.preventDefault()
this.$refs.cardComponent.authorizeWith3ds(this.paymentIntent, this.additionalData)
.then(authorizedIntent => {
console.log('Success', authorizedIntent.id)
}).catch(error => {
consoel.error('Error', error)
})
}
}
}
</script>
| Props | Description | Datatype |
|---|---|---|
class | CSS Class name for the container element | String |
fonts | An array of font faces or links | Fonts |
classes | Set of CSS classnames that get substituted for various events | Classes |
locale | Language code | Locale |
styles | Set of style customizations | Styles |
placeholder | Set of placeholders for the card fields | Placeholder |
ref | Vue reference(ref) for card component | Vue ref |
| Props | Description | Arguments |
|---|---|---|
@ready | Triggers when component is mounted and ready | Field |
@change | Triggers for every state change | Field State |
@focus | Triggers when component is focused | Field State |
@blur | Triggers when component is blurred | Field State |
| Props | Description | Datatype |
|---|---|---|
class | CSS Classname for container element | String |
styles | Styles for inidividual field | Styles |
placeholder | Placeholder for the field | String |
| Props | Description | Arguments |
|---|---|---|
@ready | Triggers when component is mounted and ready | Field |
@change | Triggers for every state change | Field State |
@focus | Triggers when component is focused | Field State |
@blur | Triggers when component is blurred | Field State |
Chargebee Components - JS Docs
Have any queries regarding the implementation? Reach out to support@chargebee.com
FAQs
Vue wrapper for Chargebee.js Components
The npm package @chargebee/chargebee-js-vue-wrapper receives a total of 9,649 weekly downloads. As such, @chargebee/chargebee-js-vue-wrapper popularity was classified as popular.
We found that @chargebee/chargebee-js-vue-wrapper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.