@chargebee/chargebee-js-vue-wrapper NPM

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-wrapper

Usage

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 = true Reference 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