@chargebee/chargebee-js-vue-wrapper

    0.2.2 • Public • Published

    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:

    <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

    Install

    npm i @chargebee/chargebee-js-vue-wrapper

    DownloadsWeekly Downloads

    1,163

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    56.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • chargebee