ire-chargifyjs-lib v1.0.8

ire-chargifyjs-library

Componetized Vue Module for ChargifyJS

This component allows you to quickly implement ChargifyJS. Essentially it will act as your billing form. You'll need to define 3 endpoints on your backend that this component can talk to: A create endpoint, a coupon check endpoint, and a callback url. You can also provide additional form items that you want to be passed to your create endpoint. Once the user fills out the information and submits the form, it will create a token with Chargify, then regex post the form to the create endpoint that you define. On successful submission of the form it will redirect to the callback url that you define.

Using Component

1. Install

$ npm i ire-chargifyjs-lib

2. Register Component

import IreChargifyJsComponent from 'ire-chargifyjs-lib';
Vue.use(IreChargifyJsComponent);

3. Add Component

<chargifyjs-module></chargifyjs-module>

4. Props Needed

• User

  "user": {
    "name": "Nathan Back", // If name and/or email isn't passed in then an input group will show for them to fill out.
    "email": "nback@insiderealestate.com",
    "sid": 12345
  }

• Chargify Object

  "chargifyObj": {
    "plan": {
      "price": "150.00",
      "description": "3 Week Boost"
    },
    "serverHost": "https://iretest.chargify.com",
    "publicKey": "xxxx_xxxxxxxxxxxxxxxxxxxxxxxx"
  }

• API Endpoints (These are going to have to be defined on your backend)

  "apiEndpoints": {
    "subscriptionEndpoint": "http://propertyboost.test/ad/store",
    "couponEndpoint": "http://propertyboost.test/coupon/check?couponCode=",
    "redirectUrl": "http://propertyboost.test/thanks" // Your subscription endpoint needs to pass back the resource id of the stored item and the component will append it to the redirectUrl (i.e. "http://propertyboost.test/thanks/12")
  }

• Additional Form Items (These are anything you want submitted with the form)

  "additionalFormItems": {
    "mls": { // this will be the name and id of the element.
      "type": 'text', // You can specify the <input> type if needed
      "hidden": false, // You may already have the data you need that you just want passed in the form. This is how you hide an element
      "data": '1', // This will be your v-model for the input. You can pass data if you have it.
      "placeholder": ''
    },
    "mlsid": {
      "type": 'text',
      "hidden": false,
      "data": '12345',
      "placeholder": ''
    }
  }

Development

Prereqs

1. Have vue-cli installed:

$ npm install -g @vue/cli

2. Have a global service addon installed:

$ npm install -g @vue/cli-service-global

Getting started

1. Clone the repo
2. npm install

Now you can run:

$ vue serve src/ChargifyJs.vue

The project should now be serving at http://localhost:8080/

Publishing to the npm module

More prereqs

1. Install bili for building

$ npm install --save-dev bili

2. Install these for transpiling

$ npm install --save-dev rollup-plugin-vue
$ npm install --save-dev vue-template-compiler

3. Create an account with NPM and $ npm login from the project directory.

Build and Deploy

$ npx bili && npm publish