Chargebee JS Vue Wrapper
Vue wrapper for Chargebee Components
Examples
For detailed examples: Click here
Live Demo
View live demo here
Installation
Install from npm:
npm install @chargebee/chargebee-js-vue-wrapperUsage
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>Basic usage
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>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 = 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>3DS Authorization
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>Components and APIs
Card Component (docs)
| 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 |
Events (docs)
| 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 |
Field Components (docs)
- CardNumber
- CardExpiry
- CardCVV
| Props | Description | Datatype |
|---|---|---|
class |
CSS Classname for container element | String |
styles |
Styles for inidividual field | Styles |
placeholder |
Placeholder for the field | String |
Event Props (docs)
| 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 |
Reference:
Chargebee Components - JS Docs
Support
Have any queries regarding the implementation? Reach out to support@chargebee.com