CMP, Ext.js and rendering/processing forms.

SwipeIt.panel.Terminal = function(config) {
    config = config || {};
    Ext.apply(config,{
        id : 'swipeit-panel-terminal'
        ,border: false
        ,baseCls: 'modx-formpanel'
        ,standardSubmit: true
        ,url: SwipeIt.config.connectorUrl
        ,items:[{
            name:'firstName'
            ,fieldLabel:'First Name'
        },{
            name:'lastName'
            ,fieldLabel:'Last Name'
        },{
            name:'email'
            ,fieldLabel:'Email Address'
            ,vtype:'email'
        }]
        ,layout: 'fit'
        ,buttons: [{
            text: 'Submit'
            ,type: 'submit'
            ,handler:  function(){
                form.submit();
            }
        },{
            text: 'Cancel'
            ,type: 'reset'
        }]
    });
    SwipeIt.panel.Terminal.superclass.constructor.call(this,config);
};
Ext.extend(SwipeIt.panel.Terminal,MODx.FormPanel);
Ext.reg('swipeit-panel-terminal',SwipeIt.panel.Terminal);

,xtype: 'textfield'

{
    xtype: 'textfield'
    ,name: 'firstName'
    ,fieldLabel: 'First Name'
    ,allowBlank: 'false'
}

function stripeResponseHandler(status, response) {
                if (response.error) {
                    // re-enable the submit button
                    $('.submit-button').removeAttr("disabled");
                    // show the errors on the form
                    $(".payment-errors").html(response.error.message);
                } else {
                    var form$ = $("#payment-form");
                    // token contains id, last4, and card type
                    var token = response['id'];
                    // insert the token into the form so it gets submitted to the server
                    form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
                    // and submit
		  
		  var pname = $('#firstname').val();
		  var camount = "$" + $('#chargeAmount').val() / 100;
		  if (confirm("Are you sure you want to charge " + pname + " " + camount)) { 
 		      form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
		      form$.get(0).submit();
		    }	
                    
                }
            }

            $(document).ready(function() {
                $('.submit-button').css("display", "inline");
	      	$("#payment-form").submit(function(event) {
                    // disable the submit button to prevent repeated clicks
                    $('.submit-button').attr("disabled", "disabled");
                    var chargeAmount = 0; //amount you want to charge, in cents. 1000 = $10.00, 2000 = $20.00 ...
                    // createToken returns immediately - the supplied callback submits the form if there are no errors
                    Stripe.createToken({
                        number: $('.card-number').val(),
                        cvc: $('.card-cvc').val(),
                        exp_month: $('.card-expiry-month').val(),
                        exp_year: $('.card-expiry-year').val(),
		        address: $('.address').val(),
		        zip: $('.zip').val()
                    }, chargeAmount, stripeResponseHandler);
                    return false; // submit from callback
                });
            });

SwipeIt.panel.Terminal = function(config) {
    config = config || {};
    Ext.apply(config,{
        id : 'swipeit-panel-terminal'
        ,border: false
        ,baseCls: 'modx-formpanel'
        ,standardSubmit: true
        ,url: SwipeIt.config.connectorUrl
        ,items:[{
            name: 'firstName'
            ,fieldLabel: 'First Name'
            ,labelStyle: 'color:green; font-style:bold; width:130px;'
            ,xtype: 'textfield'
        },{
            name: 'lastName'
            ,fieldLabel: 'Last Name'
            ,xtype: 'textfield'
        },{
            name:'email'
            ,fieldLabel: 'Email Address'
            ,xtype: 'textfield'
            ,vtype:'email'
        }]
        ,buttons: [{
            text: 'Submit'
            ,type: 'submit'
            ,handler:  function(){
                form.submit();
            }
        },{
            text: 'Cancel'
            ,type: 'reset'
        }]
            // callback handler if submit has been successful
            ,success:function(form, action){
                Ext.MessageBox.alert('Success', 'Success');
            }

        // callback handler if submit has failed
        ,failure: function(form, action) {
        Ext.MessageBox.alert('Failure', 'Failure');
    }
    });
    SwipeIt.panel.Terminal.superclass.constructor.call(this,config);
};
Ext.extend(SwipeIt.panel.Terminal,MODx.FormPanel);
Ext.reg('swipeit-panel-terminal',SwipeIt.panel.Terminal);

,layout: 'form'
,items: [{...}]