Easy to use checkout widget powered by Crowdstart.


Keywords
browser, cart, checkout, checkout.js, crowdfunding, crowdstart, ecommerce, payments, shopping, store, checkout-widget, form, javascript, shopjs
License
MIT
Install
npm install checkout.js@2.1.21

Documentation

Checkout.js Build Status Coverage Status NPM version Gitter chat

Our checkout widget makes it possible to start taking pre-orders in minutes, and is quite customizable.

Preview

Checkout.js Image

Install

$ npm install checkout.js

Usage

Set the href of your button to #checkout.

<a class="btn" href="#checkout">Buy Now</a>

Configure the checkout widget however you'd like.

<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. You can also see it in action in the Crowdstart documentation.