CoCreate-api

Cocreate, puts at your disposal a new module that works as a communication layer between the backed of cocreate and any API. Step by step, we will learn how to use it and what advantages it brings us using attributes

Install

 
npm i @cocreate/api

Or you can use cdn link:

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

Usage

we will start our documentation, creating an example for stripe, The following code is the implementation of our custom front-end class using javascript prototype-based inheritance, A fundamental aspect is that the class of the button that contains the action must be inside a form

                                
Name-file = Cocreate-stripe.js                            var CocreateStripeAPi = function() {
    this.classBtns = ['.getBalanceBtn',];
    this.data_param = 'stripe';
    this.req_socket = 'stripe';
    CoCreate.apiSocket.call(this);
    
};
CocreateStripeAPi.prototype = Object.create(CoCreate.apiSocket.prototype);
CocreateStripeAPi.prototype.constructor = CocreateStripeAPi;
var cocreateStripeRegisterAPi = new CocreateStripeAPi();

Array classBtns : Here we place the classes of the actuator buttons, remember that these buttons must always be inside a form

String data_param : Our Cocreate-Api script needs a starting point to collect attributes within the parent form of the trigger button, and the data_param attribute you define tells cocreate-api what data to send to the WebSocketServer

String req_socket : is used to define the endpoint of the websocket server

We will call the following file index-connect.html, we will use it as a starting point to start the action that will travel to the server, and it will give us a response from stripe

                                
Name-file : index-connect.html

<!DOCTYPE html>
<html>
<head>
 <title>Stripe</title>
 <head>     
<h1>Test</h1>
<form realtime="true" id="customer-form" array="modules">
 <button class='getBalanceBtn'>getBalanceBtn in console</button>
</form>

<script src="/dist/CoCreate.js"></script>
<script src="../js/Cocreate-APISocket.js"></script>
<script src="../js/Cocreate-stripe.js"></script>

In the case of the server code, here it varies from your configuration of your backend server, in our case we have a backend server with NodeJS and we use the WebSocket as a communication gateway

                                
/* global Y */
'use strict'
var utils= require('../utils');
const CoCreateBase = require("../../base");

class CoCreateStripe extends CoCreateBase {
	constructor(wsManager, db) {
		super(wsManager, db);
		this.init();
	}
	
	init() {
		if (this.wsManager) {
			this.wsManager.on('stripe',(socket, data)=>this.sendStripe(socket,data));
		}
	}

	async sendStripe(socket, data) {
	    let that = this;
	    let send_response ='stripe';
	    let data_original = {...data};
        let type = data['type'];
        delete data['type'];
        let url = '';
        let method = '';
        let targets = [];
        let tags = [];
        let key_stripe = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
        const stripe = require('stripe')('sk_test_key');
  
        switch (type) {
            case '.getBalanceBtn':
                stripe.balance.retrieve((err, balance) => {
                    if (!err && balance) {
                      utils.send_response(that.wsManager,socket,{"test":"from_server","balance":balance},send_response)
                    } else if (err) {
                      utils.send_response(that.wsManager,socket,{"test":"from_server","balance_error":0},send_response)
                    }
                  });
                break;
        }
	    
	}// end sendStripe
}//end Class 
module.exports = CoCreateStripe;

Note : In this line we define the endpoint of the webSocket Server previously defined in the frontend 

                                 
this.wsManager.on('stripe',(socket, data)=<this.sendStripe(socket,data));

Attributes

  • data_param string optional

    parameter defined in your custom class, this parameter should add to all form elements you want to send to webocket

  • class string optional

    classBtns : the action generator button, must have a class defined in this attribute of your custom FrontEnd class

Demo