├── .github
    └── FUNDING.yml
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── CoCreate.config.js
├── LICENSE
├── README.md
├── demo
    └── CoCreate-checkout.html
├── docs
    └── index.html
├── package.json
├── release.config.js
└── webpack.config.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: CoCreate-app
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # ignore
 2 | node_modules
 3 | dist
 4 | .npmrc
 5 | yarn.lock
 6 | 
 7 | logs
 8 | *.log
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | lerna-debug.log*
13 | .pnpm-debug.log*
14 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to CoCreate-checkout
 2 | 
 3 | This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-checkout/graphs/contributors).
 4 | You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-checkout/pulls),
 5 | [propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-checkout/issues).
 6 | 
 7 | In the examples below, substitute your Github username for `contributor` in URLs.
 8 | 
 9 | ## Fork the Project
10 | 
11 | Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-checkout) and check out your copy.
12 | 
13 | ```
14 | git checkout https://github.com/contributor/CoCreate-checkout.git
15 | cd CoCreate-checkout
16 | git remote add upstream https://github.com/CoCreate-app/CoCreate-checkout.git
17 | ```
18 | 
19 | ## Create a Topic Branch
20 | 
21 | Make sure your fork is up-to-date and create a topic branch for your feature or bug fix on dev branch.
22 | 
23 | ```
24 | git checkout dev
25 | git pull upstream dev
26 | git checkout -b my-feature-branch
27 | ```
28 | 
29 | ## Write Tests
30 | 
31 | Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build.
32 | 
33 | We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix.
34 | 
35 | ## Write Code
36 | 
37 | Implement your feature or bug fix.
38 | 
39 | ## Write Documentation
40 | 
41 | Document any external behavior in the [README](README.md).
42 | 
43 | ## Commit Changes
44 | 
45 | Make sure git knows your name and email address:
46 | 
47 | ```
48 | git config --global user.name "Your Name"
49 | git config --global user.email "contributor@example.com"
50 | ```
51 | 
52 | We use [semantic-release](https://github.com/semantic-release/semantic-release) as process to generate changelog
53 | and to release. Write meaningful commits according to 
54 | [Commit Message Formats](https://github.com/semantic-release/semantic-release#commit-message-format) is important.
55 | 
56 | ```
57 | git add ...
58 | git commit -am "commit-type(optional topic): a meaningful message"
59 | ```
60 | 
61 | Here is an example of the release type that should be done based on a [semantic-release](https://github.com/semantic-release/semantic-release):
62 | 
63 | | Commit message                                                                                                                                                                                   | Release type               |
64 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
65 | | `fix(pencil): stop graphite breaking when too much pressure applied`                                                                                                                             | Patch Release              |
66 | | `feat(pencil): add 'graphiteWidth' option`                                                                                                                                                       | ~~Minor~~ Feature Release  |
67 | | `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
68 | 
69 | 
70 | ## Push
71 | 
72 | ```
73 | git push origin my-feature-branch
74 | ```
75 | 
76 | ## Make a Pull Request
77 | 
78 | Go to [https://github.com/CoCreate-app/CoCreate-checkout](https://github.com/CoCreate-app/CoCreate-checkout) and select your feature branch.
79 | Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
80 | 
81 | ## Rebase
82 | 
83 | If you've been working on a change for a while, rebase with upstream/dev.
84 | 
85 | ```
86 | git fetch upstream
87 | git rebase upstream/dev
88 | git push origin my-feature-branch -f
89 | ```
90 | 
91 | ## Be Patient
92 | 
93 | It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang in there!
94 | 
95 | ## Thank You
96 | 
97 | Please do know that we really appreciate and value your time and work. We love you, really.


--------------------------------------------------------------------------------
/CoCreate.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     "config": {
 3 |         "apiKey": "2061acef-0451-4545-f754-60cf8160",
 4 |         "organization_Id": "5ff747727005da1c272740ab",
 5 |         "host": "general.cocreate.app"
 6 |     },
 7 |     
 8 |     "sources": [{
 9 |             "entry": "./docs/index.html",
10 |             "collection": "files",
11 |             "document_id": "6020cd7fb526e5753d0ecb7b",
12 |             "key": "src",
13 |             "data":{
14 |                 "name": "index.html",
15 |                 "path": "/docs/checkout/index.html",
16 |                 "domains": [
17 |                     "cocreate.app",
18 |                     "general.cocreate.app"
19 |                 ],
20 |                 "directory": "/docs/checkout",
21 |                 "content-type": "text/html",
22 |                 "public": "true",
23 |                 "website_id": "614298c2829b690010a5c031"
24 |             }
25 |         }
26 |     ],
27 | 
28 | 	"extract": {
29 | 		"directory": "./src/",
30 | 		"extensions": [
31 | 			"js",
32 | 			"css",
33 | 			"html"
34 | 		],
35 | 		"ignores": [
36 | 			"node_modules",
37 | 			"vendor",
38 | 			"bower_components",
39 | 			"archive"
40 | 		]
41 | 	}
42 | }
43 | 
44 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 CoCreate LLC
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CoCreate-checkout
 2 | 
 3 | A simple checkout component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/checkout)
 4 | 
 5 | ![GitHub file size in bytes](https://img.shields.io/github/size/CoCreate-app/CoCreate-checkout/dist/CoCreate-checkout.min.js?label=minified%20size&style=for-the-badge)
 6 | ![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-checkout?style=for-the-badge)
 7 | ![GitHub](https://img.shields.io/github/license/CoCreate-app/CoCreate-checkout?style=for-the-badge)
 8 | ![GitHub labels](https://img.shields.io/github/labels/CoCreate-app/CoCreate-checkout/help%20wanted?style=for-the-badge)
 9 | 
10 | ![CoCreate-checkout](https://cdn.cocreate.app/docs/CoCreate-checkout.gif)
11 | 
12 | ## [Docs & Demo](https://cocreate.app/docs/checkout)
13 | 
14 | For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/checkout)
15 | 
16 | ## CDN
17 | 
18 | ```html
19 | <script src="https://cdn.cocreate.app/checkout/latest/CoCreate-checkout.min.js"></script>
20 | ```
21 | 
22 | ```html
23 | <script src="https://cdn.cocreate.app/checkout/latest/CoCreate-checkout.min.css"></script>
24 | ```
25 | 
26 | ## NPM
27 | 
28 | ```shell
29 | $ npm install @cocreate/checkout
30 | ```
31 | 
32 | # Table of Contents
33 | 
34 | - [Table of Contents](#table-of-contents)
35 | - [Announcements](#announcements)
36 | - [Roadmap](#roadmap)
37 | - [How to Contribute](#how-to-contribute)
38 | - [About](#about)
39 | - [License](#license)
40 | 
41 | <a name="announcements"></a>
42 | 
43 | # Announcements
44 | 
45 | All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-checkout/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-checkout/releases). You may also subscribe to email for releases and breaking changes.
46 | 
47 | <a name="roadmap"></a>
48 | 
49 | # Roadmap
50 | 
51 | If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreate-checkout/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-checkout/pulls). We would love to hear your feedback.
52 | 
53 | <a name="about"></a>
54 | 
55 | # About
56 | 
57 | CoCreate-checkout is guided and supported by the CoCreate Developer Experience Team.
58 | 
59 | Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
60 | 
61 | CoCreate-checkout is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
62 | 
63 | <a name="contribute"></a>
64 | 
65 | # How to Contribute
66 | 
67 | We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-checkout/blob/master/CONTRIBUTING.md) guide for details.
68 | 
69 | We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-checkout/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-checkout/pulls) or merely upvote or comment on existing issues or pull requests.
70 | 
71 | We appreciate your continued support, thank you!
72 | 
73 | # License
74 | 
75 | [The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-checkout/blob/master/LICENSE)
76 | 


--------------------------------------------------------------------------------
/demo/CoCreate-checkout.html:
--------------------------------------------------------------------------------
  1 | <html lang="en"><head>
  2 | <meta charset="UTF-8">
  3 | <title>Shopping Cart</title>
  4 | <style>
  5 |   /*
  6 | I wanted to go with a mobile first approach, but it actually lead to more verbose CSS in this case, so I've gone web first. Can't always force things...
  7 | 
  8 | Side note: I know that this style of nesting in SASS doesn't result in the most performance efficient CSS code... but on the OCD/organizational side, I like it. So for CodePen purposes, CSS selector performance be damned.
  9 | */
 10 | /* Global settings */
 11 | /* Global "table" column settings */
 12 | .product-image {
 13 |   float: left;
 14 |   width: 20%;
 15 | }
 16 | 
 17 | .product-details {
 18 |   float: left;
 19 |   width: 37%;
 20 | }
 21 | 
 22 | .product-price {
 23 |   float: left;
 24 |   width: 12%;
 25 | }
 26 | 
 27 | .product-quantity {
 28 |   float: left;
 29 |   width: 10%;
 30 | }
 31 | 
 32 | .product-removal {
 33 |   float: left;
 34 |   width: 9%;
 35 | }
 36 | 
 37 | .product-line-price {
 38 |   float: left;
 39 |   width: 12%;
 40 |   text-align: right;
 41 | }
 42 | 
 43 | /* This is used as the traditional .clearfix class */
 44 | .group:before, .shopping-cart:before, .column-labels:before, .product:before, .totals-item:before,
 45 | .group:after,
 46 | .shopping-cart:after,
 47 | .column-labels:after,
 48 | .product:after,
 49 | .totals-item:after {
 50 |   content: '';
 51 |   display: table;
 52 | }
 53 | 
 54 | .group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after {
 55 |   clear: both;
 56 | }
 57 | 
 58 | .group, .shopping-cart, .column-labels, .product, .totals-item {
 59 |   zoom: 1;
 60 | }
 61 | 
 62 | /* Apply clearfix in a few places */
 63 | /* Apply dollar signs */
 64 | .product .product-price:before, .product .product-line-price:before, .totals-value:before {
 65 |   content: '$';
 66 | }
 67 | 
 68 | /* Body/Header stuff */
 69 | body {
 70 |   padding: 0px 30px 30px 20px;
 71 |   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 72 |   font-weight: 100;
 73 | }
 74 | 
 75 | h1 {
 76 |   font-weight: 100;
 77 | }
 78 | 
 79 | label {
 80 |   color: #aaa;
 81 | }
 82 | 
 83 | .shopping-cart {
 84 |   margin-top: -45px;
 85 | }
 86 | 
 87 | /* Column headers */
 88 | .column-labels label {
 89 |   padding-bottom: 15px;
 90 |   margin-bottom: 15px;
 91 |   border:bottom: 1px solid #eee;
 92 | }
 93 | .column-labels .product-image, .column-labels .product-details, .column-labels .product-removal {
 94 |   text-indent: -9999px;
 95 | }
 96 | 
 97 | /* Product entries */
 98 | .product {
 99 |   margin-bottom: 20px;
100 |   padding-bottom: 10px;
101 |   border:bottom: 1px solid #eee;
102 | }
103 | .product .product-image {
104 |   text-align: center;
105 | }
106 | .product .product-image img {
107 |   width: 100px;
108 | }
109 | .product .product-details .product-title {
110 |   margin-right: 20px;
111 |   font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
112 | }
113 | .product .product-details .product-description {
114 |   margin: 5px 20px 5px 0;
115 |   line-height: 1.4em;
116 | }
117 | .product .product-quantity input {
118 |   width: 40px;
119 | }
120 | .product .remove-product {
121 |   border: 0;
122 |   padding: 4px 8px;
123 |   background-color: #c66;
124 |   color: #fff;
125 |   font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
126 |   font-size: 12px;
127 |   border-radius: 3px;
128 | }
129 | .product .remove-product:hover {
130 |   background-color: #a44;
131 | }
132 | 
133 | /* Totals section */
134 | .totals .totals-item {
135 |   float: right;
136 |   clear: both;
137 |   width: 100%;
138 |   margin-bottom: 10px;
139 | }
140 | .totals .totals-item label {
141 |   float: left;
142 |   clear: both;
143 |   width: 79%;
144 |   text-align: right;
145 | }
146 | .totals .totals-item .totals-value {
147 |   float: right;
148 |   width: 21%;
149 |   text-align: right;
150 | }
151 | .totals .totals-item-total {
152 |   font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
153 | }
154 | 
155 | .checkout {
156 |   float: right;
157 |   border: 0;
158 |   margin-top: 20px;
159 |   padding: 6px 25px;
160 |   background-color: #6b6;
161 |   color: #fff;
162 |   font-size: 25px;
163 |   border-radius: 3px;
164 | }
165 | 
166 | .checkout:hover {
167 |   background-color: #494;
168 | }
169 | 
170 | /* Make adjustments for tablet */
171 | @media screen and (max-width: 650px) {
172 |   .shopping-cart {
173 |     margin: 0;
174 |     padding-top: 20px;
175 |     border-top: 1px solid #eee;
176 |   }
177 | 
178 |   .column-labels {
179 |     display: none;
180 |   }
181 | 
182 |   .product-image {
183 |     float: right;
184 |     width: auto;
185 |   }
186 |   .product-image img {
187 |     margin: 0 0 10px 10px;
188 |   }
189 | 
190 |   .product-details {
191 |     float: none;
192 |     margin-bottom: 10px;
193 |     width: auto;
194 |   }
195 | 
196 |   .product-price {
197 |     clear: both;
198 |     width: 70px;
199 |   }
200 | 
201 |   .product-quantity {
202 |     width: 100px;
203 |   }
204 |   .product-quantity input {
205 |     margin-left: 20px;
206 |   }
207 | 
208 |   .product-quantity:before {
209 |     content: 'x';
210 |   }
211 | 
212 |   .product-removal {
213 |     width: auto;
214 |   }
215 | 
216 |   .product-line-price {
217 |     float: right;
218 |     width: 70px;
219 |   }
220 | }
221 | /* Make more adjustments for phone */
222 | @media screen and (max-width: 350px) {
223 |   .product-removal {
224 |     float: right;
225 |   }
226 | 
227 |   .product-line-price {
228 |     float: right;
229 |     clear: left;
230 |     width: auto;
231 |     margin-top: 10px;
232 |   }
233 | 
234 |   .product .product-line-price:before {
235 |     content: 'Item Total: $';
236 |   }
237 | 
238 |   .totals .totals-item label {
239 |     width: 60%;
240 |   }
241 |   .totals .totals-item .totals-value {
242 |     width: 40%;
243 |   }
244 | }
245 | </style>
246 | </head>
247 | <body translate="no">
248 | <h1>Shopping Cart</h1>
249 | 
250 | <div class="shopping-cart">
251 |     <div class="column-labels">
252 |         <label class="product-image">Image</label>
253 |         <label class="product-details">Product</label>
254 |         <label class="product-price">Price</label>
255 |         <label class="product-quantity">Quantity</label>
256 |         <label class="product-removal">Remove</label>
257 |         <label class="product-line-price">Total</label>
258 |     </div>
259 |     <div class="product">
260 |         <div class="product-image">
261 |             <img src="https://s.cdpn.io/3/dingo-dog-bones.jpg">
262 |         </div>
263 |         <div class="product-details">
264 |             <div class="product-title">Dingo Dog Bones</div>
265 |                 <p class="product-description">The best dog bones of all time. Holy crap. Your dog will be begging for these things! I got curious once and ate one myself. I'm a fan.</p>
266 |             </div>
267 |             <div class="product-price">12.99</div>
268 |             <div class="product-quantity">
269 |                 <input type="number" value="2" min="1">
270 |             </div>
271 |             
272 |             <div class="product-removal">
273 |                 <button class="remove-product">Remove</button>
274 |             </div>
275 |             <div class="product-line-price">25.98</div>
276 |         </div>
277 |     <div class="product">
278 |         <div class="product-image">
279 |             <img src="https://s.cdpn.io/3/large-NutroNaturalChoiceAdultLambMealandRiceDryDogFood.png">
280 |         </div>
281 |         <div class="product-details">
282 |             <div class="product-title">Nutro™ Adult Lamb and Rice Dog Food</div>
283 |                 <p class="product-description">Who doesn't like lamb and rice? We've all hit the halal cart at 3am while quasi-blackout after a night of binge drinking in Manhattan. Now it's your dog's turn!</p>
284 |             </div>
285 |             <div class="product-price">45.99</div>
286 |             <div class="product-quantity">
287 |                 <input type="number" value="1" min="1">
288 |             </div>
289 |             <div class="product-removal">
290 |                 <button class="remove-product">Remove</button>
291 |             </div>
292 |             <div class="product-line-price">45.99</div>
293 |         </div>
294 | <div class="totals">
295 | <div class="totals-item">
296 | <label>Subtotal</label>
297 | <div class="totals-value" id="cart-subtotal">71.97</div>
298 | </div>
299 | <div class="totals-item">
300 | <label>Tax (5%)</label>
301 | <div class="totals-value" id="cart-tax">3.60</div>
302 | </div>
303 | <div class="totals-item">
304 | <label>Shipping</label>
305 | <div class="totals-value" id="cart-shipping">15.00</div>
306 | </div>
307 | <div class="totals-item totals-item-total">
308 | <label>Grand Total</label>
309 | <div class="totals-value" id="cart-total">90.57</div>
310 | </div>
311 | </div>
312 | <button class="checkout">Checkout</button>
313 | </div>
314 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
315 | <script id="rendered-js">
316 |       /* Set rates + misc */
317 | var taxRate = 0.05;
318 | var shippingRate = 15.00;
319 | var fadeTime = 300;
320 | 
321 | 
322 | /* Assign actions */
323 | $('.product-quantity input').change(function () {
324 |   updateQuantity(this);
325 | });
326 | 
327 | $('.product-removal button').click(function () {
328 |   removeItem(this);
329 | });
330 | 
331 | 
332 | /* Recalculate cart */
333 | function recalculateCart()
334 | {
335 |   var subtotal = 0;
336 | 
337 |   /* Sum up row totals */
338 |   $('.product').each(function () {
339 |     subtotal += parseFloat($(this).children('.product-line-price').text());
340 |   });
341 | 
342 |   /* Calculate totals */
343 |   var tax = subtotal * taxRate;
344 |   var shipping = subtotal > 0 ? shippingRate : 0;
345 |   var total = subtotal + tax + shipping;
346 | 
347 |   /* Update totals display */
348 |   $('.totals-value').fadeOut(fadeTime, function () {
349 |     $('#cart-subtotal').html(subtotal.toFixed(2));
350 |     $('#cart-tax').html(tax.toFixed(2));
351 |     $('#cart-shipping').html(shipping.toFixed(2));
352 |     $('#cart-total').html(total.toFixed(2));
353 |     if (total == 0) {
354 |       $('.checkout').fadeOut(fadeTime);
355 |     } else {
356 |       $('.checkout').fadeIn(fadeTime);
357 |     }
358 |     $('.totals-value').fadeIn(fadeTime);
359 |   });
360 | }
361 | 
362 | 
363 | /* Update quantity */
364 | function updateQuantity(quantityInput)
365 | {
366 |   /* Calculate line price */
367 |   var productRow = $(quantityInput).parent().parent();
368 |   var price = parseFloat(productRow.children('.product-price').text());
369 |   var quantity = $(quantityInput).val();
370 |   var linePrice = price * quantity;
371 | 
372 |   /* Update line price display and recalc cart totals */
373 |   productRow.children('.product-line-price').each(function () {
374 |     $(this).fadeOut(fadeTime, function () {
375 |       $(this).text(linePrice.toFixed(2));
376 |       recalculateCart();
377 |       $(this).fadeIn(fadeTime);
378 |     });
379 |   });
380 | }
381 | 
382 | 
383 | /* Remove item from cart */
384 | function removeItem(removeButton)
385 | {
386 |   /* Remove row from DOM and recalc cart total */
387 |   var productRow = $(removeButton).parent().parent();
388 |   productRow.slideUp(fadeTime, function () {
389 |     productRow.remove();
390 |     recalculateCart();
391 |   });
392 | }
393 |     </script>
394 | 
395 | 
396 | </body>
397 | </html>


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |         <title>CoCreate-checkout Documentation | CoCreateJS </title>
  8 |         <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
  9 |         <meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
 10 |         <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
 11 |         <meta name="robots" content="index,follow" />
 12 |         
 13 |         <!-- CoCreate CSS -->
 14 |         <link rel="stylesheet" href="https://server.cocreate.app/css/CoCreate.min.css" type="text/css" />
 15 |         
 16 |         <!-- Font Awesome -->
 17 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" crossorigin="anonymous" />    
 18 |         
 19 |         <!-- Codemirror -->
 20 |         <link rel="stylesheet" href="https://server.cocreate.app/CoCreate-plugins/CoCreate-codemirror/src/CoCreate-codemirror.css" type="text/css" />
 21 |         <link rel=stylesheet href="https://codemirror.net/lib/codemirror.css"  async defer>
 22 | 
 23 |         <!-- Highlight.js-->
 24 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">
 25 | 
 26 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
 27 |         <script>hljs.initHighlightingOnLoad();</script>
 28 |     </head>
 29 | 
 30 |     <body>
 31 |         <div collection="" document_id="" name="" id="cocreate-checkout" class="padding:15px">
 32 |             <div class="display:flex flex-wrap:wrap justify-content:space-between">
 33 |                 <div class="display:flex align-items:center">
 34 |                     <h2>CoCreate-checkout</h2>
 35 |                 </div>
 36 |                 <div class="display:flex align-items:center font-size:20px" share-height="600" share-width="500" share-media="https://via.placeholder.com/300/09f/fff.png">
 37 |                     <a href="https://github.com/CoCreate-app/CoCreate-checkout" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
 38 |                     <a class="margin-right:15px share" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
 39 |                     <a class="margin-right:15px share" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
 40 |                     <a class="margin-right:15px share" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
 41 |                     <a class="margin-right:15px share" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
 42 |                 </div>
 43 |             </div>
 44 |             <p class="max-width:500px margin:20px_0px">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</h1>
 45 |             <div id="checkout-section" class="display:flex flex-wrap:wrap">
 46 |                 <div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
 47 |     
 48 |                 <h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Install</h2>
 49 |                 <pre><code class="language-javascript">npm install cocreate-checkout</code></pre>
 50 |                 <p class="padding:10px_0px">Or you can use cdn link:</p>
 51 |                 <pre><code class="language-javascript">https://cdn.cocreate.app/CoCreate-checkout.min.js</code></pre>
 52 | 
 53 |                 <h2 class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Usage</h2>
 54 |                     <div class="">
 55 |                         <p class="padding:10px_0px">This is checkout reference</p>
 56 |                 
 57 |                         <div class="flex-grow:1 min-width:300px width:100%">
 58 |                             <pre>
 59 |                                 <code>&lt;div&gt;&lt;/div&gt;</code>
 60 |                             </pre>
 61 |                         </div>
 62 |                         <p class="padding:10px_0px">This is checkout reference</p>
 63 |                         <p class="padding:10px_0px">This is checkout reference</p>
 64 |                     </div>
 65 |                     <h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Attributes</h2>
 66 |                     <ul class="list-style-type:none ">
 67 |                         <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
 68 |                             <h4><span>checkout</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
 69 |                             <p>checkout-attribute</p>
 70 |                         </li>
 71 |                         <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
 72 |                             <h4><span>checkout</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
 73 |                             <p>checkout-attribute</p>
 74 |                         </li>
 75 |                     </ul>
 76 |                 </div>
 77 |                 
 78 |                 <div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px  border-bottom:1px_solid_lightgrey">
 79 |                     <!-- SandBox -->
 80 |                     <h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
 81 |                     <div class="position:sticky top:0 padding:15px_0px height:100vh">
 82 |     			    <div class="container svColumn overflow:hidden card border-radius:2px width:auto height:100%" id="form-sandbox">
 83 |     			       <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6 z-index:7">
 84 |     			        <a class="margin-right:10px" id="preview" show="preview" hide="code"><i class="far fa-eye"></i></a>
 85 |     			        <a class="margin-right:10px hidden" id="code" show="code" hide="preview"><i class="fas fa-code"></i></a>
 86 |     			        <!--<a class="margin-right:10px"><i class="far fa-window-maximize"></i></a>-->
 87 |     					<a target="modal" href="module_activity_datatable.html"
 88 |     				  	     pass-collection="modules"
 89 |     				  	     pass-document_id=""
 90 |     				  	     pass-fetch_value=""
 91 |     				  	     pass-prefix=""
 92 |     				  	     pass-to="render"
 93 |     				  	     modal-width="600px"
 94 |     				  	     modal-height="400px"
 95 |     				  	     modal-color="#229954"
 96 |     				  	     modal-header="false"
 97 |     				  	     class="margin-right:10px">
 98 |     				  	    <i class="fas fa-external-link-alt"></i>
 99 |     				     </a>        
100 |     				     <a class="fs-toggle margin-right:5px" target="#playground-1"><i class="fas fa-expand"></i></a>
101 |     			        </div>
102 |     			
103 |     			        <div class="svRow">
104 |     			            
105 |     			            <div class="svColumn">
106 |     			            	
107 |     			                <div class="svPanel">
108 |     			                    <div realtime="false"
109 |     			                        collection="modules"
110 |     			                        document_id="5eefe30952c6e94c75fb5e3f"
111 |     			                        name="html" 
112 |     			                        id="7" 
113 |     			                        class="codemirror min-width:300px">
114 |     			                    </div>
115 |     			                </div>
116 |     			            	<div class="svSplitter svHorizontal"> </div>
117 |     			
118 |     			                <div class="svPanel">
119 |     			                    <iframe get-value="7" frameBorder="0" height="100%" width="100%"  class="min-width:300px"></iframe>
120 |     			                </div>
121 |     			                
122 |     			            </div>
123 |     			        </div>
124 |     			    </div>
125 |     			    <!-- End SandBox -->
126 |     			    </div>
127 |                 </div>
128 |                 
129 |             </div>				
130 |         </div>
131 |         <script>
132 |             var config = {
133 |                 apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
134 |                 securityKey: 'f26baf68-e3a9-45fc-effe-502e47116265',
135 |                 organization_Id: '5de0387b12e200ea63204d6c'
136 |             }
137 |         </script>
138 |     
139 |         <!--CoCreateJS-->
140 |         <script src="https://server.cocreate.app/js/CoCreate.min.js"></script>
141 |         
142 |         <!-- CoCreate CodeMiirror -->
143 |         <script type="text/javascript" src="https://server.cocreate.app/CoCreate-plugins/CoCreate-codemirror/dist/CoCreate-codemirror.js" async></script>
144 |         
145 |     </body>
146 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@cocreate/checkout",
 3 |   "version": "1.0.0",
 4 |   "description": "A simple checkout component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
 5 |   "keywords": [
 6 |     "checkout",
 7 |     "cocreate",
 8 |     "low-code-framework",
 9 |     "no-code-framework",
10 |     "cocreatejs",
11 |     "cocreatejs-component",
12 |     "cocreate-framework",
13 |     "no-code",
14 |     "low-code",
15 |     "collaborative-framework",
16 |     "realtime",
17 |     "realtime-framework",
18 |     "collaboration",
19 |     "shared-editing",
20 |     "html5-framework",
21 |     "javascript-framework"
22 |   ],
23 |   "publishConfig": { "access": "public" },
24 |   "scripts": {
25 |     "start": "npx webpack --config webpack.config.js",
26 |     "build": "NODE_ENV=production npx webpack --config webpack.config.js",
27 |     "dev": "npx webpack --config webpack.config.js --watch",
28 |     "docs": "node ./node_modules/@cocreate/docs/src/index.js"
29 |   },
30 |   "repository": {
31 |     "type": "git",
32 |     "url": "git+https://github.com/CoCreate-app/CoCreate-checkout.git"
33 |   },
34 |   "author": "CoCreate LLC",
35 |   "license": "MIT",
36 |   "bugs": { "url": "https://github.com/CoCreate-app/CoCreate-checkout/issues" },
37 |   "homepage": "https://cocreate.app/docs/checkout",
38 |   "funding": {
39 |     "type": "GitHub Sponsors ❤",
40 |     "url": "https://github.com/sponsors/CoCreate-app"
41 |   },
42 |   "main": "./src/index.js",
43 |   "devDependencies": {
44 |     "@babel/core": "^7.9.6",
45 |     "@babel/preset-env": "^7.9.6",
46 |     "babel-loader": "^8.1.0",
47 |     "clean-webpack-plugin": "^3.0.0",
48 |     "html-webpack-plugin": "^4.5.0",
49 |     "uglifyjs-webpack-plugin": "^2.2.0",
50 |     "webpack": "^5.24.4",
51 |     "webpack-cli": "^4.5.0",
52 |     "webpack-log": "^3.0.1",
53 |     "file-loader": "^6.2.0",
54 |     "style-loader": "^2.0.0",
55 |     "terser-webpack-plugin": "^5.1.1"
56 |   },
57 |   "dependencies": { "@cocreate/docs": "^1.0.3" }
58 | }
59 | 


--------------------------------------------------------------------------------
/release.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   dryRun: false,
 3 |   branches: ["master"],
 4 |   plugins: [
 5 |     "@semantic-release/commit-analyzer",
 6 |     "@semantic-release/release-notes-generator",
 7 |     [
 8 |       "@semantic-release/changelog",
 9 |       {
10 |         changelogFile: "CHANGELOG.md",
11 |       },
12 |     ],
13 |     "@semantic-release/npm",
14 |     "@semantic-release/github",
15 |     [
16 |       "@semantic-release/git",
17 |       {
18 |         assets: ["CHANGELOG.md", "package.json"],
19 |       },
20 |     ],
21 |   ],
22 | };


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path")
 2 | const TerserPlugin = require("terser-webpack-plugin")
 3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 4 | let isProduction = process.env.NODE_ENV === "production"
 5 | const { CleanWebpackPlugin } = require("clean-webpack-plugin")
 6 | 
 7 | module.exports = {
 8 |   entry: {
 9 |     "CoCreate-checkout": "./src/CoCreate-checkout.js",
10 |   },
11 |   output: {
12 |     path: path.resolve(__dirname, "dist"),
13 |     filename: isProduction ? "[name].min.js" : "[name].js",
14 |     libraryTarget: "umd",
15 |     libraryExport: "default",
16 |     library: ["CoCreate", "checkout"],
17 |     globalObject: "this",
18 |     // publicPath: 'https://server.cocreate.app/CoCreateJS/dist/'
19 |   },
20 | 
21 |   plugins: [
22 |     new CleanWebpackPlugin(),
23 |     new MiniCssExtractPlugin({
24 |       filename: "[name].css",
25 |     }),
26 |   ],
27 |   // Default mode for Webpack is production.
28 |   // Depending on mode Webpack will apply different things
29 |   // on final bundle. For now we don't need production's JavaScript
30 |   // minifying and other thing so let's set mode to development
31 |   mode: isProduction ? "production" : "development",
32 |   module: {
33 |     rules: [
34 |       {
35 |         test: /.js$/,
36 |         exclude: /(node_modules)/,
37 |         use: {
38 |           loader: "babel-loader",
39 |           options: {
40 |             plugins: ["@babel/plugin-transform-modules-commonjs"],
41 |           },
42 |         },
43 |       },
44 |       {
45 |         test: /.css$/i,
46 |         use: [
47 |           { loader: "style-loader", options: { injectType: "linkTag" } },
48 |           "file-loader",
49 |         ],
50 |       },
51 |     ],
52 |   },
53 | 
54 |   // add source map
55 |   ...(isProduction ? {} : { devtool: "eval-source-map" }),
56 | 
57 |   optimization: {
58 |     minimize: true,
59 |     minimizer: [
60 |       new TerserPlugin({
61 |         extractComments: true,
62 |         // cache: true,
63 |         parallel: true,
64 |         // sourceMap: true, // Must be set to true if using source-maps in production
65 |         terserOptions: {
66 |           // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
67 |           // extractComments: 'all',
68 |           compress: {
69 |             drop_console: true,
70 |           },
71 |         },
72 |       }),
73 |     ],
74 |     splitChunks: {
75 |       chunks: "all",
76 |       minSize: 200,
77 |       // maxSize: 99999,
78 |       //minChunks: 1,
79 | 
80 |       cacheGroups: {
81 |         defaultVendors: false,
82 |       },
83 |     },
84 |   },
85 | }
86 | 


--------------------------------------------------------------------------------