<p>What is a sales funnel? And why is it important? A sales funnel is a path that your website&#39;s visitors take before purchasing a product. If you don&rsquo;t understand your sales funnel, you can&rsquo;t optimize it. Building a great sales funnel can
influence how visitors move through the funnel and whether they eventually convert. In this little demo I will be showing you how to build a simple, one-page sales funnel using Node JS, Cosmic, and Stripe for handling credit card
payments.</p><h2>TL;DR</h2><ul><li><a href="https://cosmicjs.com/apps/single-page-sales-funnel" rel="noopener noreferrer" target="_blank">Demo</a></li><li><a href="https://github.com/cosmicjs/nodejs-sales-page" rel="noopener noreferrer" target="_blank">Source code</a></li><li><a href="https://stripe.com/docs/stripe-js/elements/quickstart/" rel="noopener noreferrer" target="_blank">Stripe</a></li><li><a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a></li></ul><p><br></p><h2>Why did I pick Cosmic</h2><p>If you need to build a sales page quickly and freely, you can simply sign up for a free Cosmic account, copy my app, customize it and you&#39;re done. You&#39;ll have you sale funnel page ready in minutes. If you need to add a section or features then
you can simply download the source-code and change any of the markup or the JavaScript behind this application.</p><h2>How to clone your own version of this app:</h2><p>In order for you to clone this application and have your own custom copy, you need to following these steps:</p><ul><li>Sign up for a free Cosmic account</li><li>Login into Cosmic account</li><li>Go to the <a href="https://cosmicjs.com/buckets" rel="nofollow">buckets</a> page</li><li>Click on <code>Add New Bucket</code> button on the top right of the page</li><li>Select <code>Choose an app below option</code> and scroll to the applications list</li><li>Try to find the <code>Sales Funnel</code> application</li><li>Once you open the application click on the <code>Install Free</code> button</li><li>You can keep the same title and hit the <code>Install App</code> button to confirm</li><li>Then you will be taken to the application bucket</li><li>Then you need to clone the github repo. Open the terminal window and type:</li></ul><pre><code>git clone <a href="https://github.com/cosmicjs/nodejs-sales-page" rel="noopener noreferrer" target="_blank">https://github.com/cosmicjs/nodejs-sales-page</a>
cd <a href="https://github.com/cosmicjs/nodejs-sales-page"></a>nodejs-sales-page
npm install
</code></pre><ul><li>edit and change Cosmic and Stripe API keys located in <code>/crowd-pitch/.env.local</code> file</li></ul><pre><code>COSMIC_BUCKET=your-bucket-slug
COSMIC_READ_KEY=your-cosmic-read-key
COSMIC_WRITE_KEY=your-cosmic-write-key
STRIPE_KEY=your-stripe-api-key
</code></pre><ul><li>Run the app server on your local machine</li></ul><pre><code># start the app
npm run server
</code></pre><ul><li>open the application from your browser on <a href="http://localhost:3000/" rel="nofollow">http://localhost:3000</a></li></ul><h2>How to customize the application content</h2><p>In order for you to change the text, images, and application content you need to follow these steps:</p><ul><li>Login to <a href="https://cosmicjs.com/buckets" rel="nofollow">Cosmic dashboard</a></li><li>Go to buckets --&gt; crowd-pitch</li><li>Go to Pages --&gt; Google cash machine</li><li>Change the pages section by editing the text for each part of the web page like the page title, header....</li><li>Change the page images by adding your own images. Make sure to keep the same image title and slug.</li><li>Hit save and publish</li></ul><p>This part works like any CMS system, where you make changes to the back-end and the site can change immediately.</p><h2>How to add new features to this application</h2><p>This part and below would be an explanation on how the application front-end was developed and how you can dig deeper to customize more options like the layout, css, colors, and which fields to collect from the user. This application was build mainly
using Node JS, and Stripe API. So let&#39;s take a look at the server.js file</p><p><br></p><div class="fr-embedly                      " data-original-embed="<a href='https://gist.github.com/mtermoul/3ac8e7957a1edb9069a2dc8eff171798' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/3ac8e7957a1edb9069a2dc8eff171798" class="embedly-card"></a></div><p>As you can see from the code above we are using the following Javascript components:</p><ul><li><a href="https://www.npmjs.com/package/express" rel="nofollow">Express:</a> a light weight web server for node</li><li><a href="https://www.npmjs.com/package/express-handlebars" rel="nofollow">Express-Handlebars:</a> This html templating library for <a href="http://handlebarsjs.com/" rel="nofollow">handlebars.js</a> syntax</li><li><a href="https://www.npmjs.com/package/cosmicjs" rel="nofollow">CosmicJs:</a> to handle interaction with Cosmic API from the server</li><li><a href="https://www.npmjs.com/package/stripe" rel="nofollow">Stripe:</a> to handle interaction with <a href="https://stripe.com/docs/payments" rel="nofollow">Stripe payment API</a></li></ul><p>Inside the server.js there is basically two function to handle server routing:</p><ul><li><p>app.get(&#39;/&#39;) to handle the get request when the user visits the application. Inside this function we simply call Cosmic to fetch all data from our bucket and inject it as a server response local variable. The second part is just rendering the
home view which is just an HTML/Handlebars template page.</p></li><li><p>app.post(&#39;/pay&#39;) to handle the payment form posting. Inside this function there is simply one call to Stripe charges API to add one charge to the specified credit card.</p></li></ul><h2>How to customize the layout and CSS for the application?</h2><p>As mentioned before, in this app we are using handlebars.js for the page templating. From the server get function we render <code>views/home.handlebars</code> page which is simply an html page with some handlebars tags to replace server variables with values from Cosmic CMS. Let&#39;s take a look:</p><p><br></p><div class="fr-embedly                      " data-original-embed="<a href='https://gist.github.com/mtermoul/9cbf6fc2afaed53b37f82cd5f1acd111' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/9cbf6fc2afaed53b37f82cd5f1acd111" class="embedly-card"></a></div><p>As you can see, we reference server variables within a double curly brackets. For instance <code>{{ cosmic.metadata.top_logo.url }}</code> means get the value of variable from Cosmic, which the logo image url and put it in the home view page. There are also similar syntax to handle if and loop using handlebars syntax. For a full syntax help, please refer to <a href="http://handlebarsjs.com/" rel="nofollow">Handlebars User Documentation</a>.</p><p>You can also change some of the styling of the page from within home view page because we are simply using <a href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" rel="nofollow">Bootstrap framework</a>. For some other styling properties you can change it directly from <code>/public/css/styles.css</code></p><p>For the application layout there the file <code>/views/layouts/main.handlebars</code></p><p><br></p><div class="fr-embedly                      " data-original-embed="<a href='https://gist.github.com/mtermoul/c236fb329dcb67a2d75841777c2a5ac0' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/c236fb329dcb67a2d75841777c2a5ac0" class="embedly-card"></a></div><p>This is basically the main html template for every page in our application. It&#39;s worth mentioning that we are referencing a couple of libraries from the client side like:</p><ul><li>JQuery</li><li>Stripe</li><li>Bootstrap</li><li>Font-awesome</li><li>Axios.js to handle Ajax calls</li></ul><h2>Handling credit card payment with Stripe and Axios</h2><p>To accept credit card payments in our application we use three steps process.</p><ul><li>first we use <a href="https://stripe.com/docs/stripe-js/elements/quickstart" rel="nofollow">Stripe card elements</a> to inject the credit card input element inside our html form.</li></ul><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/mtermoul/e20ee070d2d49673e60af22be432e48b' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/e20ee070d2d49673e60af22be432e48b" class="embedly-card"></a></div><ul><li>Validate the credit card info by calling <code>stripe.createToken</code> when the user hit the submit payment button. This function will simply send the info to Strip API and get a valid token if success. Otherwise it will return an invalid token.</li><li><p>Post the payment form form data to the server post method. This method will take data submitted from the client form and submit them again as a stripe charge by calling <code>stripe.charges.create</code>. Take a look:</p></li></ul><div class="fr-embedly        " data-original-embed="<a href='https://gist.github.com/mtermoul/4e2c5adef4236256c1f907af2d100932' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/4e2c5adef4236256c1f907af2d100932" class="embedly-card"></a></div><p>As you can see, once the charge is sent to stripe, we will return success to the client if no errors from Stripe. Otherwise we will emit Stripe errors back to the client.</p><ul><li>The last step is on the client side, we will display the payment result on the client form if success, or the error message if the payment fails.</li></ul><h2>How to add multiple page funnel to my application.</h2><p>Sometimes the application will need more than one page to capture the user final action. If you want to do that, you can simply add more pages to the server view, more routes, and handle the post from one page to the other either via javascript functions
or server post methods.</p><h2>What about the main.js file?</h2><p>This file contains one function right now to handle count down counter. However you can use it if you any other javascript interactions with your user. For the count down counter we store a variable on Cosmic server called</p><pre><code>const dealCountDown = {{ cosmic.metadata.deal_countdown }};
</code></pre><p>and then we calls the <code>initializeClock</code> function which will run the count down until this variable reaches zero.</p><p>Take a look at the main.js file for the full implementation details.</p><p><br></p><p><img src="https://cosmic-s3.imgix.net/e8530730-7536-11e9-add3-5fb6959d341f-crowd-pitch-preview.gif" style="width: 665px;" class="fr-fic fr-dib"></p><p><br></p><h2>Check user engagement with A/B testing</h2><p>As most marketers have come to realize, the cost of acquiring any quality traffic can be huge. A/B testing lets you make the most out of your existing traffic and helps you increase conversion without having to spend on acquiring new traffic. A/B testing can give you high ROI as sometimes, even the most minor changes can result in a significant increase in conversions.<br>For the purpose of this app, I will add two <code>style.css</code> files and once the user visits the site I will be randomly selecting one stylesheet. The stylesheet selection will affect how the color theme will look like. So basically the user can see either version A of the site or version B.<br><br></p><div class="fr-embedly       " data-original-embed="<a href='https://gist.github.com/mtermoul/80e8afc5fcc30ae6e0b58abb0f2df6d2' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/80e8afc5fcc30ae6e0b58abb0f2df6d2" class="embedly-card"></a></div><p>Then we load either style A or B on the `main.handlebars` file like this:</p><p><br></p><div class="fr-embedly       " data-original-embed="<a href='https://gist.github.com/mtermoul/7075eb49b89e17c327858a201b12a599' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/7075eb49b89e17c327858a201b12a599" class="embedly-card"></a></div><p><br>We also have a javascript variable that will be used during the payment process to capture which page the user is coming from. This info will be stored along Stripe charge information.<br><br></p><pre><code>const pageSource = {{#if pageB}} &#39;pageB&#39; {{else}} &#39;pageA&#39; {{/if}};</code></pre><p><br>then we save the page source along the stripe charge on the server post method.</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/mtermoul/92a1c9c9e50aded4c0e3d50afc25a996' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/92a1c9c9e50aded4c0e3d50afc25a996" class="embedly-card"></a></div><h2>Conclusion</h2><p>In this application, I&#39;ve demonstrated how you can build a page that displays product info and handles credit card payments by leveraging the power of the Cosmic CMS plus a few other libraries that handle the payment function. You can add a function
that will send an email to the user after the payment is submitted. Or add a function to send a user to another secure page to all him to download the digital product. The Cosmic Community &nbsp;has a lot of examples on how to handle integration with
email functions, download functions, and third party platforms.</p><p>As always, I really hope that you enjoyed this little app, and please do not hesitate to send me your thoughts or comments about what could I have done better.</p><p>If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Blogs by Mohamed Termoul

Start building today

Blogs by Mohamed Termoul

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today