JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body >

<div class="container">
<h3 class="text-center text-primary">amount to be paid is :<label id="amountvalue"></label></h3>
<div id="divstripebutton12" >
 <button id="stripebutton12" class="btn btn-primary"  >Pay with card or Alipay/Bitcoin</button>
 </div>
 <div id="divstripebutton120"  >
 <button id="stripebutton120" class="btn btn-primary"  >Pay with card or Alipay/Bitcoin</button>
 </div>
<form id="derrickpaypal12"  action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="MME4A7SMMKZFY">
<input type="hidden" name="notify_url" value="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/plus/notify"> 
<input type="hidden" name="return" value="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/email">
<input type="hidden" name="custom" value="${amountvalue},${email},${id}"/>
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="amount" value="0">
<input type="hidden" name="cancel_return" value="http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/plus">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<form id="derrickpaypal120"  action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="amount" value="0">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden"...

JavaScript

var handler = StripeCheckout.configure({
  key: 'pk_test_RZbZyo9yiaiRtSx7BwrXiZUn',
  image: /*'url("/resources/images/512_copy.png")'*/ 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  panelLabel : 'pay ',
  zipCode : true ,
  billingAddress : true,
  bitcoin : true ,
  alipay : true ,
  alipayReusable : true,
  name: 'Sendit Plus'
});

now = new Date();


$('#stripebutton12').on('click', function(e) {
	//get the epochday + one month
	endingdate = Math.floor(now/8.64e7)+31;

  // Open Checkout with further options:
  handler.open({
	token: function(token) {
		    // You can access the token ID with `token.id`.
		    // Get the token ID to your server-side code for use.
		formData = new FormData();
		formData.append("tokenid", token.id);
		formData.append("email", "${email}");
		formData.append("ending_date", endingdate);
		$.ajax({
	        type:"POST",
	        url: "/app/plus/stripe_paymonth",
	        contentType: false,
		    processData: false,
		    data: formData, 
	        enctype: "multipart/form-data",
	        success : function(data){ 
	        	if(data==1){
					Cookies.set('email', email, { path: '/app' });
					$.redirect("http://sample-env.py4kpfcsxt.eu-central-1.elasticbeanstalk.com/app/email");
	    		}
	    		else if(data==0){
	    			alert('fail payment');
	    		}
		    },
	        error : function(error){
	        	alert('error with payment stripe one month ' +error.stack);
	        } 
	        });
	},
    description: 'Purchase of Plus Account for 1 Month',
    amount: 1199
    });
  	e.preventDefault();
});

$('#stripebutton120').on('click', function(e) {
	endingdate = Math.floor(now/8.64e7)+365;

	  // Open Checkout with further options:
	  handler.open({
	    token: function(token) {

		    // You can access the token ID with `token.id`.
		    // Get the token ID to your server-side code for use.
	    	formData = new FormData();
			formData.append("tokenid", token.id);
			formData.append("email",...