Skip to content

Latest commit

 

History

History

chargebee-js-vue

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dist
dist
 
 
src
src
 
 
.babelrc
.babelrc
 
 
CHANGELOG.md
CHANGELOG.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

README.md

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

Reference:

Chargebee Components - JS Docs

Support

Have any queries regarding the implementation? Reach out to [email protected]