Created
January 14, 2020 15:15
-
-
Save mahfuz10/055c5ed8ced0c018a742064caafdc048 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
/* | |
MIT License | |
Copyright (c) 2017 Stripe | |
Permission is hereby granted, free of charge, to any person obtaining a copy | |
of this software and associated documentation files (the "Software"), to deal | |
in the Software without restriction, including without limitation the rights | |
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
copies of the Software, and to permit persons to whom the Software is | |
furnished to do so, subject to the following conditions: | |
The above copyright notice and this permission notice shall be included in all | |
copies or substantial portions of the Software. | |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |
SOFTWARE. | |
*/ | |
// Forked from: https://github.com/Blueprinter/stripe-js.v3-using-elements | |
'use strict'; | |
// Create a Stripe client | |
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');//You must get the API key from your stripe account | |
function registerElements(elements, exampleName) { | |
//console.log('exampleName 40: ' + exampleName); | |
var formClass = '.' + exampleName; | |
var example = document.querySelector(formClass); | |
var form = example.querySelector('form'); | |
var resetButton = example.querySelector('a.reset'); | |
var error = form.querySelector('.error'); | |
var errorMessage = error.querySelector('.message'); | |
function enableInputs() { | |
Array.prototype.forEach.call( | |
form.querySelectorAll( | |
"input[type='text'], input[type='email'], input[type='tel']" | |
), | |
function(input) { | |
input.removeAttribute('disabled'); | |
} | |
); | |
} | |
function disableInputs() { | |
Array.prototype.forEach.call( | |
form.querySelectorAll( | |
"input[type='text'], input[type='email'], input[type='tel']" | |
), | |
function(input) { | |
input.setAttribute('disabled', 'true'); | |
} | |
); | |
} | |
function triggerBrowserValidation() { | |
// The only way to trigger HTML5 form validation UI is to fake a user submit | |
// event. | |
var submit = document.createElement('input'); | |
submit.type = 'submit'; | |
submit.style.display = 'none'; | |
form.appendChild(submit); | |
submit.click(); | |
submit.remove(); | |
} | |
// Listen for errors from each Element, and show error messages in the UI. | |
var savedErrors = {}; | |
elements.forEach(function(element, idx) { | |
element.on('change', function(event) { | |
if (event.error) { | |
error.classList.add('visible'); | |
savedErrors[idx] = event.error.message; | |
errorMessage.innerText = event.error.message; | |
} else { | |
savedErrors[idx] = null; | |
// Loop over the saved errors and find the first one, if any. | |
var nextError = Object.keys(savedErrors) | |
.sort() | |
.reduce(function(maybeFoundError, key) { | |
return maybeFoundError || savedErrors[key]; | |
}, null); | |
if (nextError) { | |
// Now that they've fixed the current error, show another one. | |
errorMessage.innerText = nextError; | |
} else { | |
// The user fixed the last error; no more errors. | |
error.classList.remove('visible'); | |
} | |
} | |
}); | |
}); | |
// Listen on the form's 'submit' handler... | |
form.addEventListener('submit', function(e) { | |
e.preventDefault(); | |
//console.log('form was submitted') | |
// Trigger HTML5 validation UI on the form if any of the inputs fail | |
// validation. | |
var plainInputsValid = true;//Set default value to true | |
Array.prototype.forEach.call(form.querySelectorAll('input'), function( | |
input | |
) { | |
if (input.checkValidity && !input.checkValidity()) { | |
plainInputsValid = false; | |
return; | |
} | |
}); | |
if (!plainInputsValid) { | |
triggerBrowserValidation(); | |
return; | |
} | |
window.AAA_Library.stripeFormClassName = exampleName;//Store the payment form name for later - see AAA_Library.paymentComplete | |
//console.log('example.classList: ' + example.classList) | |
// Show a loading screen... | |
example.classList.add('submitting'); | |
// Disable all inputs. | |
disableInputs(); | |
// Gather additional customer data we may have collected in our form | |
var name = form.querySelector('#' + exampleName + '-name'); | |
var email = form.querySelector('#' + exampleName + '-email'); | |
var address1 = form.querySelector('#' + exampleName + '-address'); | |
var city = form.querySelector('#' + exampleName + '-city'); | |
var state = form.querySelector('#' + exampleName + '-state'); | |
var zip = form.querySelector('#' + exampleName + '-zip'); | |
//console.log('name: ' + JSON.stringify(name)) | |
//console.log('email.value: ' + email.value) | |
var additionalData = { | |
name: name ? name.value : undefined, | |
email: email ? email.value : undefined, | |
address_line1: address1 ? address1.value : undefined, | |
address_city: city ? city.value : undefined, | |
address_state: state ? state.value : undefined, | |
address_zip: zip ? zip.value : undefined, | |
}; | |
//console.log('additionalData 152: ' + JSON.stringify(additionalData)) | |
// Stripe.js will create a token ID - Only one Element needs to be passed | |
// from the Element group in order to create a token - | |
// Additional customer data we collected in our form can be passed | |
stripe.createToken(elements[0], additionalData).then(function(result) { | |
var whatHappened; | |
// Stop loading! | |
example.classList.remove('submitting'); | |
if (result.token) { | |
// If we received a token, show the token ID | |
//console.log('result.token.id 159: ' + result.token.id) | |
additionalData.tokenId = result.token.id;//Add ID to data object - Not original stripe code | |
//console.log('additionalData 164: ' + JSON.stringify(additionalData)) | |
AAA_Library.tokenID = result.token.id;//Not created by stripe | |
AAA_Library.callServer(additionalData);//Not original stripe code | |
} else { | |
// Otherwise, un-disable inputs. | |
enableInputs(); | |
alert('There was an error getting the token') | |
} | |
}); | |
}); | |
resetButton.addEventListener('click', function(e) { | |
e.preventDefault(); | |
// Resetting the form (instead of setting the value to `''` for each input) | |
// helps us clear webkit autofill styles | |
form.reset(); | |
// Clear each Element. | |
elements.forEach(function(element) { | |
element.clear(); | |
}); | |
// Reset error state as well. | |
error.classList.remove('visible'); | |
// Resetting the form does not un-disable inputs, so we need to do it separately: | |
enableInputs(); | |
example.classList.remove('submitted'); | |
}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment