@chargebee/chargebee-js-vue-wrapper

v0.3.2

Published

a year ago

Vue wrapper for Chargebee.js Components

Downloads

45,357

0High
0Medium
0Low

chargebee

chargebee chargebee.js chargebee components chargebee vue chargebee vue wrapper chargebee.js vue

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme