So apparently I offended a couple of people. I also forgot to mentioned that I was trying do do it with AJAX which was my main problem I was trying to work out.
I have actually found some related links, finally, that seems to have pointed me into the right direction that I was looking for. Which mainly what I wanted.
Below are the links that has helped me so far. Hopes they help anyone looking for the same thing.
https://youtu.be/EildM6OMcoQ
Not sure why this one finally showed up on my search? Guess did not phase my search correctly...
Make a Stripe payment with Jquery AJAX? (Javascript ONLY)
There is one or two more link, but I will have to find them. I will add them once they are found....
Here is my test scripts, mainly for checking on passing the token...
Will need to see about making it work with STRIPE
V3 API...
Form.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__HERE__);
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: "./testphp.php",
data: data,
success: function(returndata){
$form.find('button').prop('disabled', false);
$('.payment-errors').text(returndata);
}
});
});
// 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']; // will only show if page is reloaded
// will not be the same as new token
// used to check against after submit
?>
<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="01"/>
</label>
<span> / </span>
<input type="text" size="4" data-stripe="exp-year" value="2019"/>
</div>
<button type="submit" id="thebutton">Submit Payment</button>
</form>
</body>
</html>
testphp.php
<?php
// Start the session
session_start();
// Store the received token string in a session variable
if($_POST){
$_SESSION['token']=$_POST['stripeToken'];
}
echo $_POST['stripeToken'];
echo "\n";
print_r($_SESSION);
?>
There are a lot of other things I am going to have to work out, but this mainly was mainly the direction I was looking advice on....