var stripe = Stripe('pk_test_NIFiGhJBpoH8kDhbdLTx7TPv');
var elements = stripe.elements();
var card = elements.create('card', {
hidePostalCode: true, style: { base: { iconColor: '#F99A52', color: '#32315E', lineHeight: '34px', '::placeholder': { color: '#CFD7DF', } }, }
}); card.mount('#card-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) { // Use the token to create a charge or a customer // https://stripe.com/docs/charges successElement.querySelector('.token').textContent = result.token.id; successElement.classList.add('visible'); } else if (result.error) { errorElement.textContent = result.error.message; errorElement.classList.add('visible'); }
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); var form = document.querySelector('form'); var extraDetails = { name: form.querySelector('input[name=cardholder-name]').value, address_zip: form.querySelector('input[name=address-zip]').value }; stripe.createToken(card, extraDetails).then(setOutcome);
});