Index: branches/1.0.x/elements/ajax/payment_form.tpl
===================================================================
diff -u -N
--- branches/1.0.x/elements/ajax/payment_form.tpl	(revision 0)
+++ branches/1.0.x/elements/ajax/payment_form.tpl	(revision 14822)
@@ -0,0 +1,7 @@
+<form id="payment-form" method="post" action="<inp2:ord_GetFormAction/>">
+	<inp2:ord_GetFormHiddenFields return_template="receipt" cancel_template="checkout"/>
+
+	<!--##<inp2:m_if check="ord_NeedsPlaceButton">
+		<input type="submit" value="<inp2:m_Phrase label='lu_order_CompleteOrder'/>"/>
+	</inp2:m_if>##-->
+</form>
\ No newline at end of file
Index: branches/1.0.x/checkout.tpl
===================================================================
diff -u -N -r14817 -r14822
--- branches/1.0.x/checkout.tpl	(.../checkout.tpl)	(revision 14817)
+++ branches/1.0.x/checkout.tpl	(.../checkout.tpl)	(revision 14822)
@@ -50,7 +50,7 @@
 					<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingCompany" title="lu_fld_Company"/>
 					<inp2:m_RenderElement name="inp_edit_address" prefix="ord" field="BillingAddress1" field2="BillingAddress2" title="lu_fld_Address"/>
 					<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="BillingCity" title="lu_fld_City"/>
-					<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="BillingCountry" title="lu_fld_Country" has_empty="1" empty_label="lu_opt_SelectCountry"/>
+					<inp2:m_RenderElement name="inp_edit_country" prefix="ord" field="BillingCountry" state_field="BillingState" title="lu_fld_Country" has_empty="1" empty_label="lu_opt_SelectCountry"/>
 
 					<!-- TODO: preload states by country -->
 					<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="BillingState" title="lu_fld_State" has_empty="1" row_class="alt1"/>
@@ -63,23 +63,50 @@
 						Payment Information
 					</div>
 					<div class="creditcards">
-						<span><img src="<inp2:m_TemplatesBase/>img/creditcards.jpg" width="245" height="39" alt="" /></span>
-						<span class="paypal"><img src="<inp2:m_TemplatesBase/>img/paypal.jpg" width="98" height="45" alt="" /></span>
+						<inp2:m_if check='ord_UsingCreditCard'>
+							<span><img src="<inp2:m_TemplatesBase/>img/creditcards.jpg" width="245" height="39" alt="" /></span>
+						</inp2:m_if>
+
+						<inp2:m_if check="pt.gw-paypal_Field" name="PaymentTypeId" gateway="PayPal">
+							<span<inp2:m_if check='ord_UsingCreditCard'> class="paypal"</inp2:m_if>>
+								<a href="#" id="paypal" payment_type="<inp2:pt.gw-paypal_Field name='PaymentTypeId' gateway='PayPal'/>">
+									<img src="<inp2:m_TemplatesBase/>img/paypal.jpg" width="98" height="45" alt="" />
+								</a>
+							</span>
+
+							<script type="text/javascript">
+								$(document).ready(
+									function () {
+										$('#paypal').click(
+											function ($e) {
+												FormManager.getField('ord', 'PaymentType').value = $(this).attr('payment_type');
+												FormManager.submitForm('ord');
+
+												return false;
+											}
+										);
+									}
+								);
+							</script>
+						</inp2:m_if>
 					</div>
 
-					<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="PaymentAccount" title="lu_fld_CreditCardNumber"/>
+					<inp2:m_if check='ord_UsingCreditCard'>
+						<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="PaymentAccount" title="lu_fld_CreditCardNumber"/>
 
-					<inp2:m_RenderElement design="form_row" prefix="ord" field="PaymentCCExpDate" title="lu_fld_ExpirationDate" row_class="alt1 expdate" field_type="cc_expiration">
-						<select class="field" name="<inp2:ord_InputName field='PaymentCCExpMonth'/>" id="<inp2:ord_InputName field='PaymentCCExpMonth'/>">
-							<inp2:ord_PredefinedOptions field="PaymentCCExpMonth" render_as="inp_option_item" selected="selected"/>
-						</select> /
-						<select class="field" name="<inp2:ord_InputName field='PaymentCCExpYear'/>" id="<inp2:ord_InputName field='PaymentCCExpYear'/>">
-							<option value=''></option>
-							<inp2:ord_PrintYearOptions field="PaymentCCExpYear" render_as="inp_option_item" selected="selected"/>
-						</select>
-					</inp2:m_RenderElement>
+						<inp2:m_RenderElement design="form_row" prefix="ord" field="PaymentCCExpDate" title="lu_fld_ExpirationDate" row_class="alt1 expdate" field_type="cc_expiration">
+							<select class="field" name="<inp2:ord_InputName field='PaymentCCExpMonth'/>" id="<inp2:ord_InputName field='PaymentCCExpMonth'/>">
+								<inp2:ord_PredefinedOptions field="PaymentCCExpMonth" render_as="inp_option_item" selected="selected"/>
+							</select> /
+							<select class="field" name="<inp2:ord_InputName field='PaymentCCExpYear'/>" id="<inp2:ord_InputName field='PaymentCCExpYear'/>">
+								<option value=''></option>
+								<inp2:ord_PrintYearOptions field="PaymentCCExpYear" render_as="inp_option_item" selected="selected"/>
+							</select>
+						</inp2:m_RenderElement>
 
-					<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="PaymentCVV2" title="lu_fld_SecurityCode" row_class="alt2"/>
+						<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="PaymentCVV2" title="lu_fld_SecurityCode" row_class="alt2"/>
+						<input type="hidden" name="check_credit_card" id="check_credit_card" value="true"/>
+					</inp2:m_if>
 				</fieldset>
 			</div>
 
@@ -108,7 +135,7 @@
 						<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="ShippingCompany" title="lu_fld_Company"/>
 						<inp2:m_RenderElement name="inp_edit_address" prefix="ord" field="ShippingAddress1" field2="ShippingAddress2" title="lu_fld_Address"/>
 						<inp2:m_RenderElement name="inp_edit_box" prefix="ord" field="ShippingCity" title="lu_fld_City"/>
-						<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="ShippingCountry" title="lu_fld_Country" has_empty="1" empty_label="lu_opt_SelectCountry"/>
+						<inp2:m_RenderElement name="inp_edit_country" prefix="ord" field="ShippingCountry" state_field="ShippingState" title="lu_fld_Country" has_empty="1" empty_label="lu_opt_SelectCountry"/>
 
 						<!-- TODO: preload states by country -->
 						<inp2:m_RenderElement name="inp_edit_options" prefix="ord" field="ShippingState" title="lu_fld_State" has_empty="1" row_class="alt1"/>
@@ -135,16 +162,7 @@
 						<a href="#" class="link">View Order Details</a>
 					</div>
 					<dl class="total">
-						<dt>Subtotal</dt>
-						<dd>$1,759.99</dd>
-						<dt class="discount">Discount:</dt>
-						<dd class="price2">- $10.00</dd>
-						<dt>Shipping</dt>
-						<dd class="price3">$100.00</dd>
-						<dt>Tax</dt>
-						<dd class="price3">$100.00</dd>
-						<dt>Order Total</dt>
-						<dd class="price4">$1,959.99</dd>
+						<inp2:m_include template="elements/ajax/order_totals"/>
 					</dl>
 					<div class="clear"></div>
 					<div class="terms">
@@ -158,11 +176,11 @@
 			<div class="clear"></div>
 
 			<inp2:m_RenderElement name="inp_edit_hidden" prefix="ord" field="PaymentType" db="db"/>
-
 			<input type="hidden" name="check_billing_address" id="check_billing_address" value="true"/>
 			<input type="hidden" name="check_shipping_address" id="check_shipping_address" value="true"/>
-			<input type="hidden" name="check_credit_card" id="check_credit_card" value="true"/>
 		</form>
+
+		<inp2:m_include template="elements/ajax/payment_form"/>
 	</div>
 
 	<script type="text/javascript">
@@ -229,10 +247,13 @@
 			return $status;
 		}
 
-		CheckoutManager.updateOrder = function ($return_template, $callback) {
+		CheckoutManager.updateOrder = function ($return_template, $callback, $remove_fields) {
 			var $me = this,
-				$params = $('#checkout-form').serializeArray(),
+				$params = $('#checkout-form').serializeArray();
+
+			if ( $remove_fields === undefined ) {
 				$remove_fields = ['check_billing_address', 'check_shipping_address', 'check_credit_card'];
+			}
 
 			for (var $i in $params) {
 				if ( in_array($params[$i].name, $remove_fields) ) {
@@ -330,9 +351,20 @@
 				FormManager.registerForm(
 					{
 						prefix: 'ord',
-						save_event: 'OnCombinedPlaceOrder',
+						save_event: 'OnUpdateAjax',
 						id: '<inp2:ord_Field name="OrderId"/>',
-						form_id: 'checkout-form'
+						form_id: 'checkout-form',
+						before_close: function ($data, $add_params) {
+							// when all form data is valid
+
+							CheckoutManager.updateOrder(
+								'elements/ajax/payment_form',
+								function ($data) {
+									$('#payment-form').replaceWith($data);
+									$('#payment-form').submit();
+								}
+							);
+						}
 					}
 				);
 
@@ -344,14 +376,6 @@
 					}
 				);
 
-				$('#checkout-form').submit(
-					function ($e) {
-						FormManager.submitForm('ord');
-
-						return false;
-					}
-				);
-
 				CheckoutManager.init();
 			}
 		);
Index: branches/1.0.x/elements/ajax/order_totals.tpl
===================================================================
diff -u -N
--- branches/1.0.x/elements/ajax/order_totals.tpl	(revision 0)
+++ branches/1.0.x/elements/ajax/order_totals.tpl	(revision 14822)
@@ -0,0 +1,35 @@
+<inp2:m_DefineElement name="sub_total">
+	<dt>Subtotal</dt>
+	<dd><inp2:ord_Field name="AmountWithoutVAT" currency="selected"/></dd>
+</inp2:m_DefineElement>
+
+<inp2:m_DefineElement name="shipping_total">
+	<!--##<dt>Shipping</dt>
+	<dd class="price3"><inp2:ord_Field name="ShippingCost" currency="selected"/></dd>
+
+	<dt>Insurance Fee</dt>
+	<dd class="price3"><inp2:ord_Field name="InsuranceFee" currency="selected"/></dd>##-->
+
+	<dt>Shipping</dt>
+	<dd class="price3"><inp2:ord_Field name="ShippingSubTotal" currency="selected"/></dd>
+</inp2:m_DefineElement>
+
+<inp2:m_DefineElement name="processing_total">
+	<dt>Processing Fee</dt>
+	<dd class="price3"><inp2:ord_Field name="ProcessingFee" currency="selected"/></dd>
+</inp2:m_DefineElement>
+
+<inp2:m_DefineElement name="vat_total">
+	<dt>Tax <inp2:ord_Field name="VATPercent"/>%</dt>
+	<dd class="price3"><inp2:ord_Field name="VAT" currency="selected"/></dd>
+</inp2:m_DefineElement>
+
+<inp2:m_DefineElement name="discount_total">
+	<dt class="discount">Discount:</dt>
+	<dd class="price2">- <inp2:ord_Field name="DiscountTotal" currency="selected" /></dd>
+</inp2:m_DefineElement>
+
+<inp2:ord_PrintTotals sub_total_render_as="sub_total" discount_render_as="discount_total" shipping_render_as="shipping_total" processing_render_as="processing_total" vat_render_as="vat_total"/>
+
+<dt>Order Total</dt>
+<dd class="price4"><inp2:ord_Field name="TotalAmount" currency="selected"/></dd>
\ No newline at end of file
Index: branches/1.0.x/inc/js/jquery.scripts.js
===================================================================
diff -u -N -r14805 -r14822
--- branches/1.0.x/inc/js/jquery.scripts.js	(.../jquery.scripts.js)	(revision 14805)
+++ branches/1.0.x/inc/js/jquery.scripts.js	(.../jquery.scripts.js)	(revision 14822)
@@ -25,6 +25,13 @@
     );
 };
 
+function get_control($mask, $field, $append, $prepend) {
+	$append = $append !== undefined ? '_' + $append : '';
+	$prepend = $prepend !== undefined ? $prepend + '_' : '';
+
+	return document.getElementById( $prepend + $mask.replace('#FIELD_NAME#', $field) + $append );
+}
+
 function update_checkbox_options($cb_mask, $hidden_id, $form_id)
 {
 	var $tmp = '',
Index: branches/1.0.x/elements/ajax/register.tpl
===================================================================
diff -u -N -r14805 -r14822
--- branches/1.0.x/elements/ajax/register.tpl	(.../register.tpl)	(revision 14805)
+++ branches/1.0.x/elements/ajax/register.tpl	(.../register.tpl)	(revision 14822)
@@ -27,9 +27,8 @@
 		<div class="halfcol halfcol-last">
 			<inp2:m_RenderElement name="inp_edit_address" prefix="u.register" field="Street" field2="Street2" title="lu_fld_Address"/>
 			<inp2:m_RenderElement name="inp_edit_box" prefix="u.register" field="City"/>
-			<inp2:m_RenderElement name="inp_edit_options" prefix="u.register" field="Country" has_empty="1" empty_label="lu_opt_SelectCountry"/>
+			<inp2:m_RenderElement name="inp_edit_country" prefix="u.register" field="Country" state_field="State" has_empty="1" empty_label="lu_opt_SelectCountry"/>
 
-			<!-- TODO: preload states by country -->
 			<inp2:m_RenderElement name="inp_edit_options" prefix="u.register" field="State" has_empty="1"/>
 			<inp2:m_RenderElement name="inp_edit_box" prefix="u.register" field="Zip" row_class="alt2"/>
 
Index: branches/1.0.x/elements/ajax/shipping_type.tpl
===================================================================
diff -u -N -r14817 -r14822
--- branches/1.0.x/elements/ajax/shipping_type.tpl	(.../shipping_type.tpl)	(revision 14817)
+++ branches/1.0.x/elements/ajax/shipping_type.tpl	(.../shipping_type.tpl)	(revision 14822)
@@ -4,11 +4,12 @@
 </inp2:m_DefineElement>
 
 <inp2:m_DefineElement name="order_shipping_type">
-	<option <inp2:m_param name="selected"/> value="<inp2:m_param name='ShippingId'/>"><inp2:m_param name="ShippingName"/> (<inp2:m_if check="m_param" name="ShippingFree" value="1"><inp2:m_Phrase label="lu_comm_FreeShipping" /><inp2:m_else/><inp2:m_param name="TotalCost"/></inp2:m_if>)</option>
+	<option <inp2:m_param name="selected"/> value="<inp2:m_param name='ShippingId'/>"> <inp2:m_param name="ShippingName"/> (<inp2:m_if check="m_param" name="ShippingFree" value="1"><inp2:m_Phrase label="lu_comm_FreeShipping" /><inp2:m_else/><inp2:m_param name="TotalCost"/></inp2:m_if>)</option>
 </inp2:m_DefineElement>
 
 <inp2:m_DefineElement name="order_shipment">
 	<select class="field" name="<inp2:m_param name='field_name'/>">
+		<option value="">Please select</option>
 		<inp2:ord_PrintShippingTypes render_as="order_shipping_type" currency="selected"/>
 	</select>
 </inp2:m_DefineElement>
@@ -22,3 +23,20 @@
 		<option value="">Please enter address</option>
 	</select>
 </inp2:m_if>
+
+<script type="text/javascript">
+	$(document).ready(
+		function () {
+			$('select', '#shipping-type-container').change(
+				function ($e) {
+					CheckoutManager.updateOrder(
+						'elements/ajax/order_totals',
+						function ($data) {
+							$('.total').html($data);
+						}
+					);
+				}
+			);
+		}
+	);
+</script>
\ No newline at end of file
Index: branches/1.0.x/elements/forms.elm.tpl
===================================================================
diff -u -N -r14805 -r14822
--- branches/1.0.x/elements/forms.elm.tpl	(.../forms.elm.tpl)	(revision 14805)
+++ branches/1.0.x/elements/forms.elm.tpl	(.../forms.elm.tpl)	(revision 14822)
@@ -358,6 +358,47 @@
 	</inp2:m_RenderElement>
 </inp2:m_DefineElement>
 
+<inp2:m_DefineElement name="inp_edit_country" title="lu_fld_{$field}" state_field="" style="" has_empty="0" empty_value="" empty_label="" field_type="select" no_editing="1">
+	<inp2:m_RenderElement design="form_row" pass_params="1">
+		<select class="field" tabindex="<inp2:m_get param="tab_index"/>" state_field="<inp2:m_Param name='state_field'/>" name="<inp2:{$prefix}_InputName field="$field"/>" id="<inp2:{$prefix}_InputName field="$field"/>" style="<inp2:m_param name="style"/>">
+			<inp2:{$prefix}_PredefinedOptions field="$field" block="inp_option_item" selected="selected" has_empty="$has_empty" empty_value="$empty_value" empty_label="$empty_label"/>
+		</select>
+
+		<script type="text/javascript">
+			$(document).ready(
+				function () {
+					var $field_mask = '<inp2:$prefix_InputName field="#FIELD_NAME#" js_escape="1"/>';
+
+					$( get_control($field_mask, '<inp2:m_Param name="field"/>') ).change(
+						function ($e) {
+							var	$me = $(this),
+								$state_dropdown = $( get_control($field_mask, $me.attr('state_field')) ),
+								$url = '<inp2:m_Link country-state_event="OnGetStatesJSON" country_iso="#ISO#" pass="m,country-state" no_amp="1" js_escape="1"/>';
+
+							$.getJSON(
+								$url.replace('#ISO#', $me.val()),
+								function ($states) {
+									var $selected = $state_dropdown.val();
+
+									$state_dropdown.empty().append('<option value=""></option>');
+
+									if ( !$.isArray($states) ) {
+										for (var $state_iso in $states) {
+											$state_dropdown.append('<option value="' + $state_iso + '">' + $states[$state_iso] + '</option>');
+										}
+									}
+
+									$state_dropdown.val($selected);
+								}
+							);
+						}
+					);
+				}
+			);
+		</script>
+	</inp2:m_RenderElement>
+</inp2:m_DefineElement>
+
 <inp2:m_DefineElement name="inp_radio_item" style="" onclick="" has_br="0">
 	<input type="radio" tabindex="<inp2:m_get param="tab_index"/>" style="<inp2:m_param name="style"/>" <inp2:m_param name="checked"/> name="<inp2:{$prefix}_InputName field="$field"/>" id="<inp2:{$prefix}_InputName field="$field"/>_<inp2:m_param name="key"/>" value="<inp2:m_param name="key"/>"><label for="<inp2:{$prefix}_InputName field="$field"/>_<inp2:m_param name="key"/>">&nbsp;<inp2:m_param name="option"/></label><inp2:m_if check="m_Param" name="has_br"><br/><inp2:m_else/>&nbsp;&nbsp;</inp2:m_if>
 </inp2:m_DefineElement>