@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="../index.css" array="files" object="60888216117c640e7596303f" key="src" type="text/css" save="true" /> <link rel="manifest" href="/manifest.webmanifest" /> </head> <body>  <nav class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav," scroll-up="5" scroll-down="5" path="../" src="../components/navbar.html"></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-actions : Is a library that we use to chain any number of events to a single button </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"> According to the usage of the official documentation of stripe <a href="https://stripe.com/docs/api/customers/create" target="_blank" >CREATE_CUSTOMER</a > and <a href="https://stripe.com/docs/api/cards/create" target="_blank" >CREATE_CARD</a > </p> <div class="flex-grow:1 min-width:300px width:100%"> <pre> <code class="language-js"> Name-file : index-connect.html <form> <input type="text" stripe="description" value="descripcion Test Customer" > <input type="text" stripe="email" value="customertest@cocreate.com" > <input type="text" stripe="source" value="tok_amex" > <button type="button" actions="registerCustomerStripe, registerCardStripe" id="register">create</button> </form> </code> </pre> </div> <p class="padding:10px_0px line-height:1.5"> An important aspect to take into account is the data attribute actions here the events that will be executed in an orderly manner are defined </p> <div class="flex-grow:1 min-width:300px width:100%"> <pre> <code class="language-js"> Name-file : index-connect.html <script type="text/javascript" > var SessionStorage = window.sessionStorage function sendDataWebSocket(type,idCustomer=null){ var btn = object.querySelector('button#register'); let dataToSend = cocreateStripeRegisterAPi.getDataJSON(btn,cocreateStripeRegisterAPi); dataToSend['type'] = type; if (idCustomer!=null){ 	 dataToSend['customer_id'] = idCustomer; 	 //for create CARD 	 delete dataToSend['description']; 	 delete dataToSend['email']; } cocreateStripeRegisterAPi.socket(dataToSend,cocreateStripeRegisterAPi); } function fnRegisterCustomer(){ sendDataWebSocket('.createCustomerBtn'); } function fnRegisterCard(){ sendDataWebSocket('.createCardBtn',SessionStorage['customer_id']); } 	 CoCreate.actions.registerEvent('registerCustomerStripe', fnRegisterCustomer, window, 'eventRegisterCustomer') CoCreate.actions.registerEvent('registerCardStripe', fnRegisterCard, window, 'eventRegisterCard') </script> </code> </pre> </div> <p class="padding:10px_0px line-height:1.5"> The events previously defined in the button must be declared in the javascript code and define the appropriate logic for each event, cocreateActions always waits for an event to finish to start the second event, so we will see the second step below in overwriting the setResult </p> <div class="flex-grow:1 min-width:300px width:100%"> <pre> <code class="language-js"> Name-file WebSocketServer = Cocreate-stripe.js ........ switch (type) { case '.createCustomerBtn': const customer = await stripe.customers.create(data); utils.send_response(that.wsManager,socket,{"type":type,"response":customer},send_response) break; case '.createCardBtn': let customer-id = data['customer_id']; delete data['customer_id']; const card = await stripe.customers.createSource( customer-id, data ); utils.send_response(that.wsManager,socket,{"type":type,"response":card},send_response) break; } ........ </code> </pre> </div> <p class="padding:10px_0px line-height:1.5"> Dispatch events to tell cocreate-actions when an event ends </p> <div class="flex-grow:1 min-width:300px width:100%"> <pre> <code class="language-js"> Name-file FrontEnd = Cocreate-stripe.js var CocreateStripeAPi = function() { ........... this.setResult = function(data) { let type = data["type"]; switch(type){ case '.createCustomerBtn': var localstorage = window.sessionStorage; localstorage['customer_id'] = data['response']["id"]; if (data['response']){ object.dispatchEvent(new CustomEvent('eventRegisterCustomer')); } break; case '.createCardBtn': object.dispatchEvent(new CustomEvent('eventRegisterCard')); break; } } ........... } </code> </pre> </div> <p class="padding:10px_0px line-height:1.5"> finally we observe a response, in the console that shows that the events were executed in a chained and correct way using the cocreate-actions bridge </p> <p class="padding:10px_0px line-height:1.5"> <img src="img/create_card.png" width="98%" /> </p> </div> </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="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% 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>