Basic method for doing custom Stripe checkout form with Craft Commerce

payment.html

{% if cart.paymentMethodId %}
    <form method="POST" class="form" {% if cart.paymentMethod.class == 'Stripe' %}id="payment-form"{% endif %}>
		<input type="hidden" name="action" value="commerce/payments/pay"/>
		<input type="hidden" name="redirect" value="/checkout/complete?number={number}"/>
		<input type="hidden" name="cancelUrl" value="/checkout/cancelled"/>

      	{{ getCsrfInput() }}


		{% if errors is defined %}
			<ul class="errors">
			{% for error in errors %}
				<li>{{ error }}</li>
			{% endfor %}
			</ul>
		{% endif %}

      	{% if cart.paymentMethod.class == 'Stripe' %}
    
			{% set currentYear = date()|date_modify("+1 year").format('Y') %}
			{% set formValues = {
				firstName: paymentForm is defined ? paymentForm.firstName : (cart.billingAddress ? cart.billingAddress.firstName : ''),
				lastName: paymentForm is defined ? paymentForm.lastName : (cart.billingAddress ? cart.billingAddress.lastName : ''),
				number: paymentForm is defined ? paymentForm.number : '',
				cvv: paymentForm is defined ? paymentForm.cvv : '',
				month: paymentForm is defined ? paymentForm.month : 1,
				year: paymentForm is defined ? paymentForm.year : currentYear,
			} %}


      		<!-- Card Holder Name -->
				<fieldset class="checkout__card-details">

				<div class="form__row">
					<div class="form__field form__field--half">
					<label class="form__label form__label--calculator" for="firstName">First name</label>
					<div class="form__control">
						<input type="text" name="firstName" id="firstName" maxlength="70" placeholder="John" class="form__field  form__field--text" value="{{ formValues.firstName }}">
					</div>

					{% if paymentForm is defined %}<span class="form-error">{{ paymentForm.getError('firstName') }}</span>{% endif %}
					</div>

					<div class="form__field form__field--half">
					<label class="form__label form__label--calculator" for="lastName">Last name</label>
					<div class="form__control">
						<input type="text" name="lastName" id="lastName" maxlength="70" placeholder="Smith" class="form__field form__field--text" value="{{ formValues.lastName }}">
					</div>

					{% if paymentForm is defined %}<span class="form-error">{{ paymentForm.getError('lastName') }}</span>{% endif %}
					</div>

				</div>

				</fieldset>

				<fieldset class="{% if paymentForm is defined and paymentForm.hasErrors('number') %}has-error{% endif %}">
				<div class="form__row" style="margin-left:0.5em">
					<div class="form__field">
					<div class="form__field--stripe">
						<label for="cardNumber" class="form__label--stripe">Card Number</label>
						<div id="cardNumber"></div>
					</div>

					<div class="form__field--stripe">
						<label for="expiryMonth" class="form__label--stripe">Card Expiry Month</label>
						<div id="cardExpiry"></div>
					</div>

					<div class="form__field--stripe">
						<label for="cvv" class="form__label--stripe">CVV/CVV2</label>
						<div id="cardCvc"></div>
					</div>
					</div>
				</div>
				</fieldset>

				<fieldset>
				<div class="form__row">
					<!-- Submit -->
					<div class="form__field form__field--half">
					<button class="button button-primary" id="stripeSubmit" type="submit">Pay {{ cart.totalPrice|commerceCurrency(currentUser.preferredCurrency) }} Now</button>
					</div>
				</div>	

				<div class="outcome">
					<div class="error"></div>
					<div class="success">
					Processing. Please wait a moment.
					</div>
				</div>

				<input type="hidden" name="token">
				</fieldset>

		{% endif %}
      

		</div>
	</form>
{% endif %}




{% if cart.paymentMethod.class == 'Stripe' %}
	<!-- custom stripe checkout  -->
	<script src="https://js.stripe.com/v3/"></script>
	<script type="text/javascript">
		// set stripe key
		var stripe = Stripe("{{ cart.paymentMethod.settings.publishableKey ?? '' }}");

		// create elements
		var elements = stripe.elements();

		var $style = {
			base: {
				background: '#ffffff',
				iconColor: '#666EE8',
				color: '#58595',
				lineHeight: '1.15',
				fontWeight: 300,
				fontFamily: 'Open Sans,sans-serif',
				fontSize: '16px',
				width: '100%',

				'::placeholder': {
				color: '#CCCCCC',
				fontFamily: 'Open Sans,sans-serif',
				fontSize: '16px'
				},
			},
		};



		var cardNumberElement = elements.create('cardNumber', {
			style: $style,
			classes: {
				base: 'form__field  form__field--text' 
			}
		});
		cardNumberElement.mount('#cardNumber');

		var cardExpiryElement = elements.create('cardExpiry', {
			style: $style,
			classes: {
				base: 'form__field  form__field--text' 
			}
		});
		cardExpiryElement.mount('#cardExpiry');

		var cardCvcElement = elements.create('cardCvc', {
			style: $style,
			classes: {
				base: 'form__field  form__field--text' 
			}
		});
		cardCvcElement.mount('#cardCvc');

		function setOutcome(result) {
			var successElement = document.querySelector('.success');
			var errorElement = document.querySelector('.error');
			successElement.classList.remove('visible');
			errorElement.classList.remove('visible');

			if (result.token) {
				
				//successElement.classList.add('visible');
				document.querySelector('#stripeSubmit').textContent = "Processing, please wait a moment";
				// In a real integration, you'd submit the form with the token to your backend server
				var form = document.querySelector('#payment-form');
				form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
				form.submit();
			} else if (result.error) {
				errorElement.textContent = result.error.message;
				errorElement.classList.add('visible');
			}
		}

		cardNumberElement.on('change', function(event) {
			setOutcome(event);
		});

		document.querySelector('#payment-form').addEventListener('submit', function(e) {
			e.preventDefault();
			var form = document.querySelector('#payment-form');
			var name = form.querySelector('#firstName').value + ' ' + form.querySelector('#lastName').value;
			var extraData = {
				name: name
			};
			stripe.createToken(cardNumberElement,extraData).then(setOutcome);
		});

	</script>
{% endif %}