CoCreate-api

CoCreate-api is a simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. CoCreate-api includes the client component and server side for api processing.

Install

npm i @cocreate/api

Or you can use cdn link:

<script>https://cdn.cocreate.app/api/latest/CoCreate-api.min.js</script>

Dependencies components

CoCreate.js, CoCreate-action.js, CoCreate-render.js,

Usage

Install package

npm i @cocreate/api

Or you can use cdn link:

<script>https://cdn.cocreate.app/api/latest/CoCreate-api.min.js</script>

Server run

npm run start

Server's default port is 8081.

Client side

In order to the client to use the local server, it should be set as follows.


		var CoCreateConfig = {
	        apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
	        organization_id: '5ff747727005da1c272740ab',
	        host: 'localhost:8081'
	    }
					    

CoCreate-api functions

  • register(module_name, instance)string required

    The function that register cocreate-api module.

    CoCreateApi.register('stripe', CoCreateStripe)

  • send(module_name, action_name, data) string required

    The function that send the data into server by module_name and action

    CoCreateApi.send('stripe', 'createCustomer', {
    		name: 'Name', 
    		email: 'test@gmail.com', 
    		...
    	})

  • render(module_name, action_name, data) string optional

    The function to render data into template

    CoCreate.api.render('stripe', 'createCustomer', {name: 'Name', email: 'test@gmail.com', ...})

  • getFormData(moudle_name, action_name, container) string optional

    The function is that get module data from form

    
    	let container = btn.closest("form") || document;
    	let data = CoCreateApi.getFormData('stripe', 'createCustomer',  container);
    	CoCreateApi.send(this.id, 'createCustomer', [data]);
    	
    	

    HTML Example

    
    	<form>  
    	   <input stripe="createCustomer.name">
    	   <div stripe="createCustomer.address" stripe_array="address">
    	    	<input stripe="address.home.city">
    	    	<input stripe="address.work">
    	    </div>
    	    
    	    <div stripe="createCustomer.address" xxx_array="address">
    	    	<input stripe="address.home.city">
    	    	<input stripe="address.name">
    	    	<input stripe="address.line1">
    	
    	    	<div stripe="address.billing" xxx_array="b">
    	    	    <input stripe="b.address1">
    	    	    <input stripe="b.city">
    	    	    <input stripe="b.code.zip">
    	    	    <input stripe="b.code.postal">
    	    	</div>
    	    </div>
    	   <button actions='createCustomer'>Create Form</button>
    	</form>
    								

How Does It Works

CoCreate-fetch works based on cocreate.js and template.

To fetch the array data, the template wrapper should define fetch-document. template_id

Effects and Styles

Events

Demo