User-Friendly jQuery Checkout Form Plugin - lightCheckout

lightCheckout is a jQuery plugin that creates a fast, user-friendly and customizable checkout form for eCommerce website / landing page to increase the conversion rate. The plugin helps you simplify the address form reducing your form fields, hide address, city, province and zipcode fields and replace them with Google Places Autocompleter, that autofill the form.

Basic usage:

1. Include jQuery library and the jQuery lightCheckout plugin's JavaScript and CSS files on your web page.

<script src="jquery.min.js"></script>
<script src="js/lightCheckout.min.js"></script>
<link href="css/lightCheckout.css" rel="stylesheet">

2. Create an address form like this:

<form class="addressForm">
   <div class="name">
      <input name="name" id="name" type="text">
   </div>
   <div class="surname">
      <input name="surname" id="surname" type="text">
   </div>
   <div class="address">
      <input name="address" id="address" type="text">
   </div>
   <div class="city">
      <input name="city" id="city" type="text">
   </div>
   <div class="zipcode">
      <input name="zipcode" id="zipcode" type="text">
   </div>
   <div class="province">
      <select name="province" id="province" >
        <option value="NY">New York</option>
        <option value="CA">California</option>
       <option value="...">...</option>
      </select>
   </div>
   <div class="submit">
      <input type="submit" value="Continue">
   </div>
</form>

3. Initialize the plugin and config the address form.

$('.addressForm').lightChekout({

// Selector of input wrapper
inputWrapper : 'div',

// Selector of autocomplete input
autocomplete: null,

// Selector of address input
address: '.address',

// Selector of city input
city: '.city',

// Selector of province input
province: '.province',

// Selector of zip input
zip: '.zip',

// choose if province must be set with short name or long name
shortProvince: true,

// Error to show when users not set street number in address input
noNumberError: 'Please, insert also street number.',

// Language of Google Places libraries
language: 'en',

// event
setField: function ($input, value) {
  $input.val(value);
}

});

---

This awesome jQuery plugin is developed by sperti. For more Advanced Usages, please check the demo page or visit the official website.