@cocreate/stripe

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CoCreate-api Documentation | CoCreateJS </title> <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico"> <meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." /> <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" /> <meta name="robots" content="index,follow" /> <meta property="og:image" content="https://cdn.cocreate.app/docs/stripe.png">  <link rel="stylesheet" href="" type="text/css"/> <link rel="stylesheet" href="/docs/index.css" array="files" object="60888216117c640e7596303f" key="src" type="text/css" save="true"/> <link rel="manifest" href="/manifest.webmanifest" /> </head> <body> <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" array="files" object="60395ef42b3ac232657040fd" key="src"> </nav> <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-query="[content_id='content']" resize-property="margin-left" resize-value="width"> <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu> <div resize="right"></div> </sidenav> <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="cocreate-api"> <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"> <div class="display:flex align-items:center"> <h2>CoCreate-api</h2> </div> <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"> <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/stripe.png" hover="display:block!important" hover-query=".social-networks"> <div class="display:none social-networks"> <a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i src="/assets/svg/twitter.svg"></i></a> <a class="margin-right:15px" share-network="facebook" title="Share on Facebook"><i src="/assets/svg/facebook.svg"></i></a> <a class="margin-right:15px" share-network="instagram" title="Share on instagram"><i src="/assets/svg/instagram.svg"></i></a> </div> <a class="margin-right:15px" share-network="share" title="Share on share"><i src="/assets/svg/share-alt.svg"></i></a> </div> <a href="https://github.com/CoCreate-app/CoCreate-api" target="_blank" class="margin-right:15px"><i src="/assets/svg/github.svg"></i></a> </div> </div> <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">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</h1> <div id="api-section" class="display:flex flex-wrap:wrap"> <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"> <div id="stripe-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#stripe-install-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#stripe-install']"> <h2 class="padding:5px_0px">Install</h2> <a class="margin-left:10px display:none" href="#stripe-install"><i src="/assets/svg/link.svg"></i></a> </span> </div> <pre><code class="language-bash">npm i @cocreate/api</code></pre> <p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p> <pre><code class="language-html"><script>https://cdn.cocreate.app/stripe/latest/CoCreate-api.min.js</script></code></pre> <div id="stripe-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#stripe-usage-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#stripe-usage']"> <h2 class="padding:5px_0px">Usage</h2> <a class="margin-left:10px display:none" href="#stripe-usage"><i src="/assets/svg/link.svg"></i></a> </span> </div> <div class=""> <p class="padding:10px_0px line-height:1.5">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</p> <div class="flex-grow:1 min-width:300px width:100%"> <pre> <code class="language-js"> 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(); </code> </pre> </div> <p class="padding:10px_0px line-height:1.5"><b><span class="cocreate-badge warning">Array</span> classBtns :</b> Here we place the classes of the actuator buttons, remember that these buttons must always be inside a form </p> <p class="padding:10px_0px line-height:1.5"><b><span class="cocreate-badge warning">String</span> data_param :</b> 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 </p> <p class="padding:10px_0px line-height:1.5"><b><span class="cocreate-badge warning">String</span> req_socket :</b> is used to define the endpoint of the websocket server </p> <p class="padding:10px_0px line-height:1.5">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</p> <div class="flex-grow:1 min-width:300px width:100%"> <pre> <code class="language-js"> 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> </code> </pre> </div> <p class="padding:10px_0px line-height:1.5">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</p> <div class="flex-grow:1 min-width:300px width:100%"> <pre> <code class="language-js"> /* 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; </code> </pre> </div> <p class="padding:10px_0px line-height:1.5"> <span class="cocreate-badge warning">Note :</span> In this line we define the endpoint of the webSocket Server previously defined in the frontend <pre> <code class="language-js"> this.wsManager.on('stripe',(socket, data)=<this.sendStripe(socket,data)); </code> </pre> </p> </div> <div id="stripe-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#stripe-attributes-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#stripe-attributes']"> <h2 class="padding:5px_0px">Attributes</h2> <a class="margin-left:10px display:none" href="#stripe-attributes"><i src="/assets/svg/link.svg"></i></a> </span> </div> <ul class="list-style-type:none "> <li class="padding:15px_0px border-bottom:1px_solid_lightgrey"> <h4><span>data_param</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4> <p>parameter defined in your custom class, this parameter should add to all form elements you want to send to webocket</p> </li> <li class="padding:15px_0px border-bottom:1px_solid_lightgrey"> <h4><span>class</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4> <p>classBtns : the action generator button, must have a class defined in this attribute of your custom FrontEnd class</p> </li> </ul> </div> <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">  <div id="stripe-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#stripe-demo-section"> <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#stripe-demo']"> <h2 class="padding:5px_0px">Demo</h2> <a class="margin-left:10px display:none" href="#stripe-demo"><i src="/assets/svg/link.svg"></i></a> </span> </div> <div class="position:sticky top:0 padding:15px_0px height:100vh">  <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground"> <div id="demo-code" resizable class="position:relative height:50%"> <textarea type="code" lang="html" array="demos" object="" key="demo" save="false" id="demo" input-query=".demopreview" input-attribute="value" input-events="input, onload" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea> <div resize="bottom" class="background:lightgrey"></div> </div> <div id="demo-preview" class="position:relative overflow:auto background-color:white"> <div class="demopreview padding:20px"></div> </div> <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6"> <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-query="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a> <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-query="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a> <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i src="/assets/svg/code.svg"></i></a> <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a> <a class="margin-right:5px" fullscreen fullscreen-query="#playground"></a> </div> </div>  </div> </div> </div> <button href="https://github.com/CoCreate-app/CoCreate-stripe/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)"> <i src="/assets/svg/pencil-alt.svg"></i> </button> </main> <script src="https://CoCreate.app/dist/CoCreate.js"></script> </body> </html>