openyk · March 10, 2014 22:30
diff --git a/test.php b/test.php
 <?php session_start(); ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title>Stripe Getting Started Form</title>
 
 <!-- The required Stripe lib -->
 <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
 
 <!-- jQuery is used only for this example; it isn't required to use Stripe -->
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
 <script type="text/javascript">
 // This identifies your website in the createToken call below
 Stripe.setPublishableKey('YOUR_PUBLIC_KEY');
 
 var stripeResponseHandler = function(status, response) {
 var $form = $('#payment-form');
 
 if (response.error) {
 // Show the errors on the form
 $form.find('.payment-errors').text(response.error.message);
 $form.find('button').prop('disabled', false);
 } else {
 // 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" />').val(token));
 // and re-submit
 //$form.get(0).submit();

 // Serialize the form
 var data=$('#payment-form').serialize(); 

 // Send form to server with POST method
 $(function() {
 	$.ajax({
 		type: "POST",
 		url: "http://path/to/testphp.php",
 		data: data,
 		success: function(){
 			$form.find('button').prop('disabled', false);
 		}
 	});
 });

 // Prevent page from refreshing
 return false;

 }
 };
 

 // ONCLICK RESPONSE 
 jQuery(function($) {
 $('#thebutton').on('click', function(e) {
 var $form = $('#payment-form');
 
 // Disable the submit button to prevent repeated clicks
 $form.find('button').prop('disabled', true);
 
 Stripe.card.createToken($form, stripeResponseHandler);
 
 // Prevent the form from submitting with the default action
 return false;
 });
 });
 </script>

 </head>
 <body>

 <?php 

 //$_SESSION['token'] = "12345";
 echo $_SESSION['token']; 

 ?>

 <h1>Charge $10 with Stripe</h1>
 
 <form action="" method="POST" id="payment-form">
 <span class="payment-errors"></span>
 
 <div class="form-row">
 <label>
 <span>Card Number</span>

 <input type="text" size="20" data-stripe="number" value="424242424242424"/>

 </label>
 </div>
 
 <div class="form-row">
 <label>
 <span>CVC</span>
 <input type="text" size="4" data-stripe="cvc" value="424" />
 </label>
 </div>
 
 <div class="form-row">
 <label>
 <span>Expiration (MM/YYYY)</span>
 <input type="text" size="2" data-stripe="exp-month" value="1"/>
 </label>
 <span> / </span>
 <input type="text" size="4" data-stripe="exp-year" value="2017"/>
 </div>
 
 <button type="submit" id="thebutton">Submit Payment</button>
 </form>
 </body>
 </html>
diff --git a/testphp.php b/testphp.php
 <?php

 // Start the session
 session_start();

 // Store the received token string in a session variable
 if($_POST)
 {
 $_SESSION['token']=$_POST['stripeToken'];
 }

 ?>
	<?php session_start(); ?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Stripe Getting Started Form</title>

	<!-- The required Stripe lib -->
	<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

	<!-- jQuery is used only for this example; it isn't required to use Stripe -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	<script type="text/javascript">
	// This identifies your website in the createToken call below
	Stripe.setPublishableKey('YOUR_PUBLIC_KEY');

	var stripeResponseHandler = function(status, response) {
	var $form = $('#payment-form');

	if (response.error) {
	// Show the errors on the form
	$form.find('.payment-errors').text(response.error.message);
	$form.find('button').prop('disabled', false);
	} else {
	// 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" />').val(token));
	// and re-submit
	//$form.get(0).submit();

	// Serialize the form
	var data=$('#payment-form').serialize();

	// Send form to server with POST method
	$(function() {
	$.ajax({
	type: "POST",
	url: "http://path/to/testphp.php",
	data: data,
	success: function(){
	$form.find('button').prop('disabled', false);
	}
	});
	});

	// Prevent page from refreshing
	return false;

	}
	};


	// ONCLICK RESPONSE
	jQuery(function($) {
	$('#thebutton').on('click', function(e) {
	var $form = $('#payment-form');

	// Disable the submit button to prevent repeated clicks
	$form.find('button').prop('disabled', true);

	Stripe.card.createToken($form, stripeResponseHandler);

	// Prevent the form from submitting with the default action
	return false;
	});
	});
	</script>

	</head>
	<body>

	<?php

	//$_SESSION['token'] = "12345";
	echo $_SESSION['token'];

	?>

	<h1>Charge $10 with Stripe</h1>

	<form action="" method="POST" id="payment-form">
	<span class="payment-errors"></span>

	<div class="form-row">
	<label>
	<span>Card Number</span>

	<input type="text" size="20" data-stripe="number" value="424242424242424"/>

	</label>
	</div>

	<div class="form-row">
	<label>
	<span>CVC</span>
	<input type="text" size="4" data-stripe="cvc" value="424" />
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Expiration (MM/YYYY)</span>
	<input type="text" size="2" data-stripe="exp-month" value="1"/>
	</label>
	<span> / </span>
	<input type="text" size="4" data-stripe="exp-year" value="2017"/>
	</div>

	<button type="submit" id="thebutton">Submit Payment</button>
	</form>
	</body>
	</html>
	<?php

	// Start the session
	session_start();

	// Store the received token string in a session variable
	if($_POST)
	{
	$_SESSION['token']=$_POST['stripeToken'];
	}

	?>