Strip
// Add Shortcode
function custom_shortcode() {
// Code
<?php
/*
template Name: Strip Payment Gateway
*/
?>
<style type="text/css">
#headmenu table
{
width: 600px;
margin: auto;
}
.stepp{
width: 250px;
height: 50px;
font-size: 25px;
font-weight: bolder;
text-align: center!important;
vertical-align: middle;
}
.stepactive
{
background-color: rgba(18, 244, 44, 0.61);
}
#accountinfo, #userinfo, #payment
{
width: 100%;
height: 300px;
border: 1px solid;
padding-top: 50px;
}
#accountinfo form, #userinfo form,#payment form
{
width: 500px;
margin: auto;
}
.td
{
width: 200px;
vertical-align: middle;
height: 50px;
}
.btn
{
text-align: center!important;
height: 80px;
vertical-align: middle;
}
.sbt
{
height: 120px!important;
width: 200px!important;
background-color: #bdc3c7;
color: #2c3e50;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 35px;
padding-right: 35px;
font-weight: bolder;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
jQuery(function($) {
$('#payment-form').submit(function(event) {
var $form = $(this);
// 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;
});
jQuery("#sbt1").click(function()
{
alert("Submit1 !");
$.post('wp-content/themes/twentytwelve/bd/inscacc.php',
{
pseudo : $("#email").val(),
password : $("#passwd").val(),
verif_password : $("#passwd1").val(),
},
function(data){
if(data == "Success")
{
$("#notifications").html("<strong><span style="color: green;background-color: gray;padding: 10px;border-radius: 3px;margin-top: 6px;float: right;">Vous avez bien été inscrit !<br>Un e-mail de validation vous a été envoyé...</span></strong>");
}
else
{
$("#notifications").html("<strong><span style="color: red;background-color: pink;padding: 10px;border-radius: 3px;margin-top: 6px;float: right;">Il y a eu un problème lors de votre inscription.<br>Veuillez réitérer votre demande...<br>Si le problème persiste, contactez-nous.</span></strong>");
}
},
'text'
);
jQuery("#accountinfo").hide();
jQuery("#step1").removeClass('stepactive');
jQuery("#userinfo").show();
jQuery("#step2").addClass('stepactive');
jQuery("#payment").hide();
});
jQuery("#sbt2").click(function()
{
alert("Submit2 !");
$.post('wp-content/themes/twentytwelve/bd/inscuse.php',
{
name : $("#name").val(),
lname : $("#lname").val(),
tel : $("#tel").val(),
adr : $("#adr").val(),
},
function(data){
if(data == "Success")
{
$("#notifications").html("<strong><span style="color: green;background-color: gray;padding: 10px;border-radius: 3px;margin-top: 6px;float: right;">Vous avez bien été inscrit !<br>Un e-mail de validation vous a été envoyé...</span></strong>");
}
else
{
$("#notifications").html("<strong><span style="color: red;background-color: pink;padding: 10px;border-radius: 3px;margin-top: 6px;float: right;">Il y a eu un problème lors de votre inscription.<br>Veuillez réitérer votre demande...<br>Si le problème persiste, contactez-nous.</span></strong>");
}
},
'text'
);
jQuery("#accountinfo").hide();
jQuery("#userinfo").hide();
jQuery("#step2").removeClass('stepactive');
jQuery("#payment").show();
jQuery("#step3").addClass('stepactive');
});
});
function stripeResponseHandler(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 {
// response contains id and card, which contains additional card details
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 submit
$form.get(0).submit();
}
};
</script>
<?php get_header(); ?>
<div id="headmenu">
<table>
<tr>
<td id="step1" class="stepp stepactive"> Step1</td>
<td id="step2" class="stepp">Step2</td>
<td id="step3" class="stepp">Step3</td>
</tr>
</table>
</div>
<div id="accountinfo" >
<form action="" method="POST" id="account-form">
<table>
<tr>
<td class="td">E-mail</td>
<td><input type="email" name="email" id="email" class="" required></td>
</tr>
<tr>
<td class="td">Password</td>
<td><input type="password" name="passwd" id="passwd" class="" required></td>
</tr>
<tr>
<td class="td">Confirmation Password</td>
<td><input type="password" name="passwd1" id="passwd1" class="" required></td>
</tr>
<tr>
<td colspan="2" align="center" class="btn"><a id="sbt1" class="sbt">validé</a></td>
</tr>
</table>
</form>
</div>
<div id="userinfo" style="display:none;">
<form action="" method="POST" id="user-form" >
<table>
<tr>
<td class="td">First Name</td>
<td><input type="text" name="name" id="name" class="" required></td>
</tr>
<tr>
<td class="td">Last Name</td>
<td><input type="text" name="lname" id="lname" class="" required></td>
</tr>
<tr>
<td class="td">Phone</td>
<td><input type="text" name="tel" id="tel" class="" required></td>
</tr>
<tr>
<td class="td">Adress</td>
<td><textarea name="adr" id="adr" class="" required></textarea></td>
</tr>
<tr>
<td colspan="2" align="center" class="btn"><a id="sbt2" class="sbt">validé</a></td>
</tr>
</table>
</form>
</div>
<div id="payment" style="display:none;">
<form action="" method="POST" id="payment-form">
<span class="payment-errors">aaa</span>
<div class="form-row">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number"/>
</label>
</div>
<div class="form-row">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc"/>
</label>
</div>
<div class="form-row">
<label>
<span>Expiration (MM/YYYY)</span>
<input type="text" size="2" data-stripe="exp-month"/>
</label>
<span> / </span>
<input type="text" size="4" data-stripe="exp-year"/>
</div>
<button type="submit">Submit Payment</button>
</form>
</div>
<?php get_footer(); ?>
}
add_shortcode( '', 'custom_shortcode' );
hichem chouaibi