Skip to content

Instantly share code, notes, and snippets.

@peteeveleigh
Created November 27, 2017 14:52
Show Gist options
  • Save peteeveleigh/d29f865f6698af7dfb15a0c9813a9124 to your computer and use it in GitHub Desktop.
Save peteeveleigh/d29f865f6698af7dfb15a0c9813a9124 to your computer and use it in GitHub Desktop.
Basic method for doing custom Stripe checkout form with Craft Commerce
{% 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 %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment