ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / letaweb / admin / views / site / checkout

<div class="form-row">
	<label for="email">E-mail Address</label>
	<input type="text" name="email" class="required" />
</div>

<div class="form-row">
	<label>Card Number</label>
	<input type="text" maxlength="20" autocomplete="off" class="card-number stripe-sensitive required" />
</div>

<div class="form-row">
	<label>Expiration</label>
	<div class="expiry-wrapper">
		<select class="card-expiry-month stripe-sensitive required">
		</select>
		<script type="text/javascript">
			var select = $(".card-expiry-month"),
				month = new Date().getMonth() + 1;
			for (var i = 1; i <= 12; i++) {
				select.append($("<option value='"+i+"' "+(month === i ? "selected" : "")+">"+i+"</option>"))
			}
		</script>
		<span> / </span>
		<select class="card-expiry-year stripe-sensitive required"></select>
		<script type="text/javascript">
			var select = $(".card-expiry-year"),
				year = new Date().getFullYear();
			for (var i = 0; i < 12; i++) {
				select.append($("<option value='"+(i + year)+"' "+(i === 0 ? "selected" : "")+">"+(i + year)+"</option>"))
			}
		</script>
	</div>
</div>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript">
	Stripe.setPublishableKey('<?php echo $this->public_key; ?>');
	$(document).ready(function() {
		function addInputNames() {
			// Not ideal, but jQuery's validate plugin requires fields to have names
			// so we add them at the last possible minute, in case any javascript 
			// exceptions have caused other parts of the script to fail.
			$(".card-number").attr("name", "card-number")
			$(".card-cvc").attr("name", "card-cvc")
			$(".card-expiry-year").attr("name", "card-expiry-year")
		}
		function removeInputNames() {
			$(".card-number").removeAttr("name")
			$(".card-cvc").removeAttr("name")
			$(".card-expiry-year").removeAttr("name")
		}
		function submit(form) {
			// remove the input field names for security
			// we do this *before* anything else which might throw an exception
			removeInputNames(); // THIS IS IMPORTANT!
			// given a valid form, submit the payment details to stripe
			$(form['submit-button']).attr("disabled", "disabled")
			Stripe.createToken({
				number: $('.card-number').val(),
				cvc: $('.card-cvc').val(),
				exp_month: $('.card-expiry-month').val(), 
				exp_year: $('.card-expiry-year').val()
			}, function(status, response) {
				if (response.error) {
					// re-enable the submit button
					$(form['submit-button']).removeAttr("disabled")

// show the error
					$(".payment-errors").html(response.error.message);
					// we add these names back in so we can revalidate properly
					addInputNames();
				} else {
					// token contains id, last4, and card type
					var token = response['id'];
					// insert the stripe token
					var input = $("<input name='stripeToken' value='" + token + "' style='display:none;' />");
					form.appendChild(input[0])
					// and submit
					form.submit();
				}
			});
			
			return false;
		}
		
		// add custom rules for credit card validating
		jQuery.validator.addMethod("cardNumber", Stripe.validateCardNumber, "Please enter a valid card number");
		jQuery.validator.addMethod("cardCVC", Stripe.validateCVC, "Please enter a valid security code");
		jQuery.validator.addMethod("cardExpiry", function() {
			return Stripe.validateExpiry($(".card-expiry-month").val(), 
										 $(".card-expiry-year").val())
		}, "Please enter a valid expiration");
		// We use the jQuery validate plugin to validate required params on submit
		$("#example-form").validate({
			submitHandler: submit,
			rules: {
				"card-cvc" : {
					cardCVC: true,
					required: true
				},
				"card-number" : {
					cardNumber: true,
					required: true
				},
				"card-expiry-year" : "cardExpiry" // we don't validate month separately
			}
		});
		// adding the input field names is the last step, in case an earlier step errors                
		addInputNames();
	});
</script>

[+] ..
[-] twocheckout_form.php [edit]
[-] stripe_form.php [edit]
[-] paypal_form.php [edit]