<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script src="https://js.stripe.com/v3/"></script>

	<input id="cardholder-name" type="text">
	<!-- placeholder for Elements -->
	<div id="card-element"></div>
	<button id="card-button">Submit Payment</button>

	<script type="text/javascript">
		var stripe = Stripe('pk_test_erRZOn8vHuc17oHhPbWoMcXj');

		var elements = stripe.elements();
		var cardElement = elements.create('card');
		cardElement.mount('#card-element');

		var cardholderName = document.getElementById('cardholder-name');
		var cardButton = document.getElementById('card-button');

		cardButton.addEventListener('click', function(ev) {
		  stripe.createPaymentMethod('card', cardElement, {
		    billing_details: {name: cardholderName.value}
		  }).then(function(result) {
		    if (result.error) {
		      // Show error in payment form
		    } else {
		      // Otherwise send paymentMethod.id to your server (see Step 2)
		      fetch('http://wp.test/wp-content/plugins/piotnet-addons-for-elementor-pro/inc/test-server.php', {
		        method: 'POST',
		        headers: { 'Content-Type': 'application/json' },
		        body: JSON.stringify({ payment_method_id: result.paymentMethod.id })
		      }).then(function(result) {
		        // Handle server response (see Step 3)
		        result.json().then(function(json) {
		          handleServerResponse(json);
		        })
		      });
		    }
		  });
		});

		function handleServerResponse(response) {
		  if (response.error) {
		    // Show error from server on payment form
		  } else if (response.requires_action) {
		    // Use Stripe.js to handle required card action
		    stripe.handleCardAction(
		      response.payment_intent_client_secret
		    ).then(function(result) {
		      if (result.error) {
		        // Show error in payment form
		      } else {
		        // The card action has been handled
		        // The PaymentIntent can be confirmed again on the server
		        fetch('http://wp.test/wp-content/plugins/piotnet-addons-for-elementor-pro/inc/test-server.php', {
		          method: 'POST',
		          headers: { 'Content-Type': 'application/json' },
		          body: JSON.stringify({ payment_intent_id: result.paymentIntent.id })
		        }).then(function(confirmResult) {
		          return confirmResult.json();
		        }).then(handleServerResponse);
		      }
		    });
		  } else {
		    // Show success message
		  }
		}

	</script>

</body>
</html>