matt.html

<form id="payment-information" class="pure-form pure-form-aligned light" method="POST">
	<input type="hidden" name="action" value="commerce/payments/pay"/>
	{{ redirectInput('order/confirmation/{number}') }}
	{{ csrfInput() }}
	<input type="hidden" name="cancelUrl" value="{{ '/order'|hash }}"/>
	<input type="hidden" name="gatewayId" value="{{ cart.gatewayId }}"/>
	<noscript>
		<div class="bs-callout bs-callout-danger">
			<h4>JavaScript is not enabled!</h4>
			<p>This payment form requires your browser to have JavaScript enabled. Please activate JavaScript and reload this page. Check <a href="http://enable-javascript.com" target="_blank">enable-javascript.com</a> for more informations.</p>
		</div>
	</noscript>
	<fieldset>
		<!--<span class="payment-errors"></span>-->
		<div class="two-columns">
			{{ cart.gateway.getPaymentFormHtml({})|raw }}
			<button type="submit" name="make-payment" class="pure-button left pure-button-primary">Make payment</button>
		</div>
		<div class="panel dark">
			<div class="note-label-payment">Please make sure all details are correct before making payment</div>
		</div>
	</fieldset>
</form>
<script type="text/javascript">
  function initStripe() {
  	// Because this might get executed before Stripe is loaded.
  	if (typeof Stripe === "undefined") {
  		setTimeout(initStripe, 200);
  	} else {
  		$('.stripe-payment-intents-form').each(function() {
  			$container = $(this);
  
  			function updateErrorMessage(event) {
  				var displayError = $('.card-errors', $container).get(0);
  
  				if (event.error) {
  					displayError.textContent = event.error.message;
  				} else {
  					displayError.textContent = '';
  				}
  
  				if ($('.modal').data('modal')) {
  					$('.modal').data('modal').updateSizeAndPosition();
  				}
  
  				if ($(".card-errors").text().length === 0 && event.empty == false) {
  					$($container).find('fieldset.card-data').removeClass('error');
  				} else {
  					$($container).find('fieldset.card-data').addClass('error');
  				}
  
  				if ($(".error").length === 0) {
  					$("button[name='make-payment']").attr("disabled", false);
  				} else {
  					$("button[name='make-payment']").attr("disabled", true);
  				}
  			}
  
  			function handleAction(response) {
  				stripe.handleCardAction(response.payment_intent_client_secret).then(function(result) {
  					if (result.error) {
  						// Show error in payment form
  						updateErrorMessage(result);
  					} else {
  						// The card action has been handled
  						handleServerResponse(result);
  					}
  				});
  			}
  
  			function handleServerResponse(result) {
  				if (result.error) {
  					updateErrorMessage(result);
  					$form.data('processing', false);
  				} else if (result.requires_action) {
  					// Use Stripe.js to handle required card action
  					handleAction(response);
  				} else {
  					// Add the payment source token to the form.
  					$form.append($('<input type="hidden" name="paymentMethodId"/>').val(result.paymentMethod.id));
  					$form.get(0).submit();
  				}
  			}
  
  			var stripe = Stripe($container.data('publishablekey'));
  			var elements = stripe.elements({
  				fonts: [
  					{
  						family: 'pemw-rg',
  						src: 'url("https://static.typography.net/woff2/pemw-rg.woff2") format("woff2"), url(https://static.typography.net/woff/pemw-rg.woff) format("woff")',
  					},
  				]
  			});
  
  			var style = {
  				base: {
  					// Add your base input styles here. For example:
  					fontFamily: 'pemw-rg',
  					fontSize: '15px',
  					lineHeight: '18px'
  				}
  			};
  
  			// Create an instance of the card Element
  			var card = elements.create('card', {
  						style: style,
  						hidePostalCode: true
  					}
  			);
  
  			card.addEventListener('change', updateErrorMessage);
  
  			// Add an instance of the card Element into the `card-element` <div>
  			card.mount($('.card-data', $container).empty().get(0));
  
  			var $form = $('form', $container);
  
  			if ($form.length === 0) {
  				$form = $container.parents('form');
  			}
  
  			$($container).find('.card-holder-first-name').keyup(function(){
  				if ($(this).val().length) {
  					$(this).removeClass('error');
  				} else {
  					$(this).addClass('error');
  				}
  			});
  			$($container).find('.card-holder-last-name').keyup(function(){
  				if ($(this).val().length) {
  					$(this).removeClass('error');
  				} else {
  					$(this).addClass('error');
  				}
  			});
  
  			$($container).find('.card-holder-first-name').trigger('keyup').attr('placeholder', 'First name');
  			$($container).find('.card-holder-last-name').trigger('keyup').attr('placeholder', 'Last name');
  			$($container).find('fieldset.card-data').addClass('error');
  
  			$($container).find('legend').text("Card holder");
  			$('<label>Card details</label>').insertBefore('fieldset.card-data');
  
  			// Remove already bound events
  			$form.off('submit');
  
  			$form.on('submit', function(ev) {
  				ev.preventDefault();
  
  				// If form submitted already, disregard.
  				if ($form.data('processing')) {
  					return false;
  				}
  
  				$form.data('processing', true);
  
  				// Compose card holder info
  				var cardHolderName, orderEmail, ownerAddress;
  
  				if ($('.card-holder-first-name', $form).length > 0 && $('.card-holder-last-name', $form).length > 0) {
  					cardHolderName = $('.card-holder-first-name', $form).val() + ' ' + $('.card-holder-last-name', $form).val();
  				}
  
  				if ($('.stripe-address', $form).length > 0) {
  					ownerAddress = {
  						'line1': $('#billingAddress-address1').val(),
  						'city': $('#billingAddress-city').val(),
  						'postal_code': $('#billingAddress-zipCode').val(),
  						'country': $('#country').find('option:selected').data("iso"),
  					};
  				}
  
  				orderEmail = $('#billing-email').val();
  				if (!orderEmail.length) {
  					orderEmail = $('#email').val();
  				}
  
  				// Tokenize the credit card details and create a payment source
  				stripe.createPaymentMethod('card', card, {billing_details: {name: cardHolderName, email: orderEmail, address: ownerAddress}}).then(handleServerResponse);
  			});
  
  			if ($('.modal').data('modal')) {
  				$('.modal').data('modal').updateSizeAndPosition();
  			}
  		});
  	}
  }
  
  $(document).ready(function(){
    initStripe();
  });
</script>