UNPKG

checkout.js

Version:

Easy to use checkout widget powered by Crowdstart.

74 lines (59 loc) 2.82 kB
# Checkout.js [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url] [![NPM version][npm-image]][npm-url] [![Gitter chat][gitter-image]][gitter-url] Our checkout widget makes it possible to start taking pre-orders in minutes, and is quite customizable. ## Preview ![Checkout.js Image][checkout-image] ## Install ```bash $ npm install checkout.js ``` ## Usage Set the `href` of your button to `#checkout`. ```html <a class="btn" href="#checkout">Buy Now</a> ``` Configure the checkout widget however you'd like. ```javascript <script src="https://cdn.rawgit.com/crowdstart/checkout.js/v2.1.6/checkout.min.js"></script> <script> // Create a new client for Crowdstart API. var api = new Crowdstart.API('eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJiaXQiOjI0LCJqdGkiOiJVMDc0RlU3MHVhWSIsInN1YiI6IkVxVEdveHA1dTMifQ.g_MqPv2s0DnyFdhkUMzYn9mtKaXNwmlEM14WcFq_s5Yd2eqH16TB9thxOdDE8ylcoBMgyI3eimSHJxGq7oj-EA') // Create default order, should match whatever the user is trying to pre-order var order = new Crowdstart.Order('usd',[ new Crowdstart.ItemRef('84cRXBYs9jX7w', -1), new Crowdstart.ItemRef('doge-shirt', 100) ]); // Create default user (pre-populated in form fields) var user = new Crowdstart.User('joe@fan.com', 'Joe', 'Fan') // Social sharing settings var config = { facebook: 'suchtees', googlePlus: 'suchtees', twitter: 'suchtees', } // Customize theme Crowdstart.setTheme({ borderRadius: 5, }) // Instantiate widget, can be called multiple times, overriding order in widget. Crowdstart.Checkout('checkout', api, order, user, config); </script> ``` ## Examples You can find examples in the [Github repo][examples]. You can also see it in action in the [Crowdstart documentation](http://www.crowdstart.com/docs/checkout). [checkout-image]: https://cdn.rawgit.com/crowdstart/checkout.js/v2.1.6/examples/basic/basic_screenshot.png [checkout.js]: https://cdn.rawgit.com/crowdstart/checkout.js/v2.1.6/checkout.min.js [crowdstart]: https://crowdstart.com [examples]: https://github.com/crowdstart/checkout.js/tree/master/examples [coveralls-image]: https://img.shields.io/coveralls/crowdstart/checkout.js.svg [coveralls-url]: https://coveralls.io/r/crowdstart/checkout.js/ [downloads-image]: https://img.shields.io/npm/dm/checkout.js.svg [downloads-url]: http://badge.fury.io/js/checkout.js [gitter-image]: https://img.shields.io/badge/gitter-join_chat-brightgreen.svg [gitter-url]: https://gitter.im/crowdstart/chat [npm-image]: https://img.shields.io/npm/v/checkout.js.svg [npm-url]: https://www.npmjs.com/package/checkout.js [travis-image]: https://img.shields.io/travis/crowdstart/checkout.js.svg [travis-url]: https://travis-ci.org/crowdstart/checkout.js