Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

Strip

// Add Shortcode
function Strip_shortcode( $atts , $content = null ) {

	// 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( 'Strip', 'Strip_shortcode' );