I am working on creating a personalized checkout form using custom elements and incorporating my ajax function that utilizes StripeCheckout.configure
to handle the payment processing. My goal is to develop a highly adaptable checkout form. I have discovered a method to achieve this through elements with the following setup:
<script src="https://js.stripe.com/v3/"></script>
<body>
<form action="//httpbin.org/post" method="POST">
<input type="hidden" name="token" />
<div class="group">
<label>
<span>Card number</span>
<div id="card-number-element" class="field"></div>
</label>
<label>
<span>Expiry date</span>
<div id="card-expiry-element" class="field"></div>
</label>
<label>
<span>CVC</span>
<div id="card-cvc-element" class="field"></div>
</label>
<label>
<span>Postal code</span>
<input id="postal-code" name="postal_code" class="field" placeholder="Regular field placeholder" />
</label>
</div>
<button type="submit">Pay $25</button>
<div class="outcome">
<div class="error"></div>
<div class="success">
Success! Your Stripe token is <span class="token"></span>
</div>
</div>
</form>
<script>
var stripe = Stripe('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
var elements = stripe.elements();
var style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
};
var cardNumberElement = elements.create('cardNumber', {
style: style,
placeholder: 'Custom card number placeholder',
});
cardNumberElement.mount('#card-number-element');
var cardExpiryElement = elements.create('cardExpiry', {
style: style,
placeholder: 'Custom expiry date placeholder',
});
cardExpiryElement.mount('#card-expiry-element');
var cardCvcElement = elements.create('cardCvc', {
style: style,
placeholder: 'Custom CVC placeholder',
});
cardCvcElement.mount('#card-cvc-element');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// In this example, we're simply displaying the token
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
// In a real integration, you'd submit the form with the token to your backend server
var form = document.querySelector('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('form').addEventListener('submit', function(e) {
e.preventDefault();
var options = {
address_zip: document.getElementById('postal-code').value,
};
stripe.createToken(cardNumberElement, options).then(setOutcome);
});
</script>
</body>
I aim to incorporate an ajax-stripe combination without relying solely on elements but utilizing versions that are element-based.
<form action="{% url 'payments' %}" method="post">
{% csrf_token %}
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
CSRF_TOKEN = document.getElementsByName("csrfmiddlewaretoken")[0].value;
var handler = StripeCheckout.configure({
key: '{{ key }}',
locale: 'auto',
token: function(token) {
$('.notification-success-wrapper').css('display', 'none');
$('.notification-danger-wrapper').css('display', 'none');
$.ajax({
url: "{% url 'payments' %}",
method: 'POST',
data: JSON.stringify({
token: token.id,
amount: {{ amount }},
description: "{{ description }}",
}),
headers: {'X-CSRFToken': CSRF_TOKEN},
})
.done((res) => {
console.log(res)
})
.fail((err) => {
console.log(err)
});
},
allowRememberMe: false
});
document.getElementById('purchase-btn').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: "demoo",
description: "{{ description }}",
amount: {{ amount }}
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
</form>