Ayobami
67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
jQuery(function($) {
|
|
'use strict';
|
|
|
|
// Initialize Stripe
|
|
var stripe = Stripe(stripe_params.publishableKey);
|
|
var elements = stripe.elements();
|
|
|
|
// Create card element
|
|
var cardElement = elements.create('card', {
|
|
style: {
|
|
base: {
|
|
fontSize: '16px',
|
|
color: '#424770',
|
|
'::placeholder': {
|
|
color: '#aab7c4',
|
|
},
|
|
},
|
|
invalid: {
|
|
color: '#9e2146',
|
|
},
|
|
},
|
|
});
|
|
|
|
// Mount card element
|
|
cardElement.mount('#stripe-card-element');
|
|
|
|
// Handle form submission
|
|
$('form.checkout').on('checkout_place_order_custom_stripe', function() {
|
|
return stripeFormHandler();
|
|
});
|
|
|
|
function stripeFormHandler() {
|
|
if ($('#payment_method_custom_stripe').is(':checked')) {
|
|
if ($('input[name="stripe_token"]').length) {
|
|
return true;
|
|
}
|
|
|
|
stripe.createToken(cardElement).then(function(result) {
|
|
if (result.error) {
|
|
// Show error to customer
|
|
$('.woocommerce-error, .woocommerce-message').remove();
|
|
$('form.checkout').prepend('<div class="woocommerce-error">' + result.error.message + '</div>');
|
|
$('html, body').animate({
|
|
scrollTop: ($('form.checkout').offset().top - 100)
|
|
}, 1000);
|
|
} else {
|
|
// Insert token into form and submit
|
|
$('form.checkout').append('<input type="hidden" name="stripe_token" value="' + result.token.id + '" />');
|
|
$('form.checkout').submit();
|
|
}
|
|
});
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// Handle card element changes
|
|
cardElement.addEventListener('change', function(event) {
|
|
var displayError = document.getElementById('card-errors');
|
|
if (event.error) {
|
|
displayError.textContent = event.error.message;
|
|
} else {
|
|
displayError.textContent = '';
|
|
}
|
|
});
|
|
});
|